当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5表单-form实战解析

HTML5表单-form实战解析

2018年12月28日  | 移动技术网IT编程  | 我要评论
由于目前html5标准仍然在开发中，不同的对html5特性的支持都相当有限。其中chrome、opera在表单方面支持得比较好，本实例在chrome、opera上运行一切正常，建议最高版本，效果图如下：
 
 
 
 
这个表单使用哪些新元素类型及功能？
 
 
type类型
我们熟悉type就是text、password、submit、reset。
这个例子中使用了input的html5所赋予新类型email(邮箱)、range（数值条）、number（数字）、date（日期）、url（网址）
type类型的详细介绍请参考本站：全新改进的html5 表单创建
 
placeholder（输入框占位符）
一个input默认提示文字，我们需要通过事件属性来实现或者简单的js代码，在html5中一切就会变的这么简单，只需要加上placeholder="输入框占位符"，即可实现你想要的效果。
 
datalist（选项列表）
w3c赋予的解释：
<datalist> 标签定义选项列表。请与input 元素配合使用该元素，来定义input 可能的值。
datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。
请使用input 元素的list 属性来绑定datalist。
 
<input id="mycar" list="cars" /> 
<datalist id="cars"> 
  <option value="bmw"> 
  <option value="ford"> 
  <option value="volvo"> 
</datalist> 
不过支持这个属性的只有opera浏览器

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网