回归前端学习第六天——表单学习（标签元素）

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>