html5新增表单元素,HTML5新增元素

HTML5 新增加了哪些表单元素

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

创新互联专注于企业营销型网站、网站重做改版、潍城网站定制设计、自适应品牌网站建设、H5开发、商城网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为潍城等各大城市提供网站开发制作服务。

[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}"/

h5新增表单元素有哪些？

新的input的类型有。

email（自动验证email格式）

url（自动验证url格式）

number（只能输入数字）

range（类似音量滑动条）

Date pickers (date, month, week, time, datetime, datetime-local)（自带日期选择）

search（搜索域）

color（颜色选择）

datalist（自动验证内容是否在可选择选项中）

html5是指万维网的核心语言、 标准通用标记语言下的一个应用 超文本标记语言的第五次重大修改。

2014年10月29日， 万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。

HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括新的解析规则增强了灵活性、新属性、淘汰过时的或冗余的属性等。

标准通用标记语言下的一个应用 HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext 。

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用于标识“小型文本”等