- 第1节:HTML5 浏览器支持
- 第2节:HTML5 新元素
- 第3节:HTML5 Canvas
- 第4节:HTML5 SVG
- 第5节:HTML5 MathML
- 第6节:HTML5 拖放
- 第7节:HTML5 地理定位
- 第8节:HTML5 视频(Video)
- 第9节:HTML5 音频(Audio)
- 第10节:HTML5 Input 类型
- 第11节:HTML5 表单元素
- 第12节:HTML5 表单属性
- 第13节:HTML5 语义元素
- 第14节:HTML5 Web 存储
- 第15节:HTML5 Web SQL
- 第16节:HTML5 应用程序缓存
- 第17节:HTML5 Web Workers
- 第18节:HTML5 SSE
- 第19节:HTML5 WebSocket
- 第20节:HTML5 代码规范
- 第21节:HTML5 <!DOCTYPE> 标签
- 第22节:HTML5 <a> 标签
- 第23节:HTML5 <area> 标签
- 第24节:HTML5 <abbr> 标签
- 第25节:HTML5 <applet> 标签
- 第26节:HTML5 <article>标签
- 第27节:HTML5 <aside> 标签
- 第28节:HTML5 <address> 标签
- 第29节:HTML <audio> 标签
- 第30节:HTML5 <b> 标签
- 第31节:HTML5 <base> 标签
- 第32节:HTML5 <blockquote> 标签
- 第33节:HTML5 <br />标签
- 第34节:HTML5 <button> 标签
- 第35节:HTML5 <bdi> 标签
- 第36节:HTML5 <bdo> 标签
- 第37节:HTML5 <body> 标签
- 第38节:HTML5 <canvas> 标签
- 第39节:HTML5 <col> 标签
- 第40节:HTML5 <colgroup> 标签
- 第41节:HTML5 <caption> 标签
- 第42节:HTML5 <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签
- 第43节:HTML5 <ul> 标签
- 第44节:HTML5 <dl> 标签
- 第45节:HTML5 <del> 标签
- 第46节:HTML5 <dd> 标签
- 第47节:HTML5 <details> 标签
- 第48节:HTML5 <div> 标签
- 第49节:HTML5 <embed> 标签
- 第50节:HTML5 <figcaption> 标签
- 第51节:HTML5 <form> 标签
- 第52节:HTML5 <figure> 标签
- 第53节:HTML5 <footer> 标签
- 第54节:HTML5 <fieldset> 标签
- 第55节:HTML5 <hgroup> 标签
- 第56节:HTML5 <hr> 标签
- 第57节:HTML5 <h1> 至 <h6> 标签
- 第58节:HTML5 <header> 标签
- 第59节:HTML5 <html> 标签
- 第60节:HTML5 <head> 标签
- 第61节:HTML5 <i> 标签
- 第62节:HTML5 <iframe> 标签
- 第63节:HTML5 <input> 标签
- 第64节:HTML5 <img> 标签
- 第65节:HTML5 <ins> 标签
- 第66节:HTML5 <link> 标签
- 第67节:HTML5 <li> 标签
- 第68节:HTML5 <legend> 标签
- 第69节:HTML5 <label> 标签
- 第70节:HTML5 <map> 标签
- 第71节:HTML5 <meta> 标签
- 第72节:HTML5 <menu> 标签
- 第73节:HTML5 <meter> 标签
- 第74节:HTML5 <mark> 标签
- 第75节:HTML5 <nav> 标签
- 第76节:HTML5 <noscript> 标签
- 第77节:HTML5 <ol> 标签
- 第78节:HTML5 <object> 标签
- 第79节:HTML5 <option> 标签
- 第80节:HTML5 <output> 标签
- 第81节:HTML5 <optgroup> 标签
- 第82节:HTML5 <p> 标签
- 第83节:HTML5 <pre> 标签
- 第84节:HTML5 <param> 标签
- 第85节:HTML5 <progress> 标签
- 第86节:HTML5 <q> 标签
- 第87节:HTML5 <rp> 标签
- 第88节:HTML5 <rt> 标签
- 第89节:HTML5 <ruby> 标签
- 第90节:HTML5 <s> 标签
- 第91节:HTML5 <sub> 和 <sup> 标签
- 第92节:HTML5 <span> 标签
- 第93节:HTML5 <small> 标签
- 第94节:HTML5 <style> 标签
- 第95节:HTML5 <strike> 标签
- 第96节:HTML5 <select> 标签
- 第97节:HTML5 <source> 标签
- 第98节:HTML5 <section> 标签
- 第99节:HTML5 <summary> 标签
- 第100节:HTML5 <td> 标签
- 第101节:HTML5 <th> 标签
- 第102节:HTML5 <tt> 标签
- 第103节:HTML5 <tr> 标签
- 第104节:HTML5 <table> 标签
- 第105节:HTML5 <title> 标签
- 第106节:HTML5 <tfoot> 标签
- 第107节:HTML5 <thead> 标签
- 第108节:HTML5 <time> 标签
- 第109节:HTML5 <tbody> 标签
- 第110节:HTML5 <textarea> 标签
HTML5 表单属性
HTML5 表单属性
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 (一个 input 字段关闭 autocomplete ):
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
提示:某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。
<form> novalidate 属性
novalidate 属性的一个boolean 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
实例
无需验证提交的表单数据
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<input> autofocus 属性
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时,域自动地获得焦点。
实例
让 "First name" input 输入域在页面载入时自动聚焦:
<input> form 属性
form 属性规定输入域所属的一个或多个表单。
提示:如需引用一个以上的表单,请使用空格分隔的列表。
实例
位于form表单外的input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
<input> formaction 属性
The formaction 属性用于描述表单提交的URL地址.
The formaction 属性会覆盖<form> 元素中的action属性.
注意: The formaction 属性用于 type="submit" 和 type="image".
实例
以下HTMLform表单包含了两个不同地址的提交按钮:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo-admin.php"
value="Submit as admin">
</form>
<input> formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
注意: 该属性与 type="submit" 和 type="image" 配合使用。
实例
第一个提交按钮已默认编码发送表单数据,第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
<input> formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 <form> 元素的的method 属性。
注意: 该属性可以与 type="submit" 和 type="image" 配合使用。
实例
重新定义表单提交方式实例:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="Submit using POST">
</form>
<input> formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 <input> 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 <form> 元素的novalidate属性.
注意: formnovalidate 属性与type="submit"一起使用
实例
两个提交按钮的表单(使用与不适用验证 ):
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
<input> formtarget 属性
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
The formtarget 属性覆盖 <form>元素的target属性.
注意: formtarget 属性与type="submit" 和 type="image"配合使用.
实例
两个提交按钮的表单, 在不同窗口中显示:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
<input> height 和 width 属性
height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的<input> 标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。
实例
定义了一个图像提交按钮, 使用了 height 和 width 属性:
<input> list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
实例
在 <datalist>中预定义 <input> 值:
<datalist>
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input> min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
注意: min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
实例
<input> 元素最小值与最大值设置:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input> multiple 属性
multiple 属性是一个 boolean 属性.
multiple 属性规定<input> 元素中可选择多个值。
注意: multiple 属性适用于以下类型的<input> 标签:email 和 file。: email, and file.
实例
上传多个文件:
<input> pattern 属性
pattern 属性描述了一个正则表达式用于验证<input> 元素的值。
注意:pattern 属性适用于以下类型的<input> 标签: text, search, url, tel, email, 和 password.
提示: 是用来全局 title 属性描述了模式.
提示: 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容
实例
下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):
<input> placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的<input> 标签:text, search, url, telephone, email 以及 password。
实例
input 字段提示文本t:
<input> required 属性
required 属性是一个 boolean 属性.
required 属性规定必须在提交之前填写输入域(不能为空)。
注意:required 属性适用于以下类型的<input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
实例
不能为空的input字段:
<input> step 属性
step 属性为输入域规定合法的数字间隔。
如果 step="3",则合法的数是 -3,0,3,6 等
提示: step 属性可以与 max 和 min 属性创建一个区域值.
注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
实例
规定input step步长为3:
HTML5 <input> 标签
提示:你可以通过本站的编程实战部分来练习如何添加HTML表单!