梳理HTML5中表单的常见特性及新特性

日期:2021-01-19 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

HTML5 新的表单特性
HTML5 的 <form> 和 <input>标识加上了几个新特性.
<form>新特性:
autocomplete
novalidate
<input>新特性:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step


<form> / <input> autocomplete 特性
autocomplete 特性要求 form 或 input 域应当有着全自动进行作用。
当客户在全自动进行域中刚开始键入时,访问器应当在该域中显示信息填写的选项。
提醒: autocomplete 特性有将会在 form元素中是打开的,而在input元素中是关掉的。
留意: autocomplete 可用于 <form> 标识,和下列种类的 <input> 标识:text, search, url, telephone, email, password, datepickers, range 和 color。
案例
HTML form 中打开 autocomplete (1个 input 字段关掉 autocomplete ):

XML/HTML Code拷贝內容到剪贴板
  1. <form action="demo-form.php" autocomplete="on">  
  2.   First name:<input type="text" name="fname"><br>  
  3.   Last name: <input type="text" name="lname"><br>  
  4.   E-mail: <input type="email" name="email" autocomplete="off"><br>  
  5.   <input type="submit">  
  6. </form>  


<form> novalidate 特性
novalidate 特性的1个boolean 特性.
novalidate 特性要求在递交表单时不可该认证 form 或 input 域。
案例
不用认证递交的表奇数据

XML/HTML Code拷贝內容到剪贴板
  1. <form action="demo-form.php" novalidate>  
  2.   E-mail: <input type="email" name="user_email">  
  3.   <input type="submit">  
  4. </form>  


<input> autofocus 特性
autofocus 特性是1个 boolean 特性.
autofocus 特性要求在网页页面载入时,域全自动地得到聚焦点。
案例
让 "First name" input 键入域在网页页面加载时全自动聚焦:

XML/HTML Code拷贝內容到剪贴板
  1. First name:<input type="text" name="fname" autofocus>  


<input> form 特性
form 特性要求键入域隶属的1个或好几个表单。
提醒:如需引入1个以上的表单,请应用空格隔开的目录。
案例
坐落于form表单外的input 字段引入了 HTML form (该 input 表单依然属于form表单的1一部分):

<input> formaction 特性
The formaction 特性用于叙述表单递交的URL详细地址.
The formaction 特性会遮盖<form> 元素中的action特性.
留意: The formaction 特性用于 type="submit" 和 type="image".
案例
下列HTMLform表单包括了两个不一样详细地址的递交按钮:

XML/HTML Code拷贝內容到剪贴板
  1. <form action="demo-form.php">  
  2.   First name: <input type="text" name="fname"><br>  
  3.   Last name: <input type="text" name="lname"><br>  
  4.   <input type="submit" value="Submit"><br>  
  5.   <input type="submit" formaction="demo-admin.php"  
  6.   value="Submit as admin">  
  7. </form>  


<input> formenctype 特性
formenctype 特性叙述了表单递交到服务器的数据信息编号 (只对form表单中 method="post" 表单)
formenctype 特性遮盖 form 元素的 enctype 特性。
关键: 该特性与 type="submit" 和 type="image" 相互配合应用。
案例
第1个递交按钮已默认设置编号推送表奇数据,第2个递交按钮以 "multipart/form-data" 编号文件格式推送表奇数据:

XML/HTML Code拷贝內容到剪贴板
  1. <form action="demo-post_enctype.php" method="post">  
  2.   First name: <input type="text" name="fname"><br>  
  3.   <input type="submit" value="Submit">  
  4.   <input type="submit" formenctype="multipart/form-data"  
  5.   value="Submit as Multipart/form-data">  
  6. </form>  


<input> formmethod 特性
formmethod 特性界定了表单递交的方法。
formmethod 特性遮盖了 <form> 元素的的method 特性。
留意: 该特性能够与 type="submit" 和 type="image" 相互配合应用。
案例
再次界定表单递交方法案例:

XML/HTML Code拷贝內容到剪贴板
  1. <form action="demo-form.php" method="get">  
  2.   First name: <input type="text" name="fname"><br>  
  3.   Last name: <input type="text" name="lname"><br>  
  4.   <input type="submit" value="Submit">  
  5.   <input type="submit" formmethod="post" formaction="demo-post.php"  
  6.   value="Submit using POST">  
  7. </form>  


<input> formnovalidate 特性
novalidate 特性是1个 boolean 特性.
novalidate特性叙述了 <input> 元素在表单递交时不用被认证。
formnovalidate 特性会遮盖 <form> 元素的novalidate特性.
留意: formnovalidate 特性与type="submit1起应用
案例
两个递交按钮的表单(应用与不可用认证 ):

XML/HTML Code拷贝內容到剪贴板
  1. <form action="demo-form.php">  
  2.   E-mail: <input type="email" name="userid"><br>  
  3.   <input type="submit" value="Submit"><br>  
  4.   <input type="submit" formnovalidate value="Submit without validation">  
  5. </form>  

<input> formtarget 特性
formtarget 特性特定1个名字或1个重要字来指明表单递交数据信息接受后的展现。
The formtarget 特性遮盖 <form>元素的target特性.
留意: formtarget 特性与type="submit" 和 type="image"相互配合应用.
案例
两个递交按钮的表单, 在不一样对话框中显示信息:

XML/HTML Code拷贝內容到剪贴板
  1. <form action="demo-form.php">  
  2.   First name: <input type="text" name="fname"><br>  
  3.   Last name: <input type="text" name="lname"><br>  
  4.   <input type="submit" value="Submit as normal">  
  5.   <input type="submit" formtarget="_blank"  
  6.   value="Submit to a new window">  
  7. </form>  


<input> height 和 width 特性
height 和 width 特性要求用于 image 种类的 <input> 标识的图象高宽比和宽度。
留意: height 和 width 特性只可用于 image 种类的<input> 标识。
提醒:图象一般会另外特定高宽比和宽度特性。假如图象设定高宽比和宽度,图象所需的室内空间 在载入页时会被保存。假如沒有这些特性, 访问器不知道道图象的尺寸,其实不能预留 适度的室内空间。照片在载入全过程中会使网页页面合理布局实际效果更改 (虽然照片已载入)。
案例
界定了1个图象递交按钮, 应用了 height 和 width 特性:

XML/HTML Code拷贝內容到剪贴板
  1. <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">  

<input> list 特性
list 特性要求键入域的 datalist。datalist 是键入域的选项目录。
OperaSafariChromeFirefoxInternet Explorer
案例
在 <datalist>中预订义 <input> 值:

XML/HTML Code拷贝內容到剪贴板
  1. <input list="browsers">  
  2.   
  3. <datalist id="browsers">  
  4.   <option value="Internet Explorer">  
  5.   <option value="Firefox">  
  6.   <option value="Chrome">  
  7.   <option value="Opera">  
  8.   <option value="Safari">  
  9. </datalist>  

<input> min 和 max 特性
min、max 和 step 特性用于为包括数据或时间的 input 种类要求限制(管束)。
留意: min、max 和 step 特性可用于下列种类的 <input> 标识:date pickers、number 和 range。
案例

XML/HTML Code拷贝內容到剪贴板
  1. <input> 元素最少值与最大值设定:   
  2. Enter a date before 1980-01-01:   
  3. <input type="date" name="bday" max="1979⑴2⑶1">  
  4.   
  5. Enter a date after 2000-01-01:   
  6. <input type="date" name="bday" min="2000-01-02">  
  7.   
  8. Quantity (between 1 and 5):   
  9. <input type="number" name="quantity" min="1" max="5">  


<input> multiple 特性
multiple 特性是1个 boolean 特性.
multiple 特性要求<input> 元素中可挑选好几个值。
留意: multiple 特性可用于下列种类的 <input> 标识:email 和 file。: email, and file.
案例
提交好几个文档:

XML/HTML Code拷贝內容到剪贴板
  1. Select images: <input type="file" name="img" multiple>  


<input> pattern 特性
pattern 特性叙述了1个正则表达式表述式用于认证 <input> 元素的值。
留意:pattern 特性可用于下列种类的 <input> 标识: text, search, url, tel, email, 和 password.
提醒: 是用来全局性 title 特性叙述了方式.
案例
下面的事例显示信息了1个只能包括3个字母的文字域(不含数据及独特标识符):

XML/HTML Code拷贝內容到剪贴板
  1. Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">  


<input> placeholder 特性
placeholder 特性出示1种提醒(hint),叙述键入域所希望的值。
简洁明了的提醒在客户键入值前会显示信息在键入域上。
留意: placeholder 特性可用于下列种类的 <input> 标识:text, search, url, telephone, email 和 password。
案例
input 字段提醒文字t:

XML/HTML Code拷贝內容到剪贴板
  1. <input type="text" name="fname" placeholder="First name">  


<input> required 特性
required 特性是1个 boolean 特性.
required 特性要求务必在递交以前填写键入域(不可以为空)。
留意:required 特性可用于下列种类的 <input> 标识:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 和 file。
案例
不可以为空的input字段:

XML/HTML Code拷贝內容到剪贴板
  1. Username: <input type="text" name="usrname" required>  


<input> step 特性
step 特性为键入域要求合理合法的数据间距。
假如 step="3",则合理合法的数是 ⑶,0,3,6 等
提醒: step 特性能够与 max 和 min 特性建立1个地区值.
留意: step 特性与下列type种类1起应用: number, range, date, datetime, datetime-local, month, time 和 week.
案例
要求input step步长为3:

XML/HTML Code拷贝內容到剪贴板
  1. <input type="number" name="points" step="3">  


<output> 元素
HTML5 还引进了1个新元素 <output>,用来表明不一样种类的輸出結果,例如輸出由脚本制作所写。

还能够用 for 特性特定輸出元素和文本文档中危害测算的别的元素之间的关联(例如,做为键入源或主要参数)。for 特性的值是1个由空格隔开的别的元素的 IDs 目录。

placeholder 特性
HTML5 引进了1个叫做 palceholder 的新特性。这个特性在 <input> 和 <textarea> 元素上为客户出示了在这个字段能够键入甚么的提醒。占位符标识符不可以包括回车符或换行符。
下面是 placeholder 特性的简易英语的语法:

XML/HTML Code拷贝內容到剪贴板
  1. <input type="text" name="search" placeholder="search the web"/>  

这个特性仅有全新版的 Mozilla,Safari 和 Chrome 访问器适用。


required 特性
如今,大家不必须应用 JavaScript 解决诸如空文字框始终不可以被递交的这类顾客端认证了,由于 HTML5 引进了1个叫做 required 的新特性,能够依照以下方法应用,它会确保键入框有值:

XML/HTML Code拷贝內容到剪贴板
  1. <input type="text" name="search" required/>  

这个特性仅有全新版的 Mozilla,Safari 和 Chrome 访问器适用。