jQuery Mobile 表单输入学习笔记

一、表单输入简介

1.1 表单元素

表单是网页中用于收集用户信息的重要方式。表单由多个表单元素组成，包括：文本框、单选框、复选框、下拉菜单、按钮等。

1.2 jQuery Mobile 表单输入

jQuery Mobile 是一个基于 jQuery 的移动端 Web 开发框架，提供了一系列易用的表单输入组件，可以实现快速构建漂亮且功能强大的表单页面。

二、文本框

文本框是表单中最常用的元素之一，用于接收用户输入的文本信息。

2.1 创建文本框

在 jQuery Mobile 中，可以通过以下代码创建一个文本框：

htmlCopy Code
<label for="name">姓名:</label>
<input type="text" name="name" id="name" />

这里，for 属性与 id 属性相对应，用于实现标签与表单元素的关联。

2.2 文本框属性

2.2.1 placeholder 属性

placeholder 属性用于设置文本框的占位符，即在用户输入前显示的灰色文本。

例如：

htmlCopy Code
<input type="text" name="username" placeholder="请输入用户名" />

2.2.2 autocomplete 属性

autocomplete 属性用于控制文本框的自动完成行为。

例如：

htmlCopy Code
<input type="text" name="email" autocomplete="on" />

2.3 实例演示

下面是一个简单的文本框示例，包含了 placeholder 和 autocomplete 属性的应用：

htmlCopy Code
<form>
  <div class="ui-field-contain">
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="请输入姓名" autocomplete="on" />

    <label for="email">邮箱:</label>
    <input type="email" name="email" id="email" placeholder="请输入邮箱" autocomplete="on" />

    <label for="password">密码:</label>
    <input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off" />
  </div>
</form>

三、单选框和复选框

单选框和复选框分别用于在多个选项中选择一个或多个。

3.1 创建单选框和复选框

在 jQuery Mobile 中，可以通过以下代码创建单选框和复选框：

htmlCopy Code
<fieldset data-role="controlgroup">
  <legend>请选择性别:</legend>
  <input type="radio" name="gender" id="male" value="male" checked />
  <label for="male">男</label>

  <input type="radio" name="gender" id="female" value="female" />
  <label for="female">女</label>

  <input type="checkbox" name="hobby" id="reading" value="reading" checked />
  <label for="reading">阅读</label>

  <input type="checkbox" name="hobby" id="writing" value="writing" />
  <label for="writing">写作</label>
</fieldset>

3.2 单选框和复选框属性

3.2.1 checked 属性

checked 属性用于设置单选框和复选框的默认选中状态。

例如：

htmlCopy Code
<input type="radio" name="gender" id="male" value="male" checked />

3.2.2 disabled 属性

disabled 属性用于禁用单选框和复选框。

例如：

htmlCopy Code
<input type="radio" name="gender" id="male" value="male" disabled />

3.3 实例演示

下面是一个包含单选框和复选框的示例：

htmlCopy Code
<form>
  <fieldset data-role="controlgroup">
    <legend>请选择性别:</legend>
    <input type="radio" name="gender" id="male" value="male" checked />
    <label for="male">男</label>

    <input type="radio" name="gender" id="female" value="female" />
    <label for="female">女</label>

    <legend>请选择兴趣:</legend>
    <input type="checkbox" name="hobby" id="reading" value="reading" checked />
    <label for="reading">阅读</label>

    <input type="checkbox" name="hobby" id="writing" value="writing" />
    <label for="writing">写作</label>
  </fieldset>
</form>

四、下拉菜单

下拉菜单用于在多个选项中选择一个。

4.1 创建下拉菜单

在 jQuery Mobile 中，可以通过以下代码创建下拉菜单：

htmlCopy Code
<label for="province">请选择省份:</label>
<select name="province" id="province">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangdong">广东</option>
</select>

4.2 下拉菜单属性

4.2.1 selected 属性

selected 属性用于设置下拉菜单的默认选中项。

例如：

htmlCopy Code
<select name="province" id="province">
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
  <option value="guangdong">广东</option>
</select>

4.3 实例演示

下面是一个包含下拉菜单的示例：

htmlCopy Code
<form>
  <div class="ui-field-contain">
    <label for="province">请选择省份:</label>
    <select name="province" id="province">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="guangdong">广东</option>
    </select>
  </div>
</form>

五、按钮

按钮用于触发表单提交等操作。

5.1 创建按钮

在 jQuery Mobile 中，可以通过以下代码创建按钮：

htmlCopy Code
<button type="submit">提交</button>

5.2 按钮属性

5.2.1 data-icon 属性

data-icon 属性用于设置按钮的图标。

例如：

htmlCopy Code
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">删除</a>

5.2.2 data-theme 属性

data-theme 属性用于设置按钮的主题样式。

例如：

htmlCopy Code
<button type="submit" data-theme="b">提交</button>

5.3 实例演示

下面是一个包含按钮的示例：

htmlCopy Code
<form>
  <div class="ui-field-contain">
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" />

    <label for="email">邮箱:</label>
    <input type="email" name="email" id="email" />

    <button type="submit" data-theme="b">提交</button>
  </div>
</form>

以上就是 jQuery Mobile 表单输入的基本知识和实例演示，希望对你有所帮助。