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

谁借莪１个温暖的怀抱￠ 2023-05-29 06:27 11阅读 0赞

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

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

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

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

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

## 多个标签 ##

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

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