首页 > 代码库 > HTML5(字符标准，表单)
HTML5(字符标准，表单)
字符标准
<meta charset="utf-8">
表单
1、HTML 表单用于搜集不同类型的用户输入。
实例——创建文本字段
<form action=""> First name: <input type="text" name="firstname" size="30"><br> //可通过size设置文本框长度 Last name: <input type="text" name="lastname" value="http://www.mamicode.com/Tom"> //可通过value设置初值 </form>
注意：表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。
实例——创建密码字段
<form action=""> Password: <input type="password" name="password"> </form>
注意：密码字段中的字符是隐藏的(显示为星号或圆圈)
2、多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域:通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
单选框选项：<input type="radio"> 标签定义了表单单选框选项
<form> <input type="radio" name="sex" value=http://www.mamicode.com/"male">Male<br> <input type="radio" name="sex" value=http://www.mamicode.com/"female" checked="checked">Female //通过checked="checked"设置初值 即默认勾选 </form>
复选框：<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form> <input type="checkbox" name="vehicle" value=http://www.mamicode.com/"Bike">I have a bike<br> <input type="checkbox" name="vehicle" value=http://www.mamicode.com/"Car" checked="checked">I have a car //通过checked="checked"设置初值 即默认勾选 </form>
提交按钮：<input type="submit"> 定义了提交按钮.当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value=http://www.mamicode.com/"Submit">//value是提交按钮上的字 </form>
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。
重置按钮:重置初值
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value=http://www.mamicode.com/"your name"><br> E-mail:<br> <input type="text" name="mail" value=http://www.mamicode.com/"your email"><br> Comment:<br> <input type="text" name="comment" value=http://www.mamicode.com/"your comment" size="50"><br><br> <input type="submit" value=http://www.mamicode.com/"发送"> <input type="reset" value=http://www.mamicode.com/"重置"> </form>
文本域：多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制
<textarea rows="10" cols="30"> 我是一个文本框。 </textarea>
下拉列表框：下拉列表框是一个可选列表。
<form action=""> <select name="cars"> <option value=http://www.mamicode.com/"volvo">Volvo</option> <option value=http://www.mamicode.com/"saab">Saab</option> <option value=http://www.mamicode.com/"fiat">Fiat</option> <option value=http://www.mamicode.com/"audi">Audi</option> </select> </form>
带有预选的下拉列表框:（通过添加selected 将其设为预选值 否则预选值为第一个option）
<form action=""> <select name="cars"> <option value=http://www.mamicode.com/"volvo">Volvo</option> <option value=http://www.mamicode.com/"saab">Saab</option> <option value=http://www.mamicode.com/"fiat" selected>Fiat</option> <option value=http://www.mamicode.com/"audi">Audi</option> </select> </form>
按钮：可以对按钮上的文字进行自定义
<form action=""> <input type="button" value=http://www.mamicode.com/"Hello world!" > </form>
如何在数据周围绘制一个带标题的框：通过fieldset实现
<fieldset> <legend>Personal information:</legend> //嵌在框中的文字 定义了fieldset的标题 Name: <input type="text" size="30"><br> E-mail: <input type="text" size="20"><br> Date of birth: <input type="text" size="10"> </fieldset> </form>
标签(小型文本框)
<inpu<form action=""> <label for ="male">Male</label> </form>
图像提交按钮
<form action="demo-form.php"> <input type="image" src=http://www.mamicode.com/"img_submit.gif" alt="Submit" width="48" height="48"> </form>
当用户无法查看图像时（可能由于网速太慢、错误的 src 属性、或者用户使用的是屏幕阅读器），alt 属性为图像提供了替代的文本。
关于 alt 文本的指导原则：
- 如果图像中包含信息，则 alt 文本应该对图像进行描述
- 如果图像位于 <a> 元素中，则 alt 文本应该解释链接指向哪里
- 如果图像是纯装饰性的，请使用
注意: height 和 width 属性只适用于 image 类型的<input> 标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。
2、Form表单属性
<form> / <input> autocomplete 属性(默认为开 ="on"表示开 ="off"表示关)
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="demo-form.php" autocomplete="on"> //开启此功能后，当输入过信息，点框会有下拉列表，都是曾经用过的信息，点击后可以自动完成 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 域。
<form action="demo-form.php" novalidate="novalidate"> //有novalidate无需验证正确性 如果没有novalidate则要验证正确性 E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
<input> placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
<input type="text" name="fname" placeholder="First name">
<input> autofocus 属性
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时，域自动地获得焦点。
First name:<input type="text" name="fname" autofocus="autofocus">//页面载入时自动聚焦
<input> formaction 属性
The formaction 属性用于描述表单提交的URL地址.
The formaction 属性会覆盖<form> 元素中的action属性.
注意: The formaction 属性用于 type="submit" 和 type="image".
<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value=http://www.mamicode.com/"提交"><br> <input type="submit" formaction="demo-admin.php" value="提交"> </form>
<input> formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
主要: 该属性与 type="submit" 和 type="image" 配合使用。
<form action="demo-post_enctype.php" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value=http://www.mamicode.com/"提交"> <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交"> </form>
第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:
<input> formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 <form> 元素的的method 属性。
注意: 该属性可以与 type="submit" 和 type="image" 配合使用。
<form action="demo-form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value=http://www.mamicode.com/"提交"> <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交"> </form>
<input> formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 <input> 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 <form> 元素的novalidate属性.
注意: formnovalidate 属性与type="submit一起使用
<form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value=http://www.mamicode.com/"提交"><br> <input type="submit" formnovalidate value=http://www.mamicode.com/"不验证提交"> </form>
<input> formtarget 属性
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
The formtarget 属性覆盖 <form>元素的target属性.
注意: formtarget 属性与type="submit" 和 type="image"配合使用.
<form action="demo-form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value=http://www.mamicode.com/"正常提交"> <input type="submit" formtarget="_blank" value="提交到一个新的页面上"> </form>
<input> list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
类似于下拉列表 但是list是文本框 除了备用选项外还可以自己输入信息 下拉列表则不可以自己输入信息
<form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value=http://www.mamicode.com/"Internet Explorer"> <option value=http://www.mamicode.com/"Firefox"> <option value=http://www.mamicode.com/"Chrome"> <option value=http://www.mamicode.com/"Opera"> <option value=http://www.mamicode.com/"Safari"> </datalist> <input type="submit"> </form>
HTML5 <datalist> 元素
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<input> min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
Enter a date before 1980-01-01: <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:
<form action="demo-form.php"> 选择图片: <input type="file" name="img" multiple>// 浏览文件 从文件中上传多个(multiple)图片 <input type="submit"> </form>
<input> pattern 属性
pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.
提示： 是用来全局 title 属性描述了模式.
提示： 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">//输入错误会显示：您必须使用此格式：Three letter country code
<input> step 属性
step 属性为输入域规定合法的数字间隔。
如果 step="3"，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值.
注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
<input type="number" name="points" step="3">
3、Form事件
HTML DOM oninvalid事件（input元素内的值为无效值时触发的事件）
例如：input元素设置了required属性，但是提交时该处为空就会触发oninvalid事件。
HTML5对表单元素提供了pattern属性，它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。
实例——验证手机号
<form action=""> 手机号: <input type="text" name="phone" maxlength="11" pattern="^(0|86|17951)?1[0-9]{10}" oninvalid="setCustomValidity(‘请输入11位手机号‘);"/>//注意 必须是单引号 <br> <input type="submit"> </form>
setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息
- maxlength：限定input最大输入长度
4、表单元素
密钥 公钥 keygen
HTML5 <output> 元素
<output> 元素用于不同类型的输出，比如计算或脚本输出：
<form oninput="x.value=http://www.mamicode.com/parseInt(a.value)+parseInt(b.value)">0// oninput事件 在用户输入时触发oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。 <input type="range" id="a" value=http://www.mamicode.com/"50">100 +<input type="number" id="b" value=http://www.mamicode.com/"50"> =<output name="x" for="a b"></output> </form>
parseInt(字符串) 将字符串值转为数字
for 属性规定了计算中使用的元素与计算结果之间的关系。
语法：<output for="element_id">
| element_id | 一个或多个元素的 id 列表，以空格分隔，规定计算中使用的元素与计算结果之间的关系。 |
HTML5(字符标准，表单)