HTML5新增的input属性你知道多少？
1、必要（Required）属性
表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：
required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<input type=”text” name=”someInput” required>
或者，更严谨：
<input type=”text” name=”someInput” required=”required”>
上面两行代码都行得通。用了这行代码之后，并且浏览器支持required属性的话， 输入空白的表单就不会被提交。下面是一个简单的例子，同时我们也添加了占位符属性和不加引号特性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="">
<label for= someInput> Your Name: </label>
<input type= text id= someInput name= someInput placeholder= "Douglas Quaid" required>
<button type= submit >Go</button>
</form>
</body>
</html>
可以看到，当不输入内容那个就点击提交按钮时，会提示请填写此字段
2、自动对焦（Autofocus）属性
同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被"选择"或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="text" id="text" placeholder="zidongjujiao" required="required" autofocus="autofocus" />
</body>
</html>
如图所示，页面初始状态就已经聚焦了，一直在闪动
3、pattern 属性
pattern 属性规定用于验证 input 域的模式（pattern）。
注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
text: <input type="text" name="country_code" pattern="[A-z]{3}" title="只能输入3个字母的文本域" />
<input type="submit" />
</form>
</body>
</html>
如图输多输少或者输入的不是字母，都会提示，只有输入3个字母时才能提交（因为我的正则表达式就要求只能由3个字母）
想了解正则表达式的请坐飞机看博主的另一篇文章
正则表达式
4、multiple 属性
multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>当您浏览文件时，请试着选择多个文件。</p>
</body>
</html>
如图所示，加上这个属性后，可以选择多个文件，不加的时候一次只能选择一个
5、min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）。
注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
Points: <input type="number" name="points" min="0" max="10" step="2"/>
<input type="submit" />
</form>
</body>
</html>
如图所示，当你输入的不是0、2、4、6、8、10的时候或者输入的超过10或小于0会有提示，你也可以直接点击向上和向下剪男头进行选择数字
6、 占位符（placeholder属性）
此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="email" name="email" id="email" placeholder="[email protected]" />
<input type="email" name="email" id="email" value="[email protected]" />
</body>
</html>
最初的页面
当输入内容时，似乎一样
当删除内容之后
可以看到效果，删除之后，有placeholder属性的依旧有默认的字符，而另外一个的初始value则消失了。
7、电子邮件输入
如果我们应用"电子邮件"类型来指定输入的形式，我们可以命令浏览器只允许符合有效电子邮件地址结构的字符串输入。虽然说内置的表单验证很快就会到来，但是我们也不能完全依靠这个。比较旧的浏览器不理解这种"电子邮件"类型，它们只会简单地返回到普通的文本框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
<br>
<label for="email">Email:</label>
<input id="email" name="email" type="text" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
看效果，同样为input，email类型会自动验证邮箱格式填写是否正确
虽然你可以使用这种形式的验证，不过不要过分依赖它。
8、list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
</body>
</html>
如图所示，这种方式可以代替select下拉框
9、height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释：height 和 width 属性只适用于 image 类型的 <input> 标签。
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
User name: <input type="text" name="user_name" /><br />
<input type="image" src="/i/eg_submit.jpg" width="99" height="99" />
</form>
</body>
</html>
