HTML5新增的表单元素和属性实例解析

2020-04-22 07:41:37易采站长站整理

示例:<input type=”text” placeholder=”我添加了 list 属性 和 datalist 元素,可没多少人懂我” list=”myDataList”>
<datalist id=”myDataList”>
<option label=”1″>我是datalist1</option>
<option label=”2″>我是datalist2</option>
<option label=”3″>我是datalist3</option>
<option label=”4″>我是datalist4</option>
</datalist>
</pre>
</section>
<section>
<pre> search 类型文本框:
主要用来搜索关键词的文本框
该文本框和普通文本框唯一区别,在 Safari 和 Chrome 浏览器下,文本框的外观为圆角
示例:<input type=”search” placeholder=”我是search 类型文本框”>
</pre>
</section>
<section>
<pre> email 类型文本框:
是一个可以指定电子邮件内容的文本框,通常用在输入E-mail地址的输入文本框上
这种文本框和普通文本框在外观上几乎一样,但实际上在Safari移动版浏览器下是有区别的
其键盘会根据文本框类型不同而显示相对应的键盘
示例:<input type=”email” placeholder=”我是 email 类型文本框”>
</pre>
</section>
<section>
<pre> number 类型文本框:
是一种用于输入数字的文本框类型
它可以配合 min、max、及step属性使用
示例:<input type=”number” value=”0″ min=”0″ max=”10″ step=”1″>
</pre>
</section>
<section>
<pre> range 类型文本框:
是一种数值范围输入文本框类型,提供的是一种滑动输入方式
需要配合 min、max、range等属性的使用
示例:<input type=”range” value=”1″ min=”0″ max=”100″ step=”1″>
</pre>
</section>
<section>
<pre> tel 类型文本框:
是一种供用户输入电话号码的文本框类型
这种文本框在移动版浏览器下,其键盘会根据文本框类型不同而显示相对应的键盘
示例:<input type=”tel” placeholder=”我是 tel 类型文本框”>
</pre>
</section>
<section>
<pre> url 类型文本框:
是一种供用户输入Url地址的文本框类型
这种文本框在移动版浏览器下,其键盘会根据文本框类型不同而显示相对应的键盘
示例:<input type=”url” placeholder=”我是 url 类型文本框”>
</pre>
</section>
<section>
<pre> 在HTML5规范中,除了新增表单元素外,还有日期、时间类型的 input元素