搜索

【HTML 教程】表单标签

web前端开发

共 13068字，需浏览 27分钟

 ·

2020-12-12 10:02

作者 | 阮一峰

表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。

1、

1.1、简介

标签用来定义一个表单，所有表单内容放到这个容器元素之中。
<form>
  
form>
上面代码就是表单的基本形式。
下面是一个比较常见的例子。
<form action="https://example.com/api" method="post">
  <label for="POST-name">用户名：label>
  <input id="POST-name" type="text" name="user">
  <input type="submit" value="提交">
form>
上面代码就是一个表单，一共包含三个控件：一个
其中，文本输入框的name属性是user，表示将向服务器发送一个键名为user的键值对，键值就是这个控件的value属性，等于用户输入的值。
用户在文本输入框里面，输入用户名，比如foobar，然后点击提交按钮，浏览器就会向服务器https://example.com/api发送一个 POST 请求，发送user=foobar这样一段数据。
有以下属性。

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

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

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

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

    内部使用）。

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

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

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

  • target：在哪个窗口展示服务器返回的数据，可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），