jQuery Mobile 表单
jQuery Mobile表单
介绍
jQuery Mobile是一个基于jQuery库的移动端框架，其中的表单可让开发者轻松的快速构建出漂亮的移动端App界面。
表单元素
jQuery Mobile框架提供了一些常见的表单元素，如文本域，文本输入框，选择框，隐藏域等等。
下面是表单元素的一些应用示例：
文本输入框
<label for="input-username">Username:</label>
<input type="text" name="username" id="input-username" value="" />
多行文本域
<label for="textarea-message">Message:</label>
<textarea name="message" id="textarea-message"></textarea>
单选框
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<label for="radio-choice-1a">Cats</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" checked="checked">
<label for="radio-choice-2a">Dogs</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2">
<label for="radio-choice-3a">Other</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3">
</fieldset>
多选框
<fieldset data-role="controlgroup">
<legend>Select your favorite:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom"/>
<label for="checkbox-1a">Option One</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom"/>
<label for="checkbox-2a">Option Two</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom"/>
<label for="checkbox-3a">Option Three</label>
</fieldset>
下拉框
<label for="select-choice-1" class="select">Shipping Method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
滑动块
<label for="slider-1">Slider:</label>
<input type="range" name="slider" id="slider-1" value="0" min="0" max="100" />
表单布局
为了让表单看起来整洁美观，jQuery Mobile提供了一些CSS样式和布局类名，可让开发者轻松的构建一个漂亮的表单布局。
下面是一些表单布局应用实例：
横向表单
<form>
<div class="ui-field-contain">
<label for="textinput-1">Username:</label>
<input type="text" name="textinput-1" id="textinput-1" value="" placeholder="Enter your username" />
</div>
<div class="ui-field-contain">
<label for="textinput-2">Password:</label>
<input type="password" name="textinput-2" id="textinput-2" value="" placeholder="Enter your password" />
</div>
<div class="ui-field-contain">
<label for="select-native-1">Gender:</label>
<select name="select-native-1" id="select-native-1">
<option>-Choose a gender-</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<button type="submit" data-theme="b">Submit</button>
</form>
垂直表单
<form>
<div class="ui-field-contain">
<label for="textinput-1">Username:</label>
<input type="text" name="textinput-1" id="textinput-1" value="" placeholder="Enter your username" />
</div>
<div class="ui-field-contain">
<label for="textinput-2">Password:</label>
<input type="password" name="textinput-2" id="textinput-2" value="" placeholder="Enter your password" />
</div>
<div class="ui-field-contain">
<label for="select-native-1">Gender:</label>
<select name="select-native-1" id="select-native-1">
<option>-Choose a gender-</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<button type="submit" data-theme="b">Submit</button>
</form>
表单验证
表单验证可让开发者对表单的合法性进行检查，以保证用户提供的数据有效。
jQuery Mobile提供了一些表单验证工具，如：
必填字段验证
<form>
<div class="ui-field-contain">
<label for="textinput-1">Username:</label>
<input type="text" name="textinput-1" id="textinput-1" value="" placeholder="Enter your username" required />
</div>
<div class="ui-field-contain">
<label for="textinput-2">Password:</label>
<input type="password" name="textinput-2" id="textinput-2" value="" placeholder="Enter your password" required />
</div>
<button type="submit" data-theme="b">Submit</button>
</form>
最小长度验证
<form>
<div class="ui-field-contain">
<label for="textinput-1">Username:</label>
<input type="text" name="textinput-1" id="textinput-1" value="" placeholder="Enter your username" minlength="5" />
</div>
<div class="ui-field-contain">
<label for="textinput-2">Password:</label>
<input type="password" name="textinput-2" id="textinput-2" value="" placeholder="Enter your password" minlength="8" />
</div>
<button type="submit" data-theme="b">Submit</button>
</form>
最大长度验证
<form>
<div class="ui-field-contain">
<label for="textinput-1">Username:</label>
<input type="text" name="textinput-1" id="textinput-1" value="" placeholder="Enter your username" maxlength="10" />
</div>
<div class="ui-field-contain">
<label for="textinput-2">Password:</label>
<input type="password" name="textinput-2" id="textinput-2" value="" placeholder="Enter your password" maxlength="20" />
</div>
<button type="submit" data-theme="b">Submit</button>
</form>
总结
jQuery Mobile框架提供了一些常见的表单元素和布局，可让开发者轻松的构建出漂亮的移动端App界面。同时，它还提供了一些表单验证工具，以保证用户提供的数据有效。