使表单结构化

引言

在学习过第一个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，不要担心，你将在以后的博客中认识它们。目前你在项目中复习我们已经学过的知识，并且思考为什么要使用它们。

写出一对<form> 元素
```
<form>
    ...
</form>
```
在<form> 元素对内，添加付款表单的标题和指示段落
```
<h1>付款</h1>
<p>*为必填</p>
```

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

联系方式

称呼

电子邮箱，密码

<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>

接下来添加付款信息

<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>

最后，添加一个提交按钮

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

最终效果如下：

最终效果

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

美化后

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