本章分为两部分，先介绍不同的input类型，再介绍相关的input属性。
<input type="text">可定义一个单行的输入框：
<form> 姓名:<br> <input type="text" name="name"><br> 门派:<br> <input type="text" name="gang"> </form>
<input type="password">可以定义一个密码输入框，在密码输入框的字符则不会明文显示，常用在注册登录以及支付页面。
<form> 姓名:<br> <input type="text" name="name"><br> 密码:<br> <input type="password" name="passwd"> </form>
<input type="submit">可定义一个button按钮来提交表单数据；一般来说是被提交到指向某个服务器的页面地址。而提交去哪儿则是由最外面的<form>的action属性所决定：
<form action="/action_page"> 姓名:<br> <input type="text" name="name"><br> 门派:<br> <input type="text" name="gang"><br><br> <input type="submit"> </form>
如果想定义该按钮的文字内容，对该submit类型的input元素的value属性进行设置即可。
<form action="/action_page"> 姓名:<br> <input type="text" name="name"><br> 门派:<br> <input type="text" name="gang"><br><br> <input type="submit" value="朕要提交表单啦~"> </form>
<input type="reset">定义的是重置按钮，该按钮的功能是把表单内所有表单元素的值重置为默认值。
<form action="/action_page"> 姓名:<br> <input type="text" name="name"><br> 门派:<br> <input type="text" name="gang" value="天地会"><br><br> <input type="submit"> <input type="reset"> </form>
<input type="radio">可定义单选按钮。相同name属性的input元素（特指单选按钮）中，只能选中其中1个。
<form> 性别:<br> <input type="radio" name="gender" value="male" checked>男<br> <input type="radio" name="gender" value="female">女<br> <br> 门派:<br> <input type="radio" name="gang" value="huashan">华山派<br> <input type="radio" name="gang" value="riyue">日月神教<br> <input type="radio" name="gang" value="yihe" checked>义和团 </form>
<input type="checkbox">可定义复选框。
所谓的复选框，即用户可以勾选0个或者多个乃至全部的选项。
<form> 请选择想要剿灭门派：<br> <input type="checkbox" name="gang1" value="yihe">义和团<br> <input type="checkbox" name="gang2" value="jinyi">东厂锦衣卫<br> <input type="checkbox" name="gang3" value="xuesheng">学生会<br> </form>
<input type="button">可定义一个按钮。
<input type="button" onclick="alert('——_——|||')" value="来点我啊!">
HTML5添加了一些新的Input种类（即新的Input type）：
新的type类型在一些比较老的浏览器中是不兼容的，不兼容的情况下则会等价于type取值text，因此更推荐使用chrome浏览器来学习下文的知识点。
<input type="color">可用来定义出一个选择颜色的表单控件。选择颜色的控件形式则由浏览器种类来决定。
<form action="/action_page"> Don't客Air，选One个Color呗： <input type="color" name="color_name"> <input type="submit" value="朕选好颜色了，提交吧，钦此"> </form>
<input type="date">可用来定义出一个包含日历表的输入框。而日历形式则由浏览器种类来决定的。
<form action="/action_page"> 主子，请选择登基大典的日期: <input type="date" name="day"> <input type="submit" value="朕选好日子了，提交吧，钦此"> </form>
另外，可以通过设置min和max属性来限制日期的区间：
<form action="/action_page"> 主子，请选择登基大典的日期: <input type="date" name="day" min="2018-08-08" max="2086-08-06"> <input type="submit" value="朕选好日子了，提交吧，钦此"> </form>
<input type="email">定义一个专门用于输入email地址的单行输入框，在提交表单前，浏览器会对提交的email地址进行验证。
<form action="/action_page"> 主子，您的email邮箱地址是啥呢？<br> <input type="email" name="email"> <input type="submit" value="朕输入好了，提交吧，钦此"> </form>
<input type="file">定义的控件是用来选择你上传的电脑本地文件。（具体如何上传文件到服务器上，后面会慢慢学到。）
<form action="/action_page"> 选择一个要上传的文件：<br> <input type="file" name="myFile"> <input type="submit" value="提交表单"> </form>
<input type="month">定义的是一个用来选择你年份和月份的输入框。
<form action="/action_page"> 主子，您打算几月份逼宫篡位呢？<br> <input type="month" name="month"> <input type="submit" value="就这个年月了，提交吧~"> </form>
<input type="number">定义的是只能输入数字的文本输入框。（当然，为了达到同样的效果，你也可以利用input restrictions来设置只接受数字输入）
如下所示的例子里，通过设置min和max属性，则只接受999到3000的整数输入。
<form action="/action_page"> 主子，您打算立多少妃子呢？<br> <input type="number" name="count_of_wives" min="999" max="3000"> <input type="submit" value="就这个数，不能再少了，提交吧~"> </form>
<input type="range">定义的是滑块控件，通过滑动而确定整数值的大小，一般来说取值范围是指定的整数区间，默认为0-100，可通过min和max进行设置。
<form action="/action_page"> 主子，您打算立多少妃子呢？<br> <input type="range" name="count_of_wives" min="999" max="3000"> <input type="submit" value="就这个数，不能再少了，提交吧~"> </form>
<input type="search">是用来特指该文本输入框是用来输入搜索词的；输入的文本会被浏览器记录下来，下次使用时浏览器会自动下拉提示用户经常输入的词汇，以达到方便快捷的意义。但是，从用户体验的角度，也是有很多用户更在乎隐私，因此，并不是每个搜索框都应该去用search类型的input。
<form action="/action_page"> <input type="search" name="q"> <input type="submit" value="搜索"> </form>
<input type="tel">定义的文本输入框会自动验证输入的是否包括一个合规的手机号码。H5中Input的新类型本身的兼容性并没有那么高，而Tel类型的Input的兼容性极其低，只在Safari8中可以用。
<form action="/action_page"> <input type="tel" name="mob"> <input type="submit" value="提交朕的手机号码"> </form>
<input type="time">定义的是一个可以让用户输入时间的控件，具体的显示形式根据浏览器种类而不同，例如：
<form action="/action_page"> 请陛下择良辰迎娶砖妃入宫：<br> <input type="time" name="timestamp"> <input type="submit" value="就这个良辰吉时啦，朕要提交啦！"> </form>
<input type="week">定义的控件可以让用户选择周和年。
<form action="/action_page"> 主子，您要第几周闭关呢？<br> <input type="week" name="week_year"> <input type="submit" value="朕姑且就定这一周了，提交去吧！"> </form>
接下来开始介绍一些相关的input属性。
input元素的value属性就是该输入框的值，通过提前设定value属性，即可设置默认值。上例子：
姓名：<input type="text" name="name" value="东方不败"><br> 门派：<input type="text" name="gang" value="日月神教"><br>
input元素的readonly属性决定了该文本输入框是只读状态，即不能修改。
姓名：<input type="text" name="name" value="东方不败" readonly><br> 门派：<input type="text" name="gang" value="日月神教" readonly><br>
input元素的disabled属性可以使该input元素出于disabled这种被锁定的状态；这种状态下，该input元素是不可用、不可点击、不可变，以及其value不会被当作表单数据发送。
<form action="/action_page"> 姓名：<input type="text" name="name" value="jerk"><br> 门派：<input type="text" name="gang" value="菜刀会" disabled><br> <input type="submit"> </form>
input元素的size属性是用来定义文本输入框的尺寸（宽度），默认单位为px（像素）：
<form action="/action_page"> 姓名：<input type="text" name="name" size="30"><br> 门派：<input type="text" name="gang" size="20px"><br> <input type="submit"> </form>
input元素的maxlength属性用来定义文本输入栏的最大可输入字符数量（在这里，1个汉字算1个字符）。不过并不建议采用此属性来限制长度，建议采用JS或者服务器端程序进行验证。
<form action="/action_page"> 姓名：<input type="text" name="name" maxlength="7"> <input type="submit"> </form>
HTML5为表单元素新加了很多新的属性；H5里关于<input>的属性有：
关于<form>的新属性有：
<form>元素和<input>元素的autocomplete属性决定其是否可以接受浏览器的自动填充行为。（有些浏览器是有自动填充的功能。）如果取值为on，则意味着接受；如果取值为off，则意味着拒绝。
<form action="/action_page"> 姓名：<input type="text" name="name"><br> 门派：<input type="text" name="gang" autocomplete="off"><br> <input type="submit"> </form>
从用户体验的角度来说，并不是所有场合开启自动填充功能都是好事，相反，以一家之见来看，大部分场景下应该尽量关闭自动填充功能。
之前说过一些input元素的新属性，通过设置type类型，使之达到在提交表单前进行自动验证。比如设置type属性为email时，在提交表单时会对input输入框的值进行验证。tel、number等类型的input也是如此。针对这些会自动验证的input元素，如果希望它们在提交表单的时候不去验证就直接提交。那很简单，直接将最外面的<form>元素添加上novalidate属性即可。
如下例所示，输入一个不合法的email字符串，则依然可以提交：
<form action="/action_page" novalidate> 主子，您的email邮箱地址是啥呢？<br> <input type="email" name="email"> <input type="submit" value="朕输入好了，提交吧，钦此"> </form>
如果对某个input元素添加了autofocus属性，则页面加载的时候，该input元素则会被自动处于选中状态。
<input type="text" autofocus>
Input元素的form属性可用来定义该input元素属于哪一个表单，即使该input在<form>标签外，只要定义了form属性，就是等于定了卖身契给这个绑定的表单；将form属性设置成预绑定表单的id即可。
<form action="/action_page" id="super_evil_form"> 姓名：<input type="text" name="name"><br> <input type="submit"> </form> 门派：<input type="text" name="gang" form="super_evil_form">
通常来说，表单被提交到哪里去，是由<form>的action属性决定；但是如果在submit类型的input按钮元素上设置formaction属性，如果点击这样的提交按钮，则form表单的数据提交地址则会以submit类型的input按钮的formaction属性为准。即formaction属性的优先级别比外部<form>的action属性的优先级别更高。
<form action="/wrong_page"> 姓名：<input type="text" name="name"><br> 门派：<input type="text" name="gang"><br> <input type="submit" formaction="/action_page"> </form>
与formaction属性类似的还有：formenctype、formmethod、formnovalidate、formtarget等属性，都是在submit类型的input按钮元素处复写（overwrite）掉原本在form元素设置好的属性值。这这里就不一一举例了。
最常用、最司空见惯的属性来咯，就是width与height属性，分别定义元素的高度与宽度。比如，<input type="image">定义的是一个图片作为submit按钮。（另外可以注意：提交的表单里会出现x和y两个名字的数据，代表着点击图片的像素坐标位置）
<input type="image" src="https://logo.zhuanfou.com/zhuanfou-logo.png" width="98" height="37">
这是以前说过的，将input元素添加list属性设置成某个<datalist>元素的id值；则datalist中的选项则会成为input元素的预加载下拉选项。
帮派：<input list="gangs" name="gang"> <datalist id="gangs"> <option value="华山派"> <option value="日月神教"> <option value="义和团"> <option value="天地会"> <option value="学生会"> </datalist>
Input元素的min和max属性分别可以定义该input元素取值的下限和上限。
一般来说适合设置min和max属性的input类型有：number，range，date，datetime-local，month，time和week。
<br>输入一个早于1949-10-01的日期: <input type="date" name="day" max="1949-10-01"> <br>输入一个迟于2088-08-08的日期: <input type="date" name="day" min="2088-08-08"> <br>你的英语几级啦？ (取值0-8): <input type="number" name="english_level" min="0" max="8">
对于file类型的input，如果想一次性选择不只一个文件该怎么办呢？加上multiple属性就搞定了，多选文件就ok啦~
<input type="file" name="files" multiple>
Input元素的pattern属性可以设置成一个正则表达式（regular expressions）从而达到在提交表单前，正则表达式对input的值进行验证的目的。
为了更好地提示用户该如何合法输入，可以对此input元素添加title属性，title属性可以设置成一段描述性的文字，一般来说，验证不合法的情况下，则会触发title内容的显现。
<form action="/action_page">
测试：<input type="text" name="test" pattern="[A-Za-z]{3}"
title="请输入3个字母"><br>
<input type="submit">
</form>
Input元素的placeholder属性可为该input文本输入框定义一个描述性背景，当输入后，input背景的描述性文字就会消失，说起来，比较费解，上例子吧：
<input type="text" name="fuck" placeholder="fuck中庸之道">
Input元素的required属性是用来进行非空验证的；即表单提交前，该input输入栏必须要输入内容，否则表单不会被提交。
<form action="/action_page"> 姓名：<input type="text" name="name" required><br> 门派：<input type="text" name="gang"><br> <input type="submit"> </form>
对于number等类型的input元素，如果设置了step属性为某个数字，即会验证输入的数字是否可以被step值（步长）所整除，如果不可以则是不合规输入。
比如，step="4"的情况下，-4，0，4，8，12，16等这类能被4整除的数字都是合法数字。
<form action="/action_page"> 请输入一个是<b>闰年</b>的数字并提交表单： <!-- number类型的input输入框 --> <input type="number" name="year" step="4"> <input type="submit"> </form>