jQuery Mobile 表单学习笔记

1. Introduction

jQuery Mobile 是一个基于 jQuery 的开源框架，专为移动设备设计。它提供了一套用于构建移动应用程序的用户界面组件，其中包括表单元素。在本文中，我们将学习如何使用 jQuery Mobile 创建表单。

2. 表单元素

文本输入框

文本输入框是最基本的表单元素之一，它允许用户输入文本。在 jQuery Mobile 中，您可以使用以下代码创建文本输入框。

htmlCopy Code
<label for="text-input">姓名:</label>
<input type="text" name="text-input" id="text-input" placeholder="请输入您的姓名">

多行文本框

多行文本框是用于输入多行文本的表单元素。在 jQuery Mobile 中，您可以使用以下代码创建多行文本框。

htmlCopy Code
<label for="textarea">留言：</label>
<textarea name="textarea" id="textarea" placeholder="请输入您的留言"></textarea>

单选框

单选框是一组允许用户从几个选项中选择一个选项的表单元素。在 jQuery Mobile 中，您可以使用以下代码创建单选框。

htmlCopy Code
<fieldset data-role="controlgroup" data-type="horizontal">
  <legend>您最喜欢的颜色是什么？</legend>
  <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1">
  <label for="radio-choice-1">红色</label>

  <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
  <label for="radio-choice-2">蓝色</label>

  <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
  <label for="radio-choice-3">绿色</label>
</fieldset>

复选框

复选框是一组允许用户从几个选项中选择多个选项的表单元素。在 jQuery Mobile 中，您可以使用以下代码创建复选框。

htmlCopy Code
<fieldset data-role="controlgroup">
  <legend>请选择您喜欢的水果：</legend>
    <input type="checkbox" name="checkbox-1a" id="checkbox-1a" value="orange">
    <label for="checkbox-1a">橙子</label>
    <input type="checkbox" name="checkbox-2a" id="checkbox-2a" value="banana">
    <label for="checkbox-2a">香蕉</label>
    <input type="checkbox" name="checkbox-3a" id="checkbox-3a" value="apple">
    <label for="checkbox-3a">苹果</label>
</fieldset>

下拉菜单

下拉菜单是一组选项，允许用户从中选择一个选项。在 jQuery Mobile 中，您可以使用以下代码创建下拉菜单。

htmlCopy Code
<label for="select-choice">请选择您的职业:</label>
<select name="select-choice" id="select-choice">
  <option value="engineer">工程师</option>
  <option value="doctor">医生</option>
  <option value="teacher">教师</option>
  <option value="lawyer">律师</option>
</select>

3. 实例

下面是一个简单的表单，其中包含上述所有表单元素的示例：

htmlCopy Code
<form>
  <label for="text-input">姓名:</label>
  <input type="text" name="text-input" id="text-input" placeholder="请输入您的姓名">

  <label for="textarea">留言：</label>
  <textarea name="textarea" id="textarea" placeholder="请输入您的留言"></textarea>

  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>您最喜欢的颜色是什么？</legend>
    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1">
    <label for="radio-choice-1">红色</label>

    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
    <label for="radio-choice-2">蓝色</label>

    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
    <label for="radio-choice-3">绿色</label>
  </fieldset>

  <fieldset data-role="controlgroup">
    <legend>请选择您喜欢的水果：</legend>
    <input type="checkbox" name="checkbox-1a" id="checkbox-1a" value="orange">
    <label for="checkbox-1a">橙子</label>
    <input type="checkbox" name="checkbox-2a" id="checkbox-2a" value="banana">
    <label for="checkbox-2a">香蕉</label>
    <input type="checkbox" name="checkbox-3a" id="checkbox-3a" value="apple">
    <label for="checkbox-3a">苹果</label>
  </fieldset>

  <label for="select-choice">请选择您的职业:</label>
  <select name="select-choice" id="select-choice">
    <option value="engineer">工程师</option>
    <option value="doctor">医生</option>
    <option value="teacher">教师</option>
    <option value="lawyer">律师</option>
  </select>

  <button type="submit">提交</button>
</form>

4. 结论

通过本文，我们已经学习了如何使用 jQuery Mobile 创建表单。上述介绍的表单元素和示例只是 jQuery Mobile 表单中的一小部分，我们可以根据自己的需求创建更多的表单元素和示例。如果你想了解更多有关 jQuery Mobile 的知识，请继续关注官方文档的更新。