HTML5新的Input类型
email 用于提交应该填写e-mail的输入框
E-mail:<input type="email" name="email">
提交表单时会自动验证输入的是否满足email格式。
url专门输入url的输入框
URL:<input type="url" name="url">
number应包含数值的输入框
number: <input type="number" name="number" min="1" max="10" />
它拥有四个属性
max:最大值
min:最小值
step:数字间隔
value:初始值
range包含一定范围内的数字
range: <input type="range" name="range" min="1" max="10" />
它也拥有四个属性,和number一样
Date Pickers
拥有多个可供选择的日期和时间类型
date:选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
<input type="date">
<input type="week">
search
用于搜索域,比如站点搜索或者GOOGLE搜索。
search:<input type="search" name="search">
另外还有一个color,不过目前支持的浏览器太少。
新的表单元素
datalist元素
规定输入域的选项列表。
把datalist绑定到输入域,使用输入域的list属性已用datalist的ID:
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>
如果不写前面的输入域则看不到任何下拉,他们一般都是配合使用的。
output
定义不同的输出
属性
for : 定义输出域相关的一个或多个元素
form : 定义输入字段所属的一个或多个表单
name : 就是name
看个栗子
<form action="" oninput="num.value = parseInt(num1.value) + parseInt(num2.value)">
<input type="number" name="num1"> +
<input type="number" name="num2"> =
<output name="num" for="num1 num2"></output>
</form>
num1 和 num2 分别输入不同的数值,然后通过 form表单的 oninput事件将值赋给num
outout的for 是表明和它相关的两个元素 num1和num2
keygen
目前浏览器对该元素的支持度太低,所以你们懂的。
HTML5表单新属性
autocomplete:规定form或者input是否拥有自动完成功能。
理解一下:其实这个功能就是你在输入填完一个值提交表单后,下此在操作此输出框时会不会自动提示之前你输入过的内容
还不理解,看图
就是 红色框中的东西。
两个值:true 和 false
只使用input的新属性
autofoucus:页面加载时,输入域自动地获得焦点。(同一个表单给多个input加autofocus只会第一个显示)
form
规定输入域所属的一个或多个表单。(默认属于当天form)
可以将input卸载form标签之外,通过form属性在指向相应的form表单。
form override attributes(重写表单属性)
formaction:重写标点的action
formenctype
formmethod
formnovalidate
formtarget
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
上面代码在点击不同按钮是,修改了form不同的属性。
height和width
<input type="text" width="100px" height="100px">
list
list 是和 datalist连用的,因为单用datalist并没有任何效果,datalist必须要和一个输入框一起使用,list是连接他们的
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
min、max、step
不解释了
multiple
<input type="file" multiple>
这样可以同时提交多个文件。
输入域中可以学着多个值
适合file,select 等 可以选择多个值。
pattern
理解为input域的验证规则
<input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
placeholder
输入框的默认提示
非常常用不解释了
required
当前输入框不能为空。
Name: <input type="text" name="usr_name" required="required" />