使表单结构化

引言

在学习过第一个HTML表单后，我们将详细讲述构成一个表单的不同部分。
HTML表单的灵活性使它成为HTML文档中最复杂的结构之一。你可以使用专用的(dedicated)表单元素和属性构建任意一种基本的表单。正确的结构保证了表单的易用性和易连接性(accessibility)

<form> 元素

<form> 元素正式地定义了表单的属性和行为。许多辅助技术和浏览器插件也可以发现<form> 元素，提供许多易于使用的特殊方法。

表单的嵌套是不允许的，如果发生嵌套，表单的行为将是未定义的。

在表单外使用widgets是允许的，但这些widgets因为没有和任何表单相关联，你需要使用javascript自定义它们的行为。

<fieldset>和 <legend> 元素

<fieldset(自定义)> 元素用于包裹具有相同样式和语义的一组widgets。<legend> 元素放置于与<fieldset> 元素紧邻的正下方，用于描述<fieldset> 元素的用意。
下面是一个例子：

<form>
    <fieldset>
        <legend>Fruit juice size</legend>
        <p>
            <input type = "radio" name = "size" id = "size_1" value = "small">
            <label for = "size_1">samll</label>
        </p>
        <p>
            <input type = "radio" name = "size" id = "size_2" value = "medium">
            <label for = "size_2">medium</label>
        </p>
        <p>
            <input type = "radio" name = "size" id = "size_3" value = "large">
            <label for = "size_3">large</label>
        </p>
    </fieldset>
</form>

目前为止我们可以知道 <fieldset> 元素的两种基本的使用场景

• 包裹radio buttons
• 将form表单分块(section)

<label> 元素

<label> 元素正式地定义了一个HTML表单中widgets的标签。

<label for = "name">姓名</label>
<input type = "text" id = "name" name = "user_name">

widgets也可以内嵌进<label>

<label for = "name">
姓名：<input type = "text" id = "name" name = "user_name">
</label>

Label 标签是可以点击的

在checkbox与radio button中，使用label可以增加点击范围。
点击label等同于点击checkbox或radio button

多个标签

<p>Required fields are followed by <abbr title="required">*</abbr>.</p>

<!-- So this: -->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>

<!-- would be better done like this: -->
<div>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>

<!-- But this is probably best: -->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input id="username" type="text" name="username">
</div>

自己动手写一个表单

我们现在来搭建一个付款表单。也许这个表单中有你不熟悉的widgets，不要担心，你将在以后的博客中认识它们。目前你在项目中复习我们已经学过的知识，并且思考为什么要使用它们。

1. 写出一对<form> 元素

   <form>
       ...
   </form>
   

2. 在<form> 元素对内，添加付款表单的标题和指示段落

   <h1>付款</h1>
   <p>*为必填</p>
   

3. 接下来我们将添加付款人信息

   • 联系方式
   • 称呼
   • 电子邮箱，密码

   <section>
       <h2>联系方式</h2>
       <fieldset>
           <legend>标题</legend>
           <ul>
               <li>
                   <label for = "title_1">
                       <input type = "radio" id = "title_1" name = "title" value = "0">
                       先生
                   </label>
               </li>
               <li>
                   <label for = "title_2">
                       <input type = "radio" id = "title_2" name = "title" value = "1">
                       女士
                   </label>
               </li>
           </ul>
       </fieldset>
       <p>
           <label for = "name"> 
               姓名:
               <input type = "text" name = "usr_name" id = "name">
           </label>
       </p>
       <p>
           <label for = "mail"> 
               E-mail:
               <input type = "email" name = "usr_mail" id = "mail">
           </label>
       </p>
       <p>
           <label for = "pwd"> 
               密码:
               <input type = "password" name = "usr_pwd" id = "pwd">
           </label>
       </p>
   </section>
   

4. 接下来添加付款信息

   <section>
       <h2>付款信息</h2>
       <p>
           <label for = "card">
               信用卡信息：
           </label>
           <select id = "card" name = "usr_card">
               <option value = "0">工行</option>
               <option value = "1">商行</option>
               <option value = "2">农行</option>
           </select>
       </p>
       <p>
           <label for = "number">
               信用卡号：
               <input type = "text" id = "number" name = "card_number">
           </label>
       </p>
       
   </section>
   

5. 最后，添加一个提交按钮

   <p><button type = "submit">提交</button></p>
   
   

最终效果如下：

最终效果

这样会比较丑，下载这个css，效果如下

美化后

</br></br></br>
学习自：mozilla mdn