码迷,mamicode.com
首页 > Web开发 > 详细

web前端开发技术之浅谈对HTML5 智能表单的理解

时间:2018-11-21 19:34:21      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:tco   val   src   类信息   自动   red   电话号码   pst   size   

Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交。

技术分享图片
 

<FORM id=xinzeng>

</FORM>

<INPUT … form="xinzeng">

type新增属性:

email、URL、date、time、month、week、number、range、color

input元素的新增属性:

Autocomplete:自动完成功能.记录用户之前输入的内容,并在下次输入时自动提示完成输入。

>>> 属性值: on/off

>>> 可以在form表单上使用,对整张表单的所有控件进行自动完成的开关

也可以在input上使用,对特定输入框进行修改。

>>> 绝大部分浏览器,默认开启。

Autofocus:自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。

Form:所属表单。通过form表单的id,确定此input输入哪张表单。

Required:必填.required="required" 设置input必填,否则阻止提交。

Pattern:使用正则表达式验证input的模式.

数字类型

跟数字强相关的类型,其中number、range在移动端开发时,会弹出数字键盘,而range是一个范围滑动块。

<input type=‘number‘> <!--用于比较精确的纯数字输入类型-->

<input type=‘range‘> <!--用于不是很精确的数字范围-->

<input type=‘tel‘> <!--用于电话号码-->

日期和时间类型

web表单常见的字段就是日期和时间,html5以此来收集这类信息

<input type=‘time‘>

<input type=‘date‘>

<input type=‘month‘>

<input type=‘week‘>

<input type=‘datetime‘>

<input type=‘datetime-local‘>

其他类型 :email、url、color、search

其中一些类型在不同的设备上都会有不同的显示。

<input type=‘email‘>

<input type=‘url‘>

<input type=‘color‘>

<input type=‘search‘>

placeholder 占位符文本,以前我们用js来模拟,获得焦点的时候,文本消失,失去焦点并且内容为空时,文本重现,现在html5自带了这一项功能。

html结构:

<input id=‘search‘ type=‘text‘ placeholder=‘search your goods‘>

如果想要修改placeholder中的文本样式,那么我们只要给浏览器设置一些样式即可,css结构:

::-webkit-input-placeholder{

color:red;

font-size:14px;

}

::-moz-placeholder{

color:red;

font-size:14px;

}

autofocus 自动聚焦 ,autofocus属性可以让表单在加载完成时,会有一个表单域被默认聚焦或者选中,但是尽量不要在一个页面上在多个表单域上使用autofocus,在一些低版本浏览器上会默认聚焦最后一个含有autofocus的表单域,在大多数浏览器中会聚焦第一个含有autofocus的表单域,这会造成跨浏览器的混乱。还有我们通常用空格键来滚动页面,如果页面上有autofocus的表单域会阻止这一浏览器的默认行为。

autocomplete 自动完成,很多浏览器默认提供自动完成功能,帮助用户输入上次提交过的内容,autocomplete有两个必备的条件才能够工作,一是一定要有form元素,二个是表单域上必须要有name属性和name属性值。但是,有些时候我们为了保护隐私,需要避免自动完成这项功能,我们开启和关闭这项功能,只需给它赋值on或者off ,如果不赋值,默认就是on,表示功能开启。

web前端开发技术之浅谈对HTML5 智能表单的理解

标签:tco   val   src   类信息   自动   red   电话号码   pst   size   

原文地址:https://www.cnblogs.com/qianfeng123/p/9996755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!