form元素
每次要创建HTML表单时,都必须使用此元素将其内容嵌套在其中来启动它。
警告:严禁将一个表单嵌套在另一个表单中。嵌套会导致表单行为无法预测
fieldset和legend元素
<fieldset>
元素是创建一个共享相同的目的,造型和语义目的部件组的便捷方式。许多辅助技术都会使用该<legend>
元素,就像它是相应<fieldset>
元素内每个控件的标签的一部分一样。
<form>
<fieldset>
<legend>吃苹果嘛?</legend>
<p>
<input type="radio" name="size" id="size_1" value="small">
<label for="size_1">小一点</label>
</p>
<p>
<input type="radio" name="size" id="size_2" value="medium">
<label for="size_2">中等的</label>
</p>
<p>
<input type="radio" name="size" id="size_3" value="large">
<label for="size_3">大一点</label>
</p>
</fieldset>
</form>
拥有一组单选按钮时,都应将它们嵌套在一个<fieldset>
元素内。还有其他用例,通常该<fieldset>
元素也可以用于分割表单。
理想情况下,长格式应该分布在多个页面上,但是如果表单变长并且必须在单个页面上,则将不同的相关部分放在不同的字段集中可以提高可用性
<label>
元素
构建方法:
1.通过将其for属性与<input>
属性正确地关联起来
<label for="name">姓名:</label> <input type="text" id="name" name="user_name">
注意:for与id属性必须完全一致
2.将表单控件与标签关联的方法-将表单控件嵌套在中<label>
,以隐式方式将其关联
<label for="name">
姓名: <input type="text" id="name" name="user_name">
</label>
可以点击的复选框标签
<form>
<p>
<input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
<label for="taste_1">吃樱桃</label>
</p>
<p>
<input type="checkbox" id="taste_2" name="taste_banana" value="banana">
<label for="taste_2">吃香蕉</label>
</p>
</form>
对于诸如文本输入之类的控件很有用,可以在其中单击标签以使其聚焦的输入,但是对于单选按钮和复选框则特别有用-这样的控件的命中区域可能很小,因此使其尽可能易于激活.
表单常用的HTML结构
通常的做法是在li、ul或ol列表中用元素包装标签及其小部件。p和div元素也很常用。建议使用列表来构造多个复选框或单选按钮。
除了fieldset元素,这也是常见的做法是使用HTML的标题(例如h1,h2)和切片(如section)来构建复杂的形式,功能的每个单独部分均应包含在单独的section元素中,且fieldset元素应包含单选按钮。
建立一个付款表单吧
<form>
<h1>付款表单</h1>
<p>必填项将标记 <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>个人信息</h2>
<fieldset>
<legend>表头</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="K" >
King
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Q">
Queen
</label>
</li>
<li>
<label for="title_3">
<input type="radio" id="title_3" name="title" value="J">
Joker
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>姓名: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>邮箱: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>密码: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>付款信息</h2>
<p>
<label for="card">
<span>证件类型:</span>
</label>
<select id="card" name="usercard">
<option value="visa">护照</option>
<option value="nh">农行</option>
<option value="idc">身份证</option>
</select>
</p>
<p>
<label for="number">
<span>证件号:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="tel" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>填写日期:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/dd/yyyy</em>
</label>
<input type="date" id="date" name="expiration">
</p>
</section>
<p> <button type="submit">提交</button> </p>
</form>