jQuery Mobile 表单基础学习笔记
表单(form)的基本结构
在 HTML 中，表单是使用 <form> 元素来定义的。在 jQuery Mobile 中，为了更好地适配移动设备，表单可以使用以下基本结构：
htmlCopy Code<form>
<div data-role="fieldcontain">
<label for="input-1">Input 1:</label>
<input type="text" name="input-1" id="input-1" value="" />
</div>
<div data-role="fieldcontain">
<label for="input-2">Input 2:</label>
<input type="text" name="input-2" id="input-2" value="" />
</div>
<div data-role="fieldcontain">
<label for="input-3">Input 3:</label>
<<input type="password" name="input-3" id="input-3" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Select list:</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>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Checkboxes:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Checkbox 2</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Radio buttons:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1">
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">Choice 2</label>
</fieldset>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<button type="reset" data-theme="c">Reset</button>
</div>
<div class="ui-block-b">
<button type="submit" data-theme="b">Submit</button>
</div>
</div>
</form>
表单控件的样式
在 jQuery Mobile 中，表单控件是经过重新设计的，以适配不同的移动设备。下面列出了一些常见表单控件的样式：
- 普通文本输入框：
<input type="text"> - 密码输入框：
<input type="password"> - 多行文本框：
<textarea> - 下拉列表框：
<select> - 复选框：
<input type="checkbox"> - 单选按钮：
<input type="radio"> - 日期选择器：
<input type="date">
控件组(fieldset)
在 jQuery Mobile 中，可以将相关表单控件包含在一个 fieldset 元素中。这样做不仅有利于美化表单，而且也有助于提高用户体验。
htmlCopy Code<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
<input type="radio" name="sex" id="man" value="man">
<label for="man">男性</label>
<input type="radio" name="sex" id="woman" value="woman">
<label for="woman">女性</label>
</fieldset>
实例
以下示例演示了如何在 jQuery Mobile 中创建一个简单的表单：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 表单基础学习笔记</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>表单</h1>
</div>
<div data-role="main" class="ui-content">
<form>
<div data-role="fieldcontain">
<label for="input-1">姓名:</label>
<input type="text" name="name" id="input-1" value="" />
</div>
<div data-role="fieldcontain">
<label for="input-2">电话:</label>
<input type="tel" name="tel" id="input-2" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">备注:</label>
<textarea name="notes" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<button type="submit" data-theme="b">提交</button>
</div>
</form>
</div>
<div data-role="footer">
<h4>版权所有 © 2023</h4>
</div>
</div>
</body>
</html>
以上代码将生成一个包含文本框、电话框、多行文本框和提交按钮的简单表单。