jquery-mobile表单的创建方法详解

本文实例讲述了jquery-mobile表单的创建方法。分享给大家供大家参考，具体如下：

一、注意事项

1. <form> 元素必须设置 method 和 action 属性

2. 每个表单元素必须设置唯一的 "id" 属性。

该 id 在站点的页面中必须是唯一的。

这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。

3. 每个表单元素必须有一个标记（label）。

请设置 label 的 for 属性来匹配元素的 id。

二、各种属性的使用

【文本框】

data-role="fieldcontain" 大于480px 自动与label 同到一行

<div data-role="fieldcontain">  <label for="lname">姓：</label>  <input type="text" name="lname" id="lname">  <label for="fname">名：</label>  <input type="text" name="fname" id="fname"></div>

如果不希望使用 jquery-mobile的样式

data-role="none"

【搜索框】

加上data-role="fieldcontain" 一行 不加每个标签一行

<div data-role="fieldcontain"> <label for="search">Search:</label> <input type="search" name="search" id="search"><div data-role="fieldcontain">

【单选框】

<fieldset data-role="controlgroup">   <legend>请选择您的性别：</legend>    <label for="male">男性</label>    <input type="radio" name="gender" id="male" value="male">    <label for="female">女性</label>    <input type="radio" name="gender" id="female" value="female"></fieldset>

【复选框】

<fieldset data-role="controlgroup">    <legend>请选择您喜爱的颜色：</legend>     <label for="red">红色</label>     <input type="checkbox" name="favcolor" id="red" value="red">     <label for="green">绿色</label>     <input type="checkbox" name="favcolor" id="green" value="green">     <label for="blue">蓝色</label>     <input type="checkbox" name="favcolor" id="blue" value="blue"></fieldset>

[注意]：单复选水平分组

可在fieldset 标签中添加属性

data-type="horizontal"

预选某个按钮 可以使用：

input 的 checked

【选择菜单】

普通选择菜单，有点丑

<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>

自定义选择菜单

使用属性：

data-native-menu="false"