【无标题】
<form>
form>
accept-charset：服务器接受的字符编码列表，使用空格分隔，默认与网页编码相同。
action：服务器接收数据的 URL。
autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off和on。
method：提交数据的 HTTP 方法，可能的值有post，get，dialog。
multipart/form-data（文件上传的情况），text/plain。
name：表单的名称，应该在网页中是唯一的。注意，如果一个控件没有设置name属性，那么这个控件的值就不会作为键值对，向服务器发送。
novalidate：布尔属性，表单提交时是否取消验证。
target：在哪个窗口展示服务器返回的数据，可能的值有_sel，_blank，_parent，_top，标签的name属性。
enctype 属性
表单的enctype属性，指定了采用 POST 方法提交数据时，浏览器给出的数据的 MIME 类型。该属性可以取以下值。
（1）application/x-www-form-urlencoded
application/x-www-form-urlencoded是默认类型，控件名和控件值都要转义，控件名和控件值之间用=分隔。控件按照出现顺序排列，控件之间用&分隔。
（2）multipart/form-data
multipart/form-data主要用于文件上传。这个类型上传大文件时，会将文件分成多块传送，每一块的 HTTP 头信息都有Content-Disposition属性，值为form-data，以及一个name属性，值为控件名。
标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。
<form>
<fieldset>
<p>年龄：<input type="text" name="age">p>
<p>性别：<input type="text" name="gender">p>
fieldset>
form>
上面代码中，两个输入框是一组，它们的外面会显示一个方框。
有以下属性。
disabled：布尔属性，一旦设置会使得内部包含的控件都不可用，都变成灰色状态。form：指定控件组所属的，它的值等于的id属性。name：该控件组的名称。
标签用来设置控件组的标题，通常是内部的第一个元素，会嵌入显示在控件组的上边框里面。
<fieldset>
<legend>学生情况登记legend>
<p>年龄：<input type="text" name="age">p>
<p>性别：<input type="text" name="gender">p>
fieldset>
标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。
的一大优势是增加了控件的可用性。有些控件比较小（比如单选框），不容易点击，那么点击对应的标签，也能选中该控件。点击，就相当于控件本身的click事件。
的for属性关联相对应的控件，它的值是对应控件的id属性。所以，控件最好设置id属性。
控件也可以放在之中，这时不需要for属性和id属性。
的属性如下。
for：关联控件的id属性。
form：关联表单的id属性。设置了该属性后，可以放置在页面的任何位置，否则只能放在内部。
一个控件可以有多个关联的标签。
简介
标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。
它有多种类型，取决于type属性的值，默认值是text，表示一个输入框。
<input>
<input type="text">
上面代码会生成一个单行的输入框，用户可以在里面输入文本。
的属性非常多，有些属性是某个类型专用的，放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。
autofocus：布尔属性，是否在页面加载时自动获得焦点。disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在内部。list：关联的的id属性，设置该控件相关的数据列表，详见后文。name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。readonly：布尔属性，是否为只读。required：布尔属性，是否为必填。type：控件类型，详见下文。value：控件的值。
类型
type属性决定了的形式。该属性可以取以下值。
（1）text
type="text"是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
text输入框有以下配套属性。
maxlength：可以输入的最大字符数，值为一个非负整数。minlength：可以输入的最小字符数，值为一个非负整数，且必须小于maxlength。pattern：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成pattern="[a-z]{4,8}"。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单。placeholder：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失。readonly：布尔属性，表示该输入框是只读的，用户只能看，不能输入。size：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。spellcheck：是否对用户输入启用拼写检查，可能的值为true或false。
（2）search
type="search"是一个用于搜索的文本输入框，基本等同于type="text"。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。
（3）button
type="button"是没有默认行为的按钮，通常脚本指定click事件的监听函数来使用。
<input type="button" value="点击">
建议尽量不使用这个类型，而使用标签代替，一则语义更清晰，二则标签内部可以插入图片或其他 HTML 代码。
（4）submit
type="submit"是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。
<input type="submit" value="提交">
如果不指定value属性，浏览器会在提交按钮上显示默认的文字，通常是Submit。
该类型有以下配套属性，用来覆盖标签的相应设置。
formaction：提交表单数据的服务器 URL。formenctype：表单数据的编码类型。formmethod：提交表单使用的 HTTP 方法（get或post）。formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。formtarget：收到服务器返回的数据后，在哪一个窗口显示。
（5）image
type="image"表示将一个图像文件作为提交按钮，行为和用法与type="submit"完全一致。
<input type="image" alt="登陆" src="login-button.png">
上面代码中，图像文件是一个可以点击的按钮，点击后会提交数据到服务器。
（6）reset
type="reset"是一个重置按钮，用户点击以后，所有表格控件重置为初始值。
<input type="reset" value="重置">
如果不设置value属性，浏览器会在按钮上面加上默认文字，通常是Reset。
（7）checkbox
type="checkbox"是复选框，允许选择或取消选择该选项。
<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意label>
上面代码会在文字前面，显示一个可以点击的选择框，点击可以选中，再次点击可以取消。上面代码中，checked属性表示默认选中。
value属性的默认值是on。也就是说，如果没有设置value属性，以上例来说，选中复选框时，会提交agreement=on。如果没有选中，提交时不会有该项。
多个相关的复选框，可以放在里面。
<fieldset>
<legend>你的兴趣legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">编码label>
div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音乐label>
div>
fieldset>
上面代码中，如果用户同时选中两个复选框，提交的时候就会有两个name属性，比如interest=coding&interest=music。
（8）radio
type="radio"是单选框，表示一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。
<fieldset>
<legend>性别legend>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男label>
div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女label>
div>
fieldset>
上面代码中，性别只能在两个选项之中，选择一项。
（9）email
type="email"是一个只能输入电子邮箱的文本输入框。表单提交之前，浏览器会自动验证是否符合电子邮箱的格式，如果不符合就会显示提示，无法提交到服务器。
<input type="email" pattern="[email protected]" size="30" required>
上面代码会生成一个必填的文本框，只能输入后缀为foobar.com的邮箱地址。
该类型有一个multiple的布尔属性，一旦设置，就表示该输入框可以输入多个逗号分隔的电子邮箱。
<input id="emailAddress" type="email" multiple required>
（10）password
type="password"是一个密码输入框。用户的输入会被遮挡，字符通常显示星号（*）或点（·）。
<input type="password" id="pass" name="password"
minlength="8" required>
浏览器对该类型输入框的显示，会有所差异。一种常见的处理方法是，用户每输入一个字符，先在输入框里面显示一秒钟，然后再遮挡该字符。
如果用户输入内容包含换行符（U+000A）和回车符（U+000D），浏览器会自动将这两个字符过滤掉。
该类型的配套属性如下。
maxlength：可以输入的最大字符数。minlength：可以输入的最少字符数。pattern：输入必须匹配的正则表达式。placeholder：输入为空时的显示文本。readonly：布尔属性，该输入框是否只读。size：一个非负整数，表示输入框的显示长度为多少个字符。autocomplete：是否允许自动填充，可能的值有on（允许自动填充）、off（不允许自动填充）、current-password（填入当前网站保存的密码）、new-password（自动生成一个随机密码）。inputmode：允许用户输入的数据类型，可能的值有none（不使用系统输入法）、text（标准文本输入）、decimal（数字，包含小数）、numeric（数字0-9）等。
（11）file
type="file"是一个文件选择框，允许用户选择一个或多个文件，常用于文件上传功能。
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
（12）hidden
type="hidden"是一个不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交。
<input id="prodId" name="prodId" type="hidden" value="xm234jq">
（13）number
type="number"是一个数字输入框，只能输入数字。浏览器通常会在输入框的最右侧，显示一个可以点击的上下箭头，点击向上箭头，数字会递增，点击向下箭头，数字会递减。
<input type="number" id="tentacles" name="tentacles"
min="10" max="100">
（14）range
type="range"是一个滑块，用户拖动滑块，选择给定范围之中的一个数值。因为拖动产生的值是不精确的，如果需要精确数值，不建议使用这个控件。常见的例子是调节音量。
<input type="range" id="start" name="volume"
min="0" max="11">
上面代码会产生一个最小值为0、最大值为11的滑块区域。用户拖动滑块，选择想要的音量。
（15）url
type="url"是一个只能输入网址的文本框。提交表单之前，浏览器会自动检查网址格式是否正确，如果不正确，就会无法提交。
<input type="url" name="url" id="url"
placeholder="https://example.com"
pattern="https://.*" size="30"
required>
上面代码的pattern属性指定输入的网址只能使用 HTTPS 协议。
注意，该类型规定，不带有协议的网址是无效的，比如foo.com是无效的，http://foo.com是有效的。
该类型的配套属性如下。
maxlength：允许的最大字符数。minlength：允许的最少字符串。pattern：输入内容必须匹配的正则表达式。placeholder：输入为空时显示的示例文本。readonly：布尔属性，表示该控件的内容是否只读。size：一个非负整数，表示该输入框显示宽度为多少个字符。spellcheck：是否启动拼写检查，可能的值为true（启用）和false（不启用）。
该类型与标签搭配使用，可以形成下拉列表供用户选择。随着用户不断键入，会缩小显示范围，只显示匹配的备选项。
上面代码中，的label属性表示文本标签，显示在备选下拉框的右侧，网址显示在左侧。
（16）tel
type="tel"是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同，因此浏览器没有默认的验证模式，大多数时候需要自定义验证。
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890small>
（17）color
type="color"是一个选择颜色的控件，它的值一律都是#rrggbb格式。
<input type="color" id="background" name="background"
value="#e66465">
（18）date
type="date"是一个只能输入日期的输入框，用户可以输入年月日，但是不能输入时分秒。输入格式是YYYY-MM-DD。
<input type="date" id="start" name="start"
value="2018-07-22"
min="2018-01-01" max="2018-12-31">
上面代码会显示一个输入框，默认日期是2018年7月22日。用户点击以后，会日期选择器，供用户选择新的日期。
该类型有以下配套属性。
max：可以允许的最晚日期，格式为yyyy-MM-dd。min：可以允许的最早日期，格式为yyyy-MM-dd。step：步长值，一个数字，以天为单位。
（19）time
type="time"是一个只能输入时间的输入框，可以输入时分秒，不能输入年月日。日期格式是24小时制的hh:mm，如果包括秒数，格式则是hh:mm:ss。日期选择器的形式则随浏览器不同而不同。
<input type="time" id="appt" name="appt"
min="9:00" max="18:00" required>
<small>营业时间上午9点到下午6点small>
该类型有以下配套属性。
max：允许的最晚时间。min：允许的最早时间。readonly：布尔属性，表示用户是否不可以编辑时间。step：步长值，单位为秒。