🥨 HTML 表单元素
# form 元素
使用 <form> 标签 收集用户输入的数据，定义 HTML 表单元素。
🌰 例子：
<form>
<!-- form elements -->
</form>
2
3
表单元素包含 不同类型的 input 输入元素、 select 复选框元素、 radio 单选按钮、 button 提交按钮等。
# action 属性和 method 属性
action属性定义在提交表单执行时的动作。如果忽略则action为当前页面。method属性规定在提交表单时使用的 HTTP 方法。
🌰 例子：
<html>
<form action="action_page.php" method="GET">
<!-- form elements -->
</form>
</html>
2
3
4
5
# fieldset 元素组合表单数据
<fieldset>标签组合表单中的相关数据的元素；<legend>元素为为<fieldset>元素定义标题；
🌰 例子：
# 更多属性
| 属性 | 描述 |
|---|---|
accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
action | 规定向何处提交表单的地址（URL）（提交页面）。 |
autocomplete | 规定浏览器应该自动完成表单（默认值： on 开启）。 |
enctype | 规定被提交数据的编码（默认： url-encoded ）。 |
method | 规定在提交表单时所用的 HTTP 方法（默认值： GET ）。 |
name | 规定识别表单的名称（对于 DOM 使用： document.forms.name ）。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标（默认值： _self ）。 |
# name 属性
如果表单数据要被正确的提交，每个输入字段都必须要设置 name 属性。
🌰 例子：
<form>
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
2
3
4
5
6
7
8
9
# input 元素
根据不同类型 type 的属性，有不同的形态；是最重要的表单元素。
# 文本输入 text
<input type="text"> 用于文本输入的单行输入字段：
- 注意文本字段的 默认宽度是 20 个字符。
🌰 例子：
# 密码输入 password
🌰 例子：
# 单选按钮 radio
<input type="radio"> 定义单选按钮，允许用户在有限数量的选项中选择其中之一的值。
🌰 例子：
# 复选框 checkbox
<input type="checkbox>" 定义复选框。允许用户在有限数量的选项中选择零个或者多个值。
🌰 例子：
# 普通按钮 button
🌰 例子：
# 数字输入 number
<input type="number"> 用于限制输入的内容为数字字段的输入框。
🌰 例子：
更多的 HTML 5 新增的输入类型：
timeweekdatetimecoloremailtelsearchurl
# 提交按钮 submit
<input type="submit"> 用于定义表单处理程序提交表单的按钮。
- 表单处理程序通常用来处理 输入数据的脚本 的服务器页面；
- 表单处理程序在
form的action属性中指定；
🌰 例子：
# 限制输入类型的属性
disabled：禁用输入字段；max/min：规定输入字段的最大值和最小值；maxlength：规定输入字段的最大字符数；pattern：规定通过其检查输入值的正则表达式；readonly：规定输入字段为只读（无法修改）；requeired：规定输入字段是必须填写的；size：规定输入字段的宽度（以字符个数计）；step：规定输入字段的合法数字间隔；value：规定输入字段的默认值；
🌰 例子 / 只读输入、默认值 value 、禁用字段 disabled ：
🌰 例子 / maxlength 规定字段最大长度：
# 新增输入属性
autocomplete：规定表单或者输入字段是否由 浏览器自动填充。（基于用户之前填写的值自动填写），设为on/off；适用于 表单<form>和 这些<input>类型：text/search/url/tel/email/password/phone/color；placeholder：规定输入字段的预设值提示。适用于文本类的输入类型。pattern：规定输入字段检查<input>元素的值的正则表达式。novalidate：用于<form>元素的属性。设置后，规定提交表单时不对表单数据进行验证。autofocus：设置时，当页面加载时，该输入元素（如<input>）会自动获得焦点。form属性：用于<input>指定所属的一个或者多个表单（使用表单的 id 标识）；如果需要引用一个以上的表达， 使用空格分开表单id。formaction属性：规定当前输入字段的输入action。会覆盖<form>元素设置的action属性。适用于type="submit"或者type="image"；formenctype属性：规定当前表单数据提交至服务器时，如何对其编码（仅针对post方法提交表单时），会覆盖<form>元素的enctype元素。适用于type="submit"或者type="image"；formmethod/formnovalid/formtarget同与上两同理。覆盖<form>元素设置的对应属性；height/width：设置<input>元素高度和宽度。仅适用于<input type="image">类型的输入类型。list：引用<datalist>元素中包含的<input>元素的预定义选项；muitple：如果设置，允许用户在<input>中输入一个以上的值；适用于email/file的<input>输入类型。
🌰 例子 / pattern ：
🌰 例子 / list ：
🌰 例子 / mutiple 上传多个文件：
Select images: <input type="file" name="img" multiple>
# <select> 下拉列表元素
定义下拉列表元素。
- 使用
selected属性定义预定义选项。通常为第一个选项。
🌰 例子：
# <textarea> 元素
定义多行输入字段（文字域）。
🌰 例子：
# <button> 元素
定义可点击的按钮。
🌰 例子：