jQuery Mobile表单:使用CSS来设置HTML表单元素的样式。
表单控件包括:文本框,搜索框,单选框,复选框,选择菜单,滑动条,翻转切换开关
基本规则: <form>元素必须设置method,action属性
每个表单元素必须设置唯一的"id"属性。(该 id 在站点的页面中必须是唯一的)
每个表单元素必须有一个标记 label (请设置 label 的 for 属性来匹配元素的 id)
e.g.
<form method="post" action="demo_form.asp">
<label for="firstName">First name:</label>
<input type="text" name="firstName" id="firstName" />
</form>
隐藏label: class="ui-hidden-accessible"
文本框text的占位符: placeholder="..."
e.g.
<label for="firstName" class="ui-hidden-accessible">First name:</label>
<input type="text" name="firstName" id="firstName" placeholder="请输入内容" />
data-role="fieldcontain” - 基于页面宽度来设置 label 和表单控件的样式
当页面宽度大于480px 时,会自动将 label 与表单控件放置于同一行; 当小于 480px 时,label 会被放置于表单元素之上
e.g.
<div data-role="fieldcontain">
<label for="firstName" class="ui-hidden-accessible">First name:</label>
<input type="text" name="firstName" id="firstName" placeholder="请输入内容" />
.........
</div>
data-role="none" -取消 jQuery Mobile 自动为可点击元素设置的样式
e.g.
<label for="firstName" >First name:</label>
<input type="text" name="firstName" id="firstName" data-role="none" />