HTML5官方文档学习笔记（三）----HTML表单指南

112 阅读 0 评论 74 点赞

我是靠谱客的博主干净睫毛膏，这篇文章主要介绍HTML5官方文档学习笔记（三）----HTML表单指南，现在分享给大家，希望可以做个参考。

HTML4中已有的表单控件这里我就不再重复介绍了，这里大致总结一下HTML5中表单元素新增的部分

`<fieldset>` 和 `<legend>` 元素

<fieldset>元素是一种方便的用于创建具有相同目的的小部件组的方式，出于样式和语义目的。你可以在<fieldset>开口标签后加上一个 <legend>元素来给<fieldset> 标上标签。 <legend>的文本内容正式地描述了<fieldset>里所含有部件的用途。

许多辅助技术将使用<legend> 元素，就好像它是相应的 <fieldset> 元素里每个部件的标签的一部分。例如，在说出每个小部件的标签之前，像Jaws或NVDA这样的屏幕阅读器会朗读出legend的内容。
这里给出MDN上的一个例子：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</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>

多个标签

严格地说，您可以在一个小部件上放置多个标签，但是这不是一个好主意，因为一些辅助技术可能难以处理它们。在多个标签的情况下，您应该将一个小部件和它的标签嵌套在一个元素中。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>

<!--这样写：-->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>

<!--但是这样写会更好：-->
<div>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>

<!--但最好的可能是这样：-->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input id="username" type="text" name="username">
</div>

HTML 缩写元素（<abbr>）用于展示缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。

用于表单的通用HTML结构

复制代码

<section>
        <h2>Contact information</h2>
        <fieldset>
            <legend>Title</legend>
            <ul>
                <li>
                <label for="title_1">
                    <input type="radio" id="title_1" name="title" value="M." >
                    Mister
                </label>
                </li>
                <li>
                <label for="title_2">
                    <input type="radio" id="title_2" name="title" value="Ms.">
                    Miss
                </label>
                </li>
            </ul>
        </fieldset>
        <p>
            <label for="name">
            <span>Name: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label for="mail">
            <span>E-mail: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="email" id="mail" name="usermail">
        </p>
        <p>
            <label for="pwd">
            <span>Password: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="password" id="pwd" name="password">
        </p>
    </section>
    <section>
        <h2>Payment information</h2>
        <p>
            <label for="card">
            <span>Card type:</span>
            </label>
            <select id="card" name="usercard">
            <option value="visa">Visa</option>
            <option value="mc">Mastercard</option>
            <option value="amex">American Express</option>
            </select>
        </p>
        <p>
            <label for="number">
            <span>Card number:</span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="number" id="number" name="cardnumber">
        </p>
        <p>
            <label for="date">
            <span>Expiration date:</span>
            <strong><abbr title="required">*</abbr></strong>
            <em>formatted as mm/yy</em>
            </label>
            <input type="date" id="date" name="expiration">
        </p>
    </section>
    <p> <button type="submit">Validate the payment</button> </p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
	<section>
        <h2>Contact information</h2>
        <fieldset>
            <legend>Title</legend>
            <ul>
                <li>
                <label for="title_1">
                    <input type="radio" id="title_1" name="title" value="M." >
                    Mister
                </label>
                </li>
                <li>
                <label for="title_2">
                    <input type="radio" id="title_2" name="title" value="Ms.">
                    Miss
                </label>
                </li>
            </ul>
        </fieldset>
        <p>
            <label for="name">
            <span>Name: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label for="mail">
            <span>E-mail: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="email" id="mail" name="usermail">
        </p>
        <p>
            <label for="pwd">
            <span>Password: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="password" id="pwd" name="password">
        </p>
    </section>
    <section>
        <h2>Payment information</h2>
        <p>
            <label for="card">
            <span>Card type:</span>
            </label>
            <select id="card" name="usercard">
            <option value="visa">Visa</option>
            <option value="mc">Mastercard</option>
            <option value="amex">American Express</option>
            </select>
        </p>
        <p>
            <label for="number">
            <span>Card number:</span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="number" id="number" name="cardnumber">
        </p>
        <p>
            <label for="date">
            <span>Expiration date:</span>
            <strong><abbr title="required">*</abbr></strong>
            <em>formatted as mm/yy</em>
            </label>
            <input type="date" id="date" name="expiration">
        </p>
    </section>
    <p> <button type="submit">Validate the payment</button> </p>