HTML表单标签

表单标签

表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。

<form>

<form>标签用来定义一个表单，所有表单内容放到这个容器元素之中。

<form>有以下属性。

• accept-charset：服务器接受的字符编码列表，使用空格分隔，默认与网页编码相同。

• action：服务器接收数据的 URL。

• autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off（不自动填写）和on（自动填写）。

• method：提交数据的 HTTP 方法，可能的值有post（表单数据作为 HTTP 数据体发送），get（表单数据作为 URL 的查询字符串发送），dialog（表单位于<dialog>内部使用）。

• enctype：当method属性等于post时，该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded（默认值），multipart/form-data（文件上传的情况），text/plain。

• name：表单的名称，应该在网页中是唯一的。注意，如果一个控件没有设置name属性，那么这个控件的值就不会作为键值对，向服务器发送。

• novalidate：布尔属性，表单提交时是否取消验证。

• target：在哪个窗口展示服务器返回的数据，可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<iframe>标签的name属性（即表单返回结果展示在<iframe>窗口）。

• enctype属性，指定了采用 POST 方法提交数据时，浏览器给出的数据的 MIME 类型。该属性可以取以下值。

  1. application/x-www-form-urlencoded

     application/x-www-form-urlencoded是默认类型，控件名和控件值都要转义（空格转为+号，非数字和非字母转为%HH的形式，换行转为CRLF），控件名和控件值之间用=分隔。控件按照出现顺序排列，控件之间用&分隔。

  2. multipart/form-data

     multipart/form-data主要用于文件上传。这个类型上传大文件时，会将文件分成多块传送，每一块的 HTTP 头信息都有Content-Disposition属性，值为form-data，以及一个name属性，值为控件名。

下面是上传文件的表单的例子：

<form action="https://example.com/api"
      enctype="multipart/form-data"
      method="post">
  用户名：<input type="text" name="submit-name"><br>
  文件：<input type="file" name="files"><br>
  <input type="submit" value="上传"> <input type="reset" value="清除">
</form>

<fieldset>，<legend>

<fieldset>标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。

<form>
  <fieldset>
    <p>年龄：<input type="text" name="age"></p>
    <p>性别：<input type="text" name="gender"></p>
  </fieldset>
</form>

上面代码中，两个输入框是一组，它们的外面会显示一个方框。

<fieldset>有以下属性。

• disabled：布尔属性，一旦设置会使得<fieldset>内部包含的控件都不可用，都变成灰色状态。
• form：指定控件组所属的<form>，它的值等于<form>的id属性。
• name：该控件组的名称。

<legend>标签用来设置<fieldset>控件组的标题，通常是<fieldset>内部的第一个元素，会嵌入显示在控件组的上边框里面。

<fieldset>
  <legend>学生情况登记</legend>
  <p>年龄：<input type="text" name="age"></p>
  <p>性别：<input type="text" name="gender"></p>
</fieldset>

上面代码中，这个控件组的标题会，嵌入显示在<fieldset>的上边框。

<input>

<input>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。

它有多种类型，取决于type属性的值，默认值是text，表示一个输入框。

<input>
<!-- 等同于 -->
<input type="text">

上面代码会生成一个单行的输入框，用户可以在里面输入文本。

• autofocus：布尔属性，是否在页面加载时自动获得焦点。
• disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。
• form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<form>内部。
• list：关联的<datalist>的id属性，设置该控件相关的数据列表，详见后文。
• name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。
• readonly：布尔属性，是否为只读。
• required：布尔属性，是否为必填。
• value：控件的值。
• type：决定了<input>的形式。该属性可以取以下值。
  • type="text"是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。
  • type="search"是一个用于搜索的文本输入框，基本等同于type="text"。
  • type="button"是没有默认行为的按钮，通常脚本指定click事件的监听函数来使用。
    • 可以使用<button>标签代替，语义更清晰，并且<button>标签内部可以插入图片或其他 HTML 代码。
  • type="submit"是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。
  • type="image"表示将一个图像文件作为提交按钮，行为和用法与type="submit"完全一致。
  • type="reset"是一个重置按钮，用户点击以后，所有表格控件重置为初始值。
  • type="checkbox"是复选框，允许选择或取消选择该选项。
  • type="radio"是单选框，表示一组选择之中，只能选中一项。
  • type="email"是一个只能输入电子邮箱的文本输入框。
  • type="password"是一个密码输入框。
  • type="file"是一个文件选择框，允许用户选择一个或多个文件，常用于文件上传功能。
  • type="hidden"是一个不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。

<label>

<label>标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。

<label>的一大优势是增加了控件的可用性。有些控件比较小（比如单选框），不容易点击，那么点击对应的<label>标签，也能选中该控件。点击<label>，就相当于控件本身的click事件。

<label>的for属性关联相对应的控件，它的值是对应控件的id属性。所以，控件最好设置id属性。

控件也可以放在<label>之中，这时不需要for属性和id属性。

<label>用户名：
  <input type="text" name="user">
</label>

<label>的属性如下。

• for：关联控件的id属性。
• form：关联表单的id属性。设置了该属性后，<label>可以放置在页面的任何位置，否则只能放在<form>内部。

一个控件可以有多个关联的<label>标签。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>