请输出你所知道的HTML5新增表单属性,html5引入什么新的表单属性

  请输出你所知道的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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: