![]()
表单元素 form 属性知识整理
HTML 表单用于收集用户各种不同类型的输入，是用户与服务器交互的重要媒介。
![]()
表单元素
<form>: 用于定义 HTML 表单，是其它控件元素的最外层容器。<fieldset>: 表单控件分组容器。<label>: 控件标签名称。<input>: 是最重要的表单元素，根据不同的type属性，input可以定义各种形态。<select>+<option>:select定义下拉列表是容器控件与option组合成下拉列表。<option>: 定义列表待选择的选项。<input>+<datalist>+<option>: 预定义选项列表框。<textarea>: 定义多行输入字段（文本域）。<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属性：规定浏览器不验证表单。如果使用该属性，则提交表单时不进行验证。