表单元素 form 属性知识整理

表单元素 form 属性知识整理

HTML 表单用于收集用户各种不同类型的输入，是用户与服务器交互的重要媒介。

表单元素

1. <form>: 用于定义 HTML 表单，是其它控件元素的最外层容器。

2. <fieldset>: 表单控件分组容器。

3. <label>: 控件标签名称。

4. <input>: 是最重要的表单元素，根据不同的 type 属性，input 可以定义各种形态。

5. <select>+<option>: select定义下拉列表是容器控件与option组合成下拉列表。

6. <option>: 定义列表待选择的选项。

7. <input>+<datalist>+<option>: 预定义选项列表框。

8. <textarea>: 定义多行输入字段（文本域）。

9. <button>: 定义可点击的按钮。

form 元素

<form></form>元素用来定义 HTML 表单，是其它控件元素的最外层容器。比如：不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<!--form是表单最外部容器，里面可以嵌套其它元素--><form>  <label></label>  <textarea></textarea>  <button></button></form>

form 元素的属性

<!--HTML <form> 元素，已设置所有可能的属性，如下：--><form  action="action_page.php"  method="GET"  name="myForm"  target="_blank"  accept-charset="UTF-8"  ectype="application/x-www-form-urlencoded"  autocomplete="off"  novalidate>  <!--这里放置表单元素--></form>

属性	描述
action	规定向何处提交表单的地址（URL）（提交页面）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET），另一个是 POST。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
target	规定 action 属性中地址的目标（默认：_self）。
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
enctype	规定被提交数据的编码（默认：url-encoded）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
novalidate	规定浏览器不验证表单。

• action属性：定义在提交表单时执行的动作，如上：规定向action_page.php页面提交表单信息，action_page.php是服务器上用于处理表单信息的文件。

如果没设置 action 属性，表单信息会默认提交到当前文档。

• method属性：规定在提交表单时所用的 HTTP 方法（GET 或 POST）

• GET 方法：默认的方法，用于不敏感数据的提交，信息会被显示到浏览器的地址栏上，有信息容量限制，适合少量数据提交。

• POST 方法：用于提交敏感数据（如密码），浏览器的地址栏上信息不可见，无限制信息容量，适合大量数据提交。

• name属性：提交的表单要有对应的名称，服务器上的处理文件接收到表单信息才知道交给哪个程序执行。

• target属性：执行提交动作后，action="action_page.php"显示方式，默认是_self 在当前窗口显示。

• accept-charset属性：设置表单信息的字符集，没有设置就默认是当前文档字符集，也就是<meta charset="UTF-8" />规定的字符集。

• enctype属性：属性规定在将表单数据发送到服务器之前如何对其进行编码，只有 method=”post” 时才使用 enctype 属性。

• ectype="application/x-www-form-urlencoded" ：默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）。

• ectype="multipart/form-data"：不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

• ectype="text/plain"：将空格转换为 “+” 符号，但不编码特殊字符。

• autocomplete属性：规定浏览器应该自动完成表单（默认：开启），前提是用户之前已经有填写过，内容是基于之前输入过的值。

• novalidate属性：规定浏览器不验证表单。如果使用该属性，则提交表单时不进行验证。