jQuery Mobile 表单基础

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