LZ-Says：找到你了，却转了身。。。
表单< form>简述
表单是一种用于从用户收集输入数据的 HTML 机制，可以理解为表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容一个个控件，比如：输入框（input）、文本域（textarea）、单选框（radio-buttons）、复选框（checkboxes）等。
表单使用 < form> 标签来表示。
一般我们会用于提交某些信息，例如，注册页，需要将用户填写的数据内容提交到后台进行处理。
而说到提交，当然有提交方式，在 HTML 中，常用的提交方式也有 Get、Post，是不是很开心呐～
那么，我们如何指定表单提交方式呢？
这里我们先来了解下在表单中，HTML 为我们提供了哪儿些可供我们飞起的属性呢？
- action： 数据提交目标地址；
- method： 指定提交服务器时使用的 HTTP 请求方式，默认为 get；
- enctype： 属性指定浏览器如何编码数据并将其呈现给服务器。此属性有三个允许值。
- application/x-www-form-urlencoded：默认编码，此编码无法用于将文件上传到服务器（如果使用此编码，每个数据项的名称和值都使用用于编码 URL 的相同方案进行编码）；
- multipart/form-data：此编码用于将文件上传到服务器；
- text/plain：此编码因浏览器而异。
- name： 规定表单的名称，类似标志；
- accept-charset： 规定服务器处理表单数据所接受的字符编码；
- novalidate： 对输入中的表单进行验证；
- target： 浏览器的默认行为是用响应服务器替换页面。通过在表单元素上使用 target 属性来更改此行为且此属性的工作方式与 a 元素上的 target 属性相同，并且可以从目标范围中进行选择：
- _blank - 在新窗口（或选项卡）中打开服务器响应；
- _parent - 打开父框架集中的服务器响应；
- _self - 在当前窗口中打开服务器响应（这是默认行为）；
- _top - 在当前窗口中打开服务器响应（这是默认行为）；
- autocomplete： 浏览器自动填写表单，有两个允许值:on（允许）和 off（禁止），默认允许。
而下面，开启我们撸码观花～
撸撸更健康
光说不练假把式，搞起来才是真理。
我们先来看个比较 low 的效果：
那么首先，我们先来创建一个表单：
<body>
<h5>这是 HLQ 第一个表单</h5>
<form>
</form>
</body>
运行之后，发现网页上只有一个标题显示出来了，如下所示：
这里小伙伴别担心，表单是不显示的。
下面依次介绍我们今天的小伙伴，介绍完，小 demo 也就撸的差不多了。
输入框，可谓是出场率百分之 99 的一位红人，语法很简洁：
<input type="类型" />
而类型有多少，请看（当然，这里面还包含了 HTML 5 新增的属性）：
- checkbox： 将输入限制为 true / false 复选框；
- color： 将输入限制为颜色；
- date： 将输入限制为日期；
- datetime： 将输入限制为具有时区的全球日期和时间；
- datetime-local： 将输入限制为不带时区的全局日期和时间；
- email： 将输入限制为格式正确的电子邮件地址；
- month： 将输入限制为年和月；
- number： 将输入限制为整数或浮点数；
- radiobutton： 将输入限制为固定的选项集；
- range： 将输入限制为指定范围；
- tel： 将输入限制为格式正确的电话号码；
- time： 将输入限制为一天中的时间；
- week： 将输入限制为年和周；
- url： 将输入限制为完全限定的 URL。
而这里，LZ 再次说明下其中的细节，之后我们就可以愉快的进行编码咯，当然 LZ 小白一枚，虽然依托于 W3C School，但是个人理解有限，如有错误，请及时告知，但愿学习笔记可以帮助有需要的小伙伴。
以下列表总结了大部分通用属性以及所代表含义：
- autofocus： 自动获取焦点；
- checked： 如果应用，请在最初显示时或表单重置时选中复选框；
- dirname： 控制文本方向性；
- list： 指定为此元素提供值的datalist元素的ID；
- maxlength： 指定用户可以在文本框中输入的最大字符数；
- pattern： 指定正则表达式模式以用于输入验证；
- placeholder： 指定一个提示，告诉用户应该输入的种类；
- readonly： 只读，无法编辑；
- disabled： 禁用，无法编辑；
- required： 指定用户必须输入/选中值以进行输入验证；
- min： 为输入验证目的设置最小值；
- max： 设置用于输入验证目的的最大值；
- size： 指定元素在文本框中可见的字符数中的宽度；
- value： 指定文本框的初始值。
按钮的使用方式如下：
- submit： 指定该按钮将用于提交表单；
- reset： 指定该按钮将用于重置表单；
- button： 指定按钮没有特定的语义意义。
相对的日期这块，估摸着日后开发少不了，还是简单补补：
- datetime： 获取全局日期和时间，包括时区；
例如：2014-07-19T16:42:39.421Z - datetime-local： 获取本地日期和时间（没有时区信息）；
例如：2014-07-19T16:42:39.421 - date： 获取本地日期（没有时间或时区）；
例如:2014-07-20 - month： 获取年份和月份（无日期，时间或时区信息）；
例如:2014-08 - time： 获得时间；
例如:17:42:44.746 - week： 获取当前周。
颜色输入：输入元素的颜色类型限制用户选择颜色。
颜色值正好表示为七个字符：前导＃，后跟三个两位十六进制值，表示红色，绿色和蓝色值（例如，＃FF1234）
<label>
<input type="color"/>
</label>
隐藏输入：要将数据项发送到服务器而不向用户显示，请使用隐藏的输入元素。
<input type="hidden" name="recordID" value="1234" />
图像输入：输入元素的图像类型创建显示图像并在单击时提交表单的按钮，这种类型的输入元素支持以下所示的附加属性。
- alt： 提供元素的文本描述。
- formaction： 对于按钮元素
- formenctype： 对于按钮元素
- formmethod： 对于按钮元素
- formtarget： 对于按钮元素
- formnovalidate： 对于按钮元素
- height： 指定图像的高度（以像素为单位）。
- src： 指定应显示的图像的URL。
- width： 指定图像的宽度（以像素为单位）。
textarea 元素创建一个多行文本框。它有局部属性：name，disabled，form，readonly，maxlength，autofocus，required，placeholder，dirname，rows，wrap，cols。
简述到这里，下面附上源码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>表单 Study</title>
</head>
<body>
<h5>这是 HLQ 第一个表单</h5>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
用户名：<input type="text" name="userName" placeholder="请输入用户名" required/>
密码：<input type="password" name="userPwd" placeholder="请输入密码" autocomplete="off" autofocus/>
<br/><br/>
性别：
<label>
<input type="radio" name="sex" value="men" required/>
男
</label>
<label>
<input type="radio" name="sex" value="women"/>
女
</label>
<label>
出生日期：
<input type="week" name="bir"/>
</label>
<br/><br/>
<label>
联系方式：
<input type="tel" name="tel" placeholder="请输入联系方式"/>
</label>
添加照片
<input type="file" name="headPic"/>
<br/><br/>
<label>
爱不爱我
<select name="select">
<option value="love">爱</option>
<option>Yes</option>
<optgroup label="就不告诉你">
<option value="wakaka">哇咔咔</option>
</optgroup>
</select>
</label>
<br/><br/>
喜欢吃的食物：
<label> <input type="checkbox" name="love" value="banana"> 香蕉</label>
<label> <input type="checkbox" name="love" value="mgg"> 芒果</label>
<label> <input type="checkbox" name="love" value="wahaha"> 哇哈哈</label>
<br/><br/>
<!-- 俩种方式实现按钮 -->
<button>I'm button.</button>
<input type="button" value="Hello"/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
<br/><br/>
<label>
<input type="color"/> <input type="image" src="http://www.yonyou.com/sj/images/lg12.jpg" alt="完犊子"/>
</label>
<textarea rows="15" cols="66" placeholder="请输入内容"></textarea>
</form>
</body>
</html>
今日已毕，再战～！
个人公众号
不定期发布博文，最近有点忙，感谢老铁理解，欢迎关注～
参考资料
- W3C School 教程；
- 菜鸟教程；