网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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


当前标题:html5新增表单元素,HTML5新增元素
文章URL:http://bjjierui.cn/article/dsdcijj.html

其他资讯