HTML5新增的8类INPUT键入种类详细介绍

日期:2021-02-24 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

早已有的键入种类 HTML编码示例:

拷贝编码
编码以下:

文字域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
往下拉目录 <select><option>
登陆密码域 <input type="password">
递交按钮 <input type="submit">
可点击按钮 <input type="button">
图象按钮 <input type="image">
掩藏域 <input type="hidden">
重设按钮 <input type="reset">
文档域 <input type="file">
   
在HTML5中,提升了好几个新的表单input键入种类,根据应用这些新增元素,能够完成更好的键入操纵和认证。
1、email种类的运用
email种类的input元素是1种专业用于键入E-mail详细地址的文字键入框,在递交表单的情况下,会全自动认证email键入框的值。

拷贝编码
编码以下:

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

2、url种类的运用
url种类的input元素出示用于键入url详细地址这类独特文字的文字框。

拷贝编码
编码以下:

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

3、number种类的运用
number种类的input元素出示用于键入标值的文字框。

拷贝编码
编码以下:

<input type="number" name="number1" min="1" max="20" step="4" />

4、range种类的运用
range种类的input元素出示用于键入包括1定范畴内数据值得文字框,在网页页面中显示信息为翻转条。

拷贝编码
编码以下:

<input type="range" name="range1" min="1" max="30" />

5、时间检出种类的运用
键入种类 HTML编码  作用表明

拷贝编码
编码以下:

date <input type="date">

选择日、月、年
month <input type="month">
选择月、年

拷贝编码
编码以下:

week <input type="week">

选择周和年

拷贝编码
编码以下:

time <input type="time">

选择時间(小时和分钟)

拷贝编码
编码以下:

datetime <input type="datetime">

选择時间、日、月、年(UTC時间)

拷贝编码
编码以下:

datetime-local
<input type="datetime-local"> 选择時间、日、月、年(当地時间)

6、search种类的运用

search种类的input元素出示用于键入检索重要词的文字框。

拷贝编码
编码以下:

<input type="search" name="search1" />
input[type="search"]{
-webkit-appearance:textfield;
}

7、tel种类的运用
tel种类的input元素出示专业用于键入电話号码的文字框。

拷贝编码
编码以下:

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

8、color种类的运用
color种类的input元素出示专业用于设定色调的文字框。

拷贝编码
编码以下:

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

上一篇:HTML5标识应用方式详解 返回下一篇:没有了