欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5新增的表单位素和属性实例理会

发布时间:2016-12-05  编辑:杨雨个人博客网站   点击:   

本文以实例代码演示声名白HTML5新增的表单位素和属性,演示代码中包括了placeholder属性、autofocus 属性、list 和 datalist 元素、search 范例文本框、email 范例文本框、number 范例文本框、range 范例文本框、tel 范例文本框、url 范例文本框以及尚有日期、时刻范例的 input元素等等。
示例代码如下:



代码如下:<!DOCTYPE Html>
<meta charset="utf-8">
<title>HTML5 移动Web开拓指南</title>
<style type="text/Css">
h1, h2, h3, h4, h5, h6
{
text-align: center;
}

input
{
width: 450px;
}

input[type="range"]
{
-webkit-appearance: none !important;
-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset,
0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset,
0 0px 1px rgba(0, 0, 0, 0.6) inset;
margin-top: 2px;
background-color: #272728;
border-radius: 15px;
width: 400px;
}

/*-webkit-slider-thumb:配置上面滑块的样式*/
input[type="range"]::-webkit-slider-thumb
{
-webkit-appearance: none !important;
cursor: default;
top: 1px;
height: 9px;
width: 20px;
background: none repeat scroll 0 0 #777;
border-radius: 15px;
-webkit-box-shadow: 0 -1px 1px black inset;
}
</style>


<header>
<section>
<h1>
HTML5 移动Web开拓指南</h1>
</section>
</header>
<fieldset>
<legend>HTML5 新元素--表单位素</legend>

<section>
<pre> placeholder 属性:
一样平常用在文本框上
其首要浸染是当文本框处于未输入状态而且内容为空时给文本框的提醒内容
结果:
当文本框获取核心时,提醒信息自动清空,失去核心且未输入内容时,提醒信息又自动呈现
省去传统的文本框必要借助 onfocel 和 onblur 变乱才气实现的结果
(兼容大部门的PC赏识器和Mobile赏识器,只能说科技确实前进了)
示例:<input type="text" placeholder="我是 placeholder,是用来起提醒浸染">
</pre>
</section>
<section>
<pre> autofocus 属性:
指定控件自动获取核心,必要留意的是一个HTML页面上只能有一个控件具有改属性
示例:<input type="text" autofocus="true" placeholder="我配置了 autofocus自动获取核心属性">
</pre>
</section>
<section>
<pre> list 和 datalist 元素:
list 元素的首要浸染是提醒文本框输入,提醒的数据源则由 datalist 提供
今朝 list 和 datalist 元素只有 Opera 赏识器支持,乃至没有任何一款移动赏识器支持该特征
示例:<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元素
但这些范例都没有获得普及的支持
详细如下:
日期和时刻(含时区):
<input type="datetime">
日期和时刻(不含时区):
<input type="datetime-local">
时刻选择器文本框:
<input type="time">
日期选择器文本框:
<input type="date">
年的周号选择器文本框:
<input type="week">
月份选择器文本框:
<input type="month">
</pre>
</section>
</article>
</fieldset>
<footer>
<section>
<h5>
HTML5 新元素--表单位素
</h5>
</section>
</footer>

</Html>

本文地址:http://itbyc.com/web/html5/14799.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1