HTML表单标签

表单标签的作用：

表单是网页交互的基本工具

借助表单可以实现用户和服务器之间的交互

以<form>开始，以</form>结束。

两个基本组成的部分

用户在页面上可以看见并填写的控件标签和按钮的集合。

用于获取信息并将其转换为可以读取或计算的格式的处理脚本。

form元素的一些属性：

1.action属性，设为用户提交表单时服务器上对数据进行处理的脚本URL。它的作用是提交，具体处理由脚本或程序实现。当action=”#“，表示提交给当前页面。

2.enctype属性定义发送表单数据的编码格式

application/x-www-form-urlencoded，默认值，将表单数据编码为名称/值的形式

multipart/form-data，将表单数据编码为一条消息传送到服务器，表单中每个元素表示消息中的一个部分。表单中有上传控件，必须设置该属性值。

text/plan，将表单数据编码为纯文本格式。发送邮件，必须设置该属性值。

3.method属性定义发送表单数据的http请求方式。

method属性值要么是get，要么是post。默认值为get

使用get，表单提交后，表单中的数据会显示在浏览器的地址栏里。

使用post，表单提交后，表单中的数据不会显示在浏览器的地址栏里，这样更为安全。比起get，使用post可以向服务器发送更多的数据。

如果不确定使用哪一种，就使用post，这样数据就不会暴露在URL中

处理表单

1.表单收集信息，脚本对这些信息进行处理

2.有很多程序设计语言可以用于编写表单处理脚本，例如JSP，PHP。

3.表单验证指的是提交表单时，对输入字段内容进行检查，看看是否符合预期的格式，有的表单元素有内置的验证功能（可以制定form元素的novalidate属性，关闭表单验证功能），有的可以使用JS脚本进行验证，这些都不能完全替代服务端的验证，处于安全的考虑，必须把服务器端的验证加入表单处理脚本。

4.所有表单元素都包含两个基本属性

1.name，定义表单元素的名称，提交表单时，通过name属性名可以访问表单元素的值

2.id，定义表单元素的标识，以便CSS和JS进行控制

3.一般可以为表单元素的name和id属性设置相同的值。

对表单元素进行组织：

如果表单上有很多的信息需要填写，可以使用fieldset元素将相关的表单元素组合在一起。

可以使用legend元素为每一个fieldset提供一个标题，用于描述每个组的目的。也可以使用h1-h6标签。

对于单选按钮，最好还是选用fieldset和legend

对表单元素添加说明标签

标签是描述表单元素用途的文本

使用label元素为表单元素添加说明标签

for属性。如果for属性值与一个表单元素的id值相同，该标签就与该表单元素显示关联起来了，如果用户点击了标签，与之对应的表单元素就会获得焦点。

input元素

很多表单元素都是利用input元素指定的

type属性用于指定控件的类型。例如type=”text“，表示控件是文本框

name属性用于指定控件的名字。b表单实在服务器端进行处理的，控件的name属性值将包含在表单数据中的发送给服务器端处理，服务器端处理脚本将使用name属性值在表单数据中找到具体的控件值

为了进行客户端验证，客户端代码也会引用控件，通常是通过控件的id属性值引用它们

常见的作法实在控件中同时包含name属性和id属性。

输入型表单元素

单行文本框：<input type="text">

value属性用于指定默认初始值。

placeholder用于指定提示信息。提示信息会出现在文本框中，指导用户输入。当用户开始在文本框输入时，提示信息就会消失。如果一个文本框同时具有value和placeholder属性，value值也会显示在文本框中

size属性用于指定文本框显示宽度，以字符为单位。默认宽度是20个字符。

maxlength属性指定允许输入的最大字符数

required属性用于指定文本框内容不能为空

autofocus属性用于指定在页面加载时会自动获取焦点。

readonly属性用于指定文本框内容为只读（不能编辑修改）

disabled属性用于指定在页面加载时禁用文本框

autocomplete属性（on，off）用于指定表单自动完成功能。自动完成功能将输入内容记录下来，再次输入，会将历史记录显示在下拉列表里。

单行密码框：<input type="password">

密码框与文本框的唯一区别，密码框中输入的文本会使用圆点或者星号进行隐藏，但信息在发送过程中没有加密。

隐藏域：：<input type="hidden">

可以认为是不可见的文本框。提交表单时，value属性中的值会传送给服务 器进行处理。不要将密码、信用卡号等信息放在value属性中

文件上传：<input type="file">

rom元素的method属性必须为post，enctype属性必须为multipart/form-data multiple属性用于指定可以一次性选择多个文件上传

提交按钮：<input type="submit">

value属性值指定将要出现在按钮上的文本 输入的信息不发送到服务器，就没什么用。应该总是为表单创建提交按钮

重置按钮：<input type="reset"> value属性值指定将要出现在按钮上的文本 表单还可以有重置按钮，用于将表单还原为填写表单之前的样子

图像提交按钮：<input type="image"> src属性指定图像路径 width和height属性是可选的，指定图像宽度和高度 alt属性值是当图像无法显示时需要出现的文本 普通按钮：<input type="button"> value属性值指定将要出现在按钮上的文本 普通按钮常常配合JavaScript脚本使用

使用button元素可以创建包含包含文本、图像、其他HTML元素的按钮 <button type="submit">…</button> <button type="reset">…</button> <button type="button">…</button> 多行文本框：<textarea>">…</textarea> 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性 当输入内容超过可视区域后，文本区域将出现滚动条，通过CSS控制是否显 示滚动条 wrap属性指定在表单中提交时，文本区域中的文本如何换行 soft，表单提交时，文本不换行。默认值 hard，表单提交时，文本换行（含换行符）。必须规定 cols 属性

选择型表单元素 单选按钮：<input type="radio"> 同一页面中每个单选按钮的id必须是惟一的 同一组单选按钮的name属性值必须相同。单选按钮组同时只能选择一个 value属性值是该单选按钮被选中时要发送给服务器的文本 checked属性让该单选按钮在页面打开时默认处于选中状态。在同一组单选 按钮中，只能对一个按钮设置这一属性 复选按钮：<input type="checkbox"> 同一页面中每个复选框的id必须是惟一的 同一组复选框的name属性值必须相同 value属性值是该复选框被选中时要发送给服务器的文本 checked属性让该复选框在页面打开时默认处于选中状态

选择框 <select> <option>…</option> … </select> 非常适合从一组选项中选取一个或多个选项。通常呈现为下拉菜单样式。 如果允许选择多个选项，选择框就会呈现为一个带滚动条的列表框 选择框由两种HTML元素构成：select和option。通常在select元素里设置 name属性，在option元素里设置value属性 value属性值是选项选中后要发送给服务器的文本 select元素的size属性，设置选择框的高度（以行为单位）

选择型表单元素 select元素的multiple属性，允许用户选择多个选项 option元素的selected属性，指定某选项被选中。默认第一个选项被选中 若选择框有很多选项，可能需要对这些选项进行分组，放入不同的类别 <select> <optgroup> <option>…</option> … </optgroup> ... </select> optgroup元素的label属性指定分组标题

email类型 专门用于输入电子邮件地址的文本框，在提交表单时，会自动验证输入的是 否是有效的电子邮件地址 <input type="email"> url类型 专门用于输入网址（url地址）的文本框，在提交表单时，会自动验证输入的是否是 有效的网址 <input type="url"> number类型 专门用于输入数值的文本框，还可以设定所接受数值的限制，若所输入的数 值不在限定范围之内，则会出现错误提示 max属性设置允许的最大值，min属性设置允许的最小值，step属性设置合法 的数字间隔，若step= "4"，在输入时只能输入4的倍数 <input type="number">

range类型 专门用于输入一定范围内数值的文本框，在网页中显示为滑块，还可以设定 所接受数值的限制，若所输入的数值不在限定范围之内，则会出现错误提示 max属性设置允许的最大值，min属性设置允许的最小值，step属性设置合法 的数字间隔，若step= "4"，在输入时只能输入4的倍数 <input type="range"> search类型 专门用于输入搜索关键词的文本框，即类似谷歌或百度的搜索框 <input type="search"> tel类型 专门用于输入电话号码的文本框，它并不限定只输入数字 <input type="tel">

color类型 专门用于输入颜色的文本框，当颜色文本框获取焦点后，会自动调用系统的 颜色窗口（系统色盘） <input type="color"> 日期类型 <input type="date">，选取年、月、日 <input type="month">，选取年、月 <input type="week">，选取年、周 <input type="time">，选取时间（小时、分钟），支持min、max、step属性 <input type="datetime">，选取年、月、日、时间（UTC） <input type="datetime-local">，选取年、月、日、时间（本地）

pattern属性 用于验证input类型输入框中输入的内容是否与自定义的正则表达式相匹配 适用于input类型的标签：text、password、email、url、tel、search 允许自定义一个正则表达式，用户输入必须符合正则表达式所指定的规则 Pattern属性中的正则表达式语法与JavaScript中的正则表达式语法相匹配 对于email、url，HTML5内置了正则表达式校验 datalist元素 为输入框提供一个可选的列表，可以直接选择列表中某一预设项，如果不希 望从列表中选择某项，也可以输入其他内容 列表由datalist的option元素创建，每个option元素必须设置value属性 如果要把datalist提供的列表绑定到输入框，需要使用输入框的list属性来引用 datalist元素的id