作为一个APP,表单是不可或缺的组件,无论注册,发帖,评论,购物等等,都是表单的变形。
这一章讲解jQuery Mobile(JM)中的表单。
默认情况下,JM会尝试通过框架中Ajax发送表单。如果强制不适用AJax,可以在form标签中使用data-ajax=“false”,或加上target=“_blank”来强制使用Ajax。
表单可以使用(二)中的data-transition,data-direction属性来改变弹出样式。
使用Ajax时,整个页面共享一个DOM,所以提交form时,需要保证各个form元素的ID在整个站点中唯一。
1.文本标签
应该为每个控件包含一个label元素,并将控件for属性指向该控件id。当用户点击label时,对应的表单控件会得到焦点。对触摸设备来说,增加了得到焦点的区域,便于点击。
<label for="company">Company Name:</label>
<input type="text" id="company">
如果想隐藏它,可以加上class=“ui-hidden-accessible”
2.域容器(可选的文本标签/部件包装器,类似于DIV)
容器的作用:会将内部的文本标签和表单控件自动对齐,并会添加一个细边框作为字段分隔符;会根据设备的宽度自动调整布局。
<div data-role="fieldcontainer">
<label for="company">Company Name:</label>
<input type="text" id="company" name="company">
</div>
<div data-role="fieldcontainer">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
3.文本输入框
<input type="text">
<input type="password">
<input type="email">
<input type="tel">
<input type="url">
<input type="search">
<input type="number">
<textarea> //当文本过多时,框架会自动扩展该文本区域以适合新行。
可以选择的文本属性有required(必需)、pattern(验证用正则表达式)、placeholder(提示文字)和min、max(仅用于type=“number”)
4.日期输入框
<div data-role="fieldcontainer">
<label for="birth">Your Birthdate:</label>
<input type="date" id="birth" name="birth">
<label for="favmonth">Your favorite month:</label>
<input type="month" id="favmonth" name="favmonth">
</div>
type可选属性:
type | 格式 |
date | 年、月、日 |
datetime | 年、月、日、小时、分钟 |
time | 小时、分钟 |
datetime-local | 完整的日期选择,不带时区信息 |
month | 月份 |
week | 星期 |
5.滑块
<div data-role="fieldcontainer">
<label for="qty">Quantity:</label>
<input type="range" id="qty" name="qty" min="1" max="100" step="2" value="5" data-theme="e"
data-track-theme="b">
</div>
data-track-theme只影响滚动条,data-theme只对数字输入框有效
6.平移切换开关(需要显式指定data-role)
<label for="updated">Receive updates</label>
<select id="updated" name="updated" <span style="background-color: rgb(51, 204, 255);">data-role="slider"</span>>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
单选:
<label for="training">Training</label>
<select id="training" name="training">
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">BlackBerry</option>
<option value="6">Qt for Meego</option>
</select>
多选:(可以用optgroup和option元素将选项分组)
<label for="lang">Languages you like</label>
<select id="lang" name="lang" <span style="background-color: rgb(51, 204, 255);">multiple</span>>
<option value="1">C/C++</option>
<option value="2">Objective-C</option>
<option value="3">Java</option>
<option value="4">C#</option>
<option value="5">Visual Basic</option>
<option value="6">ActionScript</option>
<option value="7">Delphi</option>
<option value="8">Phyton</option>
</select>
组合选择菜单:(垂直和水平)
label会被隐藏,可以使用legend元素来定义一个应用到整个分组的文本标签
<div data-role="controlgroup">
<legend>Color and Size</legend>
<label for="color">color</label>
<select id="color" name="color">
<option value="1">Blue</option>
<option value="2">White</option>
<option value="3">Red</option>
<option value="4">Black</option>
<option value="5">Pink</option>
</select>
<select id="size" name="size">
<option value="1">X-Small</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">X-Large</option>
</select>
</div>
<div data-role="controlgroup" data-type="horizontal">
<legend>Week day and time</legend>
<select id="weekday" name="weekday" multiple>
<option value="1">Mon</option>
<option value="2">Tue</option>
<option value="3">Wed</option>
<option value="4">Thu</option>
<option value="5">Fri</option>
</select>
<select id="time" name="time">
<option value="1">Morning</option>
<option value="2">Midday</option>
<option value="3">Afternoon</option>
</select>
非原生选择菜单:
<label for="training">Training</label>
<select id="training" name="training" <span style="background-color: rgb(51, 204, 255);">data-native-menu="false"</span>>
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">BlackBerry</option>
<option value="6">Qt for Meego</option>
</select>
如果选项过多,打开菜单时将创建一个对话页面
<label for="training">Training</label>
<select id="training" name="training" data-native-menu="false" <span style="background-color: rgb(51, 204, 255);">data-overlay-theme="e"</span>>
<option value="0" <span style="background-color: rgb(51, 204, 255);">data-placeholder="true"</span>>Select your training</option>
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">BlackBerry</option>
<option value="6">Qt for Meego</option>
</select>
data-overlay-theme来指定菜单覆盖层的色样,如果value=‘’或data-placehoder=“true”将被用作覆盖层的标题。
8.单选
放在controlgroup中,样式会友好一些,不会铺满屏幕。
name值必须一致,id唯一,label唯一
<div data-role="controlgroup">
<legend>Menu type</legend>
<label for="menuNative1">Native menu, single selection</label>
<input type="radio" id="menuNative1" name="menuType" value="1">
<label for="menuNative2">Native menu, multiple selection</label>
<input type="radio" id="menuNative2" name="menuType" value="2">
<label for="menuNonNative1">Non-native menu, single selection</label>
<input type="radio" id="menuNonNative1" name="menuType" value="3">
<label for="menuNonNative2">Non-native menu, multiple selection</label>
<input type="radio" id="menuNonNative2" name="menuType" value="4">
</div>
水平单选(类似于开关)
<legend>Delivery method</legend>
<div data-role="controlgroup" data-type="horizontal">
<label for="deliveryUPS">UPS</label>
<input type="radio" id="deliveryUPS" name="delivery" value="ups">
<label for="deliveryDHL">DHL</label>
<input type="radio" id="deliveryDHL" name="delivery" value="dhl">
<label for="deliveryFedex">FedEx</label>
<input type="radio" id="deliveryFedex" name="delivery" value="fedex">
</div>
<legend>Delivery options</legend>
<div data-role="controlgroup" <span style="background-color: rgb(51, 204, 255);">data-type="horizontal"</span>>
<label for="optionGift">Pack it as a Gift</label>
<input type="checkbox" id="optionGift" name="optionGift" value="yes">
<label for="optionBag">Send it with a bag</label>
<input type="checkbox" id="optionBag" name="optionBag" value="yes">
<label for="optionRemove">Remove the box</label>
<input type="checkbox" id="optionRemove" name="optionRemove" value="yes">
</div>
<input type="file">目前不被IOS、Android支持,web可以。