- 表单表示文档中的一个区域,此区域包含交互控件,用于搜集不同类型的用户输入,用于向 Web 服务器提交信息。
属性 |
说明 |
||||||||||
name |
表单的名称。HTML 4 中不推荐(应使用 id)。在 HTML 5 中,该值必须是所有表单中独一无二的,而且不能是空字符串。 |
||||||||||
rel |
根据 value 创建一个超链接或根据值创建超链接或注释 |
||||||||||
action |
处理表单提交的 URL。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。 |
||||||||||
enctype |
当 method 属性值为 post 时,enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有:
|
||||||||||
method |
浏览器使用这种 HTTP 方式来提交 表单。可能的值有:
|
||||||||||
accept-charset |
一个空格分隔或逗号分隔的列表,此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 "UNKNOWN"。此字符串指的是,和包含此表单元素的文档相同的编码。 在之前版本的 HTML 中,不同的字符编码可以用空格或逗号分隔。在 HTML5 中,只有空格可以允许作为分隔符。 |
||||||||||
autocapitalize |
这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中,输入/编辑一些文本值时,此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的表单后代控件被指定的话,那么此单独的设定会覆盖原来表单范围内的 autocapitalize 设定。默认值为 sentences。可以选择的值如下:
|
||||||||||
target |
表示在提交表单之后,在哪里显示响应信息。在 HTML 4 中,这是一个 frame 的名字/关键字对。在 HTML5 里,这是一个浏览上下文 的名字/关键字(如标签页、窗口或 iframe)。下述关键字有特别含义:
|
||||||||||
novalidate |
此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性(因此表单需要通过验证)。该属性可以被表单中的 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formnovalidate 属性覆盖。 |
- <form> 中有以下标签:
子标签 |
说明 |
<label> |
标签表示用户界面中某个元素的说明 |
<input> |
元素根据不同的 type 属性,可以变化为多种形态。 |
<select> |
定义下拉列表 |
<textarea> |
定义多行输入字段,即文本域名 |
<button> |
定义可点击的按钮 |
<datalist> |
规定预定义选项列表 |
<keygen> |
用于表单的密钥对生成器字段 |
<output> |
表示计算或用户操作的结果 |
示例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <form action="" method="get" class="form-example"> <div class="form-example"> <label for="name">Enter your name: </label> <input type="text" name="name" id="name" required> </div> <div class="form-example"> <label for="email">Enter your email: </label> <input type="email" name="email" id="email" required> </div> <div class="form-example"> <input type="submit" value="Subscribe!"> </div> </form> </body>
</html>
浏览器运行结果如下: |
来自 <https://interactive-examples.mdn.mozilla.net/pages/tabbed/form.html>