jQuery Mobile 学习四

                                                          jQuery Mobile 学习四

jQuery Mobile 表单结构

jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式，以使其更有吸引力更易用。

在 jQuery Mobile 中，您可以使用以下表单控件：

• 文本框
• 搜索框
• 单选框
• 复选框
• 选择菜单
• 滑动条
• 翻转切换开关

当您与 jQuery Mobile 表单打交道时，应该了解以下信息：

• <form> 元素必须设置 method 和 action 属性
• 每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。
• 每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">姓名：</label>
  <input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

域容器

如果需要 label 和表单元素在宽屏幕上显示正常，请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素来包装 label 或表单元素：

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

提示：fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。当小于 480px 时，label 会被放置于表单元素之上。

提示：如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属性：

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">

在 jQuery Mobile 中提交表单

提示：jQuery Mobile 会自动通过 AJAX 进行表单提交，并会尝试将服务器响应整合入应用程序的 DOM 中。

文本输入

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">全名：</label>
    <input type="text" name="fullname" id="fullname">

    <label for="bday">生日：</label>
    <input type="date" name="bday" id="bday">

    <label for="email">电邮：</label>
    <input type="email" name="email" id="email" placeholder="您的邮件地址..">
  </div>
</form>

文本框

请使用 <textarea> 来实现多行文本输入。

注释：文本框会自动扩大，以适应您输入的文本行。

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

搜索框

输入类型 type="search" 是 HTML5 中的新类型，用于定义供输入搜索词的文本字段：

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

单选按钮

当用户只选择有限数量选项中的一个时，会用到单选按钮。

如需创建一套单选按钮，请添加 type="radio" 的 input 元素以及相应的 label。在 <fieldset> 元素中包装单选按钮。您也可以增加一个 <legend> 元素来定义 <fieldset> 的标题。

提示：请用 data-role="controlgroup" 属性来组合这些按钮：

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Choose your gender:</legend>
      <label for="male">Male</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Female</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

复选框

当用户选择有限数量选项中的一个或多个选项时，会用到复选框：

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Choose as many favorite colors as you'd like:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

jQuery Mobile 选择菜单

<select> 元素创建带有若干选项的下拉菜单。

<select> 元素中的 <option> 元素定义列表中的可用选项：

<form method="post" action="demoform.asp">
  <fieldset data-role="fieldcontain">
    <label for="day">选择日期</label>
    <select name="day" id="day">
      <option value="mon">星期一</option>
      <option value="tue">星期二</option>
      <option value="wed">星期三</option>
    </select>
  </fieldset>
</form>

提示：如果列表中包含了一长列相关的选项，请在 <select> 中使用 <optgroup> 元素：

<select name="day" id="day">
   <optgroup label="Weekdays">
    <option value="mon">Monday</option>
    <option value="tue">Tuesday</option>
    <option value="wed">Wednesday</option>
   </optgroup>
   <optgroup label="Weekends">
    <option value="sat">Saturday</option>
    <option value="sun">Sunday</option>
   </optgroup>
</select>

jQuery Mobile 滑块控件

滑块允许您从一定范围内的数字中选取值：

如需创建滑块，请使用 <input type="range">：

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="points">Points:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100">
  </div>
</form>

使用下列属性来规定限定：

• max - 规定允许的最大值
• min - 规定允许的最小值
• step - 规定合法的数字间隔
• value - 规定默认值

提示：如果您希望突出显示截止滑块值的这段轨道，请添加 data-highlight="true"：

切换开关常用于开/关或对/错按钮：

切换开关

切换开关常用于开/关或对/错按钮：

如需创建切换，请使用 data-role="slider" 的 <select> 元素，并添加两个 <option> 元素

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off">Off</option>
    </select>
  </div>
</form>

提示：使用 "selected" 属性来把选项之一设置为预选（突出显示）：