建站经验技巧HTML5中新增的input表单输入框类型

HTML5中新增的input表单输入框类型

文本输入控件(input)可以让用户在输入框中输入相应的字段,其type属性决定了输入字段的类型,除了传统的输入文字外,在html5中还增加了很多特殊的类型,比如可调取调色器选择颜色,可快速选择日期和时间等,下面简单的总结一下新增的type属性:

1.颜色选择:

<input type="color" name="mytest" />

当type设置为color时,输入控件会显示为一个取色器按钮,点击后弹出取色器,可选取需要的颜色:

颜色输入控件.png

如果用户使用的浏览器不支持该type,则会显示为一个普通的文本输入框(下同)。

2.日期选择:

<input type="date" name="mytest" />

日期输入控件.png

类似这样的日期选择控件,用户可通过上下箭头以及右边的“总箭头”快速选择所需要的日期。该控件在手机上显示的效果可能不同:

日期选择控件.png

3.日期和时间输入:

<input type="datetime-local" name="mytest" />

时间输入控件.png

4.仅输入时间:

<input type="time" name="time" />

时间输入.png

5.仅输入年和星期:

<input type="week" name="week-year" />

年和星期输入控件.png

6.Email地址输入:

<input type="email" name="email" />

Email输入控件专用于输入邮件地址,在电脑上表现和普通文本框相同,但在手机上键盘会自动出现@字符,方便邮件地址的输入:

email输入控件.png

7.URL地址输入:

<input type="url" name="site" />

同样的,该空间在电脑上显示为普通文本框,但在手机上键盘会出现帮助URL输入的字符串:

URL输入控件.png

8.数字号码输入:

<input type="number" name="quantity" min="1" max="5" />

该控件可以通过上下箭头调整所需的数字大小,通过min和max属性可设置最大值和最小值:

数字输入控件.png

9.范围调整:

<input type="range" min="0" max="10" step="2" value="6">

该控件显示为一个可左右拖动的滑块,可调整指定范围内的数值,可通过step等属性设置可调节的精度:

范围调整控件.png

10.输入电话号码:

<input type="tel" name="mytel" />

该控件在手机上出现时,键盘会自动显示九宫格数字以便输入电话号码:

电话号码输入控件.png

11.定义为搜索框:

<input type="search" name="google" />

将输入框定义为搜索框后,在手机上键盘会自动出现“搜索”按钮以便快速搜索内容:

搜索框控件-手机.png

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/website/165.html