html5表单新属性,html5新增的表单属性

html添加了哪些表单元素和属性

html5 新增了的表单元素和属性如下:

庄浪网站建设公司成都创新互联,庄浪网站设计制作,有大型网站制作公司丰富经验。已为庄浪数千家提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱,请找那个售后服务好的庄浪做网站的公司定做!

属性:

1、 form属性

在HTML5中表单元素可放在表单之外,通过给该元素添加form属性即可。

2、 formaction属性

HTML5给提交按钮(如button、submit、image等)增加了formaction属性,以便提交到不同的服务器地址

3、formmethod属性

既然对提交按钮有了formaction属性,就相应的有了formmethod属性

4、 placeholder属性

给文本框(text或textarea)处于未输入状态时的一种文字提示

5、autofocus属性

自动获得焦点,一个页面只能有一个控件具有该属性

6、 list属性

HTML5为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id,增加该属性后的单行文本框类似选择框(select),但允许用户自定义输入,为了避免没有支持该蒜素的浏览器出现错误,我们通常使用CSS设置不显示

6、autocomplete属性

自动完成允许浏览器预测对字段的输入,在HTML5之前自动完成不能自定义设置,任何人都可以看到,所以存在安全隐患,在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种,不指定时使用浏览器的默认值,这取决于各浏览器的决定。

元素:

HTML5大幅度地增加和改良了input元素的种类

search 与text文本框类似,用于搜索;

tel 与text文本框类似,用于电话;

url 与text文本框类似,用于url格式的地址;

email 与text文本框类似,用于email格式的地址;

number 与text文本框类似,用于数值;

range 只允许输入一段范围内的数值,通过min和max属性来设置范围;

color 颜色文本框,“#000000”格式的文字;

file 文件选择文本框,HTML5中通过multiple属性可以多选;

datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框;

output 定义不同类型的输出;

表单验证

自动验证

所谓自动验证,就是通过为元素添加相应的属性来达到验证的要求

1、 required属性

具有该属性的元素,如果其内容为空则不允许提交,并给出相应的提示

2、pattern属性

具有该属性的元素,如果内容不为空则把内容与pattern的值进行正则匹配,匹配不成功则不通过并提示

3、min属性和max属性

它们是值类型和日期类型的input元素专用属性,限制了输入的范围

4、 step属性

控制元素的值增加或减少的步幅,如输入11-100之间的数字,且步幅是5,那么只能输入11、16、21....

显示验证

除了给元素添加属性来自动验证外,在HTML5中,form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法,调用该方法可以进行手动验证,checkValidity方法以boolean的形式返回验证结果。

取消验证

取消表单验证有两个属性:用于form的novalidate和用于submit的formnovalidate:

自定义错误

在HTML5中没经过验证的表单浏览器会有默认的提示,但也提供了通过JavaScript的来设置自定义错误提示信息

增强的页面元素

1、figure元素

figure是个组合元素,可以带标题figcaption,一个figure只允许放置一个figcaption

2、details元素

details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法

3 、mark元素

mark元素表示页面需要突出显示或高亮显示的部分,经典的是搜索结果

4、progress元素

可以给progress设置value和max属性,value表示已经进行的,max表示总数,value和max只能为有效的浮点数,value必须大于0小于等于max。如果不给progress设置这两个属性,则是动态显示正在进行,进度不确定。

5、 meter元素

定义度量衡

6、改良的ol列表

在HTML5中为ol元素添加了start属性和reversed属性

7、改良的dl列表

dl是专门用来定义术语的列表,在HTML5中为dt增加了名字dfn

8、 另外还有cite用于表示作者,small用于标识“小型文本”等

html5新属性

1)email:邮件输入域,在表达提交时提供的邮箱格式验证,并弹出一个提示窗口。

2)url:地址输入域,在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口。

3)number:数字输入域,(可设置min、max、step)。

4)tel:电话号码输入域,在手机浏览器弹出数字输入域。

5)search:搜索输入域,在手机浏览器右下角呈现搜索按键。

6)range:范围选择空件。

7)color:颜色选择控件。

8)date/month/week:时间选择控件。

1)autocomplete: autocomplete属性规定输入的字段是否应该启用自动完成功能。

自动完成功能允许浏览器预测 字段输入,当用户在字段开始键入时,浏览器基于键入的值。应该显示出在字段中填写的选项。

2)placeholder:占位符,用于在输入框中显示提示性文字,与value不同,不能被提交。

3)autofoaus:自动获取输入焦点。

4)multiple:是否允许多个输入值,若声明该属性,那么输入框允许输入多个用逗号隔开的值。

5)form:值为某个表单的id,若设置,则该输入域可放在该表单外面。

6)required:在表单提交时会验证是否有输入,没有则弹出提示信息。

7)maxlength:限制最大长度,只有在有输入的情况下才有用,不区分中英文。

minlength:限制最小长度,但它不是H5标准属性,仅部分浏览器支持。

8)min:限定输入数字的最小值。

9)max:限定输入数字的最大值。

10)step:限定输入数字的步长,与min连用。

11)pattern:指定一个正则表达式,对输入进行验证。(正则默认首尾加^$)

作用:getCurrentPosition() 方法来获得用户的位置。

格式:一般在js中书写方式。

案例:

HTML5 新增加了哪些表单元素

首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何一个地方,然后给该元素增加一个form属性,form属性的值为form表单的id,如下:

[html] view plain copy

form method="get" id="test"

input type="text" name="name"/  

input type="password" name="password"/

input type="submit" value="提交"

/form

input type="text" name="confirm" form="test"

在form元素里面的表单元素可以不用添加form属性,如果你想利用form获取所有表单元素的值,那么在form元素外面的表单元素就必须添加form属性,input、select、textarea等元素都满足该功能。

接下来开始介绍html5新增的表单元素,所有例子均用谷歌浏览器展示。

新增表单元素

email:提交表单的时候验证输入值是否满足email的格式

input type="email" name="email"/

url:提交表单的时候验证输入值是否满足url的格式

input type="url" name="url"/

number:根据你的设置提供选择数字的功能,其中min为最小值,max为最大值,value为默认值,step为点击箭头时数字的变化量,max、min、step、value均可不写,目前某些浏览器还不支持。

input type="number" name="number" min=2 max=100 step=5 value="15"/

range:会以一个滑块的形式表现包含一定范围内数字值的输入域,max为最大值,min为最小值,value为默认值,如果没有设置max和min,默认值是1-100

input type="range" name="range" min=20 max=200 value="60"/

日期和时间类型:

date:选取日、月、年

input type="date" name="date"/

month:选取月、年

input type="month" name="month"/

week:选取周、年

input type="week" name="week"/

time:选取小时、分钟

input type="time" name="time"/

datetime:选取时间、日、月、年(UTC时间)(我这里浏览器显示不出效果)

input type="datetime" name="datetime"/

datetime-local:选取时间、日、月、年(本地时间)

input type="datetime-local" name="datetime-local"/

search:用于搜索域,若加上result="s"属性,则会在搜索框前面加一个搜索图标(我这里浏览器显示不出效果)

input type="search" name="search" result="s"/

tel:验证输入的是否是电话号码的格式(我这里浏览器显示不出效果)

input type="tel" name="tel" /

color:color类型会提供颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中

input type="color" name="color"/

新增input属性(部分容易理解的就不进行代码演示了),后面为支持该属性的元素

autofocus:在打开页面时使元素自动获取焦点                                             //input,button,select,textarea

placeholder: 在用户输入时进行提示                                                                // input,textarea

form:这篇文章的开头就有这个属性,它用于表明元素属于哪个表单,无论元素的位置在哪里,所属表单都能获取该元素的值                              //input,output,button,select,textarea,fieldset

required:表明该元素是必填项,当提交表单的时候会自动验证该元素的内容是否不为空          //input,textarea

max/min/step:限制值的输入范围,以及值的变化程度。上面的新增number元素有介绍。        //input

autocomplete:使form元素或者input元素拥有自动完成功能,既记录用户之前输入的值,关闭为off,默认为on。                            //form,input

表单重写属性:                      //input

formaction:重写表单的action属性  

formenctype:重写表单的enctype属性。

enctype属性管理的是表单的MIME编码,MIME就是一种电子邮件传输的互联网标准,表明传递的信息类型和编码,共有三个值可选:

1,application/x-www-form-urlencoded(默认),设置表单传输的编码。

2,multipart/form-data,指定传输数据的特殊类型,主要就是上传的非文本内容,比如文件、图片。

3,text/plain,纯文本传输。

formmethod: 重写表单的method属性

formnovalidate:重写表单的novalidate属性

formtarget:重写表单的target属性。

比如:

[html] view plain copy

form action="test.html" method="get" autocomplete="on"

姓名: input type="text" name="name" /br /

密码: input type="password" name="pwd" /br /

input type="submit" formnovalidate="true" value="提交未经验证"/

/form

multiple:规定输入字段可选择多个值                    //input,select

list:list属性的值为datalist元素的id,datalist元素类似于选择框,在文本框获得焦点的时候以提示输入的方式显示。如下:

[html] view plain copy

姓名:input type="text" name="name" list="name"/

datalist id="name" 

option value="zhangsan"张三/option

option value="lisi"李四/option

option value-"wanger"王二/option

/datalist

pattern:验证input输入域的格式,即正则表达式。

input type="text" name="name" pattern="[A-z0-9]{8}"/

html5为什么增加表单重写属性

html5中新增两个表单属性,分别autocomplete和novalidate属性

1.autocomplete属性

该属性用于控制自动完成功能的开启和关闭。可以设置表单或者input元素,有两个属性值,当设置为on时,启动该功能;当设置off时,关闭该功能。启用该功能后,当用户在自动完成域开始输入时,浏览器就会在该域中显示填写的选项。用户每提交一次,就会增加一个用于选择的选项

2.novalidate属性

input输入类型,当提交表单时,会对这些输入内容进行验证。而novalidate属性则用于在提交表单时不对form或input进行验证:

html5新增的表单元素有哪些

html5新增的表单元素有以下几种:

datalist,keygen,output三种无素。

1.datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id。

2.keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

3.output 元素

output 元素用于不同类型的输出,比如计算或脚本输出。

根据具体问题类型,进行步骤拆解/原因原理分析/内容拓展等。

具体步骤如下:/导致这种情况的原因主要是……


本文名称:html5表单新属性,html5新增的表单属性
分享URL:http://myzitong.com/article/dseepgs.html