表单 ‹form›

Exisi 2020-06-05 14:05:10
Categories: Tags:

 

属性

说明

name

表单的名称。HTML 4 中不推荐(应使用 id)。在 HTML 5 中,该值必须是所有表单中独一无二的,而且不能是空字符串。

rel

根据 value 创建一个超链接或根据值创建超链接或注释

action

处理表单提交的 URL。这个值可被 <button><input type="submit"> <input type="image"> 元素上的 formaction 属性覆盖。

enctype

method 属性值为 post 时,enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有:

参数

描述

application/x-www-form-urlencoded

未指定属性时的默认值。

multipart/form-data

当表单包含 type=file 的 <input> 元素时使用此值。

text/plain

出现于 HTML5,用于调试。这个值可被 <button><input type="submit"> 或 <input type="image"> 元素上的 formenctype 属性覆盖。

 

method

浏览器使用这种 HTTP 方式来提交 表单。可能的值有:

参数

描述

post

指的是 HTTP POST 方法;表单数据会包含在表单体内然后发送给服务器。

get

指的是 HTTP GET 方法;表单数据会附加在 action 属性的 URL 中,并以 '?' 作为分隔符,没有副作用 时使用这个方法。

dialog

如果表单在 <dialog> 元素中,提交时关闭对话框。此值可以被 <button><input type="submit"> 或 <input type="image"> 元素中的 formmethod 属性覆盖。

 

accept-charset

一个空格分隔或逗号分隔的列表,此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 "UNKNOWN"。此字符串指的是,和包含此表单元素的文档相同的编码。 在之前版本的 HTML 中,不同的字符编码可以用空格或逗号分隔。在 HTML5 中,只有空格可以允许作为分隔符。

autocapitalize

这是一个被 iOS Safari 使用的非标准属性。当用户在一些表单的文本后代控件中,输入/编辑一些文本值时,此属性控制了这些文本值的首字母是否大写或者使用其他的大写样式。如果 autocapitalize 属性在某个单独的表单后代控件被指定的话,那么此单独的设定会覆盖原来表单范围内的 autocapitalize 设定。默认值为 sentences。可以选择的值如下:

参数

描述

none

完全禁用自动首字母大写。

sentence

自动对每句话首字母大写。

word

自动对每个单词首字母大写。

characters

自动大写所有的字母。

 

target

表示在提交表单之后,在哪里显示响应信息。在 HTML 4 中,这是一个 frame 的名字/关键字对。在 HTML5 里,这是一个浏览上下文 的名字/关键字(如标签页、窗口或 iframe)。下述关键字有特别含义:

参数

描述

_self

默认值。在相同浏览上下文中加载。

_blank

在新的未命名的浏览上下文中加载。

_parent

在当前上下文的父级浏览上下文中加载,如果没有父级,则与 _self 表现一致。

_top

在最顶级的浏览上下文中(即当前上下文的一个没有父级的祖先浏览上下文),如果没有父级,则与 _self 表现一致。此值可以被 <button>、 <input type="submit"> 或 <input type="image"> 元素中的 formtarget 属性覆盖

 

novalidate

此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性(因此表单需要通过验证)。该属性可以被表单中的 <button><input type="submit"> <input type="image"> 元素中的 formnovalidate 属性覆盖。

 

 

子标签

说明

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