jQuery Mobile的文本输入框
输入字段编码标准的HTML元素和jQuery Mobile将他们的风格看起来有吸引力和易于使用的移动设备。 您还可以使用新的HTML5 <input>类型:
例
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input
type="text" name="fullname" id="fullname">
<label
for="bday">Date of Birth:</label>
<input type="date" name="bday"
id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
</form>
试一试» 文本区域
使用<textarea>多行文字输入。
注:文本区域将自动增长,因为你键入一些文字,以适应新的线路。
例
<label for="info">Additional Information:</label>
<textarea
name="addinfo" id="info"></textarea>
试一试» 搜索输入
输入type="search"是在HTML5新,并定义输入搜索文本字段:
单选按钮
单选按钮用于当用户只能选择一个选择有限数目中的一个。
要创建一组单选按钮,以添加一个输入type="radio"和相应的标签。 裹在一个单选按钮<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>
试一试» 更多示例
为了单选按钮组或复选框水平,使用data-type="horizontal" :
您也可以缠绕在一个字段容器<fieldset> :
例
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
试一试» 如果你希望你的一个按钮是"pre-selected" ,使用HTML <input>检查属性:
您也可以将您的形式弹出窗口中:
例
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>
<div
data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
</form>
</div>
试一试»