请输出你所知道的HTML5新增表单属性,html5引入什么新的表单属性
HTML5 新的表单属性HTML5的表单和输入标签增加了几个新的属性。
新表单属性:
自动完成
关闭验证
新输入属性:
自动完成
自(动)调焦装置
形式
形成作用
formenctype
属性
甲酰新戊酸盐
表单目标
高度和宽度
目录
最小和最大
多个的
模式(正则表达式)
占位符
需要
步骤
form / input autocomplete 属性autocomplete属性指定表单或输入字段应具有自动完成功能。
当用户开始在自动完成字段中输入内容时,浏览器应该在该字段中显示已填充的选项。
提示:autocomplete属性可能在form元素中是打开的,在input元素中是关闭的。
注意:自动完成功能适用于表单标签,以及以下类型的输入标签:文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。
例子
在html中打开自动完成功能(输入字段关闭自动完成功能):
XML/Code将内容复制到剪贴板for action= demo-form . PHP autocomplete= on first name:input type= text name= fname br last name:input type= text name= lname br e-mail:I nput type= email name= email autocomplete= off br input type= submit /formform novalidate 属性no validate属性。
novalidate属性指定在提交表单时不应验证表单或输入域。
例子
不需要验证提交的表单数据。
XML/HTML代码将内容复制到剪贴板for action= demo-form . PHP no validate e-mail:input type= email name= user _ email input type= submit /forminput autofocus 属性auto focus属性是一个布尔属性。
Autofocus属性指定当页面被加载时,域自动获得焦点。
例子
让“名字”输入字段在页面加载时自动聚焦:
XML/HTML代码将内容复制到剪贴板first name:input type= text name= fname autofocusinput form 属性form属性指定输入字段所属的一个或多个表单。
提示:如果您需要引用多个表单,请使用空格分隔的列表。
例子
表单外的输入字段引用HTML表单(输入表单仍是表单表单的一部分):input formaction 属性formaction属性用于描述表单提交的URL地址。
formaction属性覆盖form元素中的action属性。
注意:formaction属性用于type=submit 和type=image 。
例子
下面的HTMLform表单包含两个地址不同的提交按钮:
XML/Code将内容复制到剪贴板for action= demo-form . PHP first name:input type= text name= fname br last name:input type= text name= lname br input type= Submit br input type= Submit for action= demo-admin . PHP value= Submit as admin /forminput formenctype 属性formenctype属性描述提交到服务器的表单的数据编码(仅适用于method=post 的表单)
formenctype属性重写form元素的enctype属性。
Main:此属性与type=submit 和type=image 一起使用。
例子
第一个提交按钮已默认编码为发送表单数据,第二个提交按钮以“多部分/表单数据”编码格式发送表单数据:
XML/Code将内容复制到剪贴板for action= demo-post _ enctype . PHP method= post first name:input type= text name= fname br input type= submit value= submit form enctype= multipart/form-data value= submitsmultipart/form-data /forminput formmethod 属性form method属性定义如何提交表单。
method属性覆盖form元素的method属性。
注意:此属性可以与type=submit 和type=image 一起使用。
例子
重新定义表单提交方法的示例:
XML/Code将内容复制到剪贴板for action= demo-form . PHP method= get first name:input type= text name= fname br last name:input type= text name= lname br input type= su Bm value= submit form method= post form action= demo-post . PHP value= submitusingpost /forminput formnovalidate 属性novalidate属性是布尔属性。
novalidate属性描述了在提交表单时不需要验证输入元素。
form的novalidate属性覆盖form元素的novalidate属性。
注意:formnovalidate属性与type=submit一起使用。
例子
带有两个提交按钮的表单(带和不带应用程序的验证):
XML/Code将内容复制到剪贴板for action= demo-form . PHP e-mail:input type= email name= userid br input type= submit value= submit form validate at The evalue= submit without validation /forminput formtarget 属性form target属性指定名称或关键字,以指示表单提交数据在收到后的显示方式。
formtarget属性重写form元素的target属性。
注意:formtarget属性与type=submit 和type=image 一起使用。
例子
带有两个提交按钮的表单,显示在不同的窗口中:
XML/Code将内容复制到剪贴板for action= demo-form . PHP first name:input type= text name= fname br last name:input type= text name= lname br input type= sub anormal input type= submit form target= _ blank value= submitttoanewwindow /forminput height 和 width 属性height和width属性指定用于图像类型的输入标签的图像高度和宽度。
注意:高度和宽度属性仅适用于image类型的输入标记。
提示:图像通常指定高度和宽度属性。如果设置了图像的高度和宽度,则在加载页面时会保留图像所需的空间。没有这些属性,浏览器就不知道图片的大小,也就无法预留适当的空间。页面布局效果会在图像加载过程中改变(即使图像已经加载)。
例子
定义了一个图像提交按钮,并使用了高度和宽度属性:
XML/HTML代码将内容复制到剪贴板。input type= image src= img _ submit . gif alt= submit width= 48 height= 48 input list 属性list属性指定输入字段的数据列表。Datalist是输入域的选项列表。
operafarichromefirefox internet Explorer
例子
在数据列表中预定义输入值:
XML/代码将内容复制到剪贴板input list= browsers datalist id= browsers option value= internet explorer option value= Firefox option value= chrome option value= ope ra option value= safari /datalistinput min 和 max 属性min、max和step属性用于为包含数字或日期的输入类型指定限制(约束)。
注意:min、max和step属性适用于以下类型的输入标记:日期选取器、数字和范围。
例子
XML/代码将内容复制到剪贴板输入元素的最小和最大设置:输入日期早于1980-01-01:输入类型= date name= bday max= 1979-12-31 输入类型= date name= bday min= 2000-01-02 数量(介于1和5之间):输入类型= number name= quantity min= 1 max= 5 010
multiple属性指定可以在input元素中选择多个值。
注意:multiple属性适用于以下类型的输入标记:电子邮件和文件。电子邮件和文件。
例子
上传多个文件:
XML/HTML代码将内容复制到剪贴板选择图像:input type= file name= img multipleinput multiple 属性Pattern属性描述用于验证input元素值的正则表达式。
注意:模式属性适用于以下类型的输入标记:文本、搜索、url、电话、电子邮件和密码。
提示:全局标题属性用于描述模式。
例子
以下示例显示了一个只能包含三个字母(不包括数字和特殊字符)的文本字段:
XML/HTML代码将内容复制到剪贴板country Code:input type= text name= country _ Code pattern=[a-za-z]{ 3 } title= three letter country Code input pattern 属性占位符属性提供了描述输入字段的预期值的提示。
在用户输入值之前,输入字段上会显示一个简短的提示。
注意:placeholder属性适用于以下类型的输入标记:文本、搜索、URL、电话、电子邮件和密码。
例子
输入字段提示文本t:
XML/HTML代码将内容复制到剪贴板输入type= text name= fname placeholder= first name input placeholder 属性必需的属性是布尔属性。
required属性指定在提交之前必须填写输入字段(不能为空)。
注意:必需属性适用于以下类型的输入标签:文本、搜索、URL、电话、电子邮件、密码、日期选择器、数字、复选框、单选按钮和文件。
例子
不能为空的输入字段:
XML/HTML代码将内容复制到剪贴板username:input type= text name= usrname requiredinput required 属性step属性指定输入字段的合法数字间隔。
如果step=3 ,合法数字是-3,0,3,6等。
提示:步长属性可以用最大值和最小值属性创建一个区域值。
注意:step属性用于以下类型:数字、范围、日期、日期时间、本地日期时间、月、时间和周。
例子
指定的输入步长为3:
XML/HTML代码将内容复制到剪贴板输入Type= number name= points step= 3 input step 属性HTML 5还引入了新的元素输出,用来表示不同类型的输出结果,比如脚本编写的输出。
还可以使用for属性指定输出元素与文档中影响计算的其他元素之间的关系(例如,作为输入源或参数)。for属性的值是由空格分隔的其他元素的IDs列表。
output 元素HTML5引入了一个名为palceholder的新属性。该属性为用户提供了可以在input和textarea元素的该字段中输入什么内容的提示。占位符不能包含回车或换行符。
以下是占位符属性的简单语法:
XML/HTML代码将内容复制到剪贴板输入type= text name= search placeholder= search the web /只有最新版本的Mozilla、Safari和Chrome浏览器支持此属性。
placeholder 属性现在,我们不需要使用JavaScript来处理这种客户端验证,比如空文本框永远无法提交,因为HTML5引入了一个新的属性叫做required,可以如下使用,它会保证输入框有值:
XML/HTML代码将内容复制到剪贴板需要输入type= text name= search此属性仅受最新版本的Mozilla、Safari和Chrome浏览器支持。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。