html5表单和input

发表于 | 分类于
本文字数： 3.4k | 阅读时长 ≈ 3 分钟

本篇博客主要介绍HTML5的属性变化和表单验证。

liuyifei

HTML5属性变化

input新增属性

电子邮件
1
<input type="email" name="email"></input>
URL
1
<input type="url" name="url"></input>
电话号码
1
<input type="tel" name="tel"></input>
数字
1
<input type="number" name="number"></input>
Date Pickers

此input类型包括Date,Month,Week,Time, DateTime(选取时间，日，月，年-使用UTC时间),Date-local(本地时间)

1
2
3
4
<div>
    Date:
    <input type="date" name="date"></input>
</div>

Date:

Range Search Color
1
2
3
4
5
<div>
    <input type="range" name="range" min="1" max="10"></input>
    <input type="search" name="search"></input>
    <input type="color" name="color"></input>
</div>




表单属性

autocomplete属性

自动完成(autocomplete)属性,再次打开网页，网页会记住上次提交的内容。

form或input域应该拥有自动完成功能

< form autocomplete=”on/off”>< /form>

PS:autocomplete适用于< form >标签，以及以下类型的< input >标签：text, search, url, telephone, email, password, datepickers, range, color。

1
2
3
4
5
<form action="https://www.baidu.com" autocomplete="on">
    <input type="text" name="text"></input>
	<input type="text" name="text" autocomplete="off"></input>
    <input type="submit"></input>
</form>




autofocus属性

规定在页面加载时，域自动地获得焦点。

autofocus属性使用与所有的< input>标签的类型。

1
2
3
4
5
<form action="https://www.baidu.com">
    <input type="text" name="text"></input>
    <input type="text" name="text" autofocus="autofocus"></input>/*用法:autofocus=”autofocus“*/
    <input type="submit"></input>
</form>




multiple(ˈməltəpəl)

规定输入域中可选择多个值

PS：multiple属性适用于以下类型的< input>标签：email and file

1
2
3
4
5
6
7
8
<form action="https://www.baidu.com">
    请选择文件
    <input type="file" name="file"></input>
    <input type="email" name="email" multiple="multiple" value="123@qq.com,234@qq.com"></input>/*形成数组发到后台,若无multiple则形成一个字符串发送到后台*/
	<input type="file" name="file" multiple="multiple"></input>
/*用法:multiple="multiple"*/
    <input type="submit"></input>
</form>

只能选择一个文件


只能选择多个文件


placeholder属性

提供一种提示（hint），描述输入域期待的值

适用于< input>标签type属性值为：text, search, telephone, email, password。

1
2
3
4
5
<form action="https://ww.baidu.com">
    <input type="text" name="text"></input>
    <input type="text" name="text" autofocus="autofocus" placeholder="请输入你的银行卡密码"></input>
    <input type="submit"></input>
</form>




required属性

规定必须再提交之前填写输入域（不能为空）

减少前端开发人员写表单验证的压力。

required适用于< form >标签，以及以下类型的< input >标签：text, search, url, telephone, email, password, date pickers, number, checkbox,radio,file。

1
2
3
4
5
<form action="https://www.baidu.com">
    <input type="text" name="text" required="required"></input>
    <input type="email" name="email" required="required"></input>
    <input type="submit"></input>
</form>




链接属性
sizes

sizes用在< link>里面

1
<link rel="icon" href="icon.gif" type="image/gif" sizes="16X16">
target

target用在base里面

1
<base href="http://localhost/" target="_blank">/*控制整个网页的超链接< a >*/
超链接

a:media=””(表示对设备进行优化，handheld对“手持”设备进行支持，tv对“电视”设备进行支持)；

a:hreflang= “zh-CN”（设置语言）

a:rel=“external”（设置超链接的引用，这里超链接为外部链接）。