HTML5表单属性

来源:互联网 发布:淘宝设计团队多少人 编辑:程序博客网 时间:2024/05/29 03:36

1.<form> <input> autocomplete属性
form或input应该有用自动完成的功能。当用户在自动完成域开始输入时,浏览器应该在该域中显示填写的选项。
点击刷新后的效果图
这里写图片描述

<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>

2.form的novaildate属性
novaildate属性是一个boolean属性。该属性规定在提交表单时不应该验证form或input域。
代码不进行验证,邮箱的格式不正确,也可以输入。

<form action="demo-form.php" novalidate>E-mail: <input type="email" name="user_email"><input type="submit"></form>

3.input autofocus属性
autofocus属性是一个boolean属性。规定在页面加载时,域自动获得焦点。
页面打开之后,光标自动定位在last name

<form action="demo-form.php" autocomplete="on">  First name:<input type="text" name="fname" ><br>  Last name: <input type="text" name="lname" autofocus><br>  E-mail: <input type="email" name="email" autocomplete="off"><br>  <input type="submit"></form>

4.input的form属性
规定输入域所属的一个或多个表单
这里写图片描述

<form action="demo-form.php" id="form1">First name: <input type="text" name="fname"><br><input type="submit" value="Submit"></form><p> "Last name" 字段没有在form表单之内,但它也是form表单的一部分。</p>Last name: <input type="text" name="lname" form="form1">

5.input formaction属性
用于描述表单提交的url地址。该属性会覆盖form元素中的action属性。

<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="Submit"><br>//普通的提交按钮  <input type="submit" formaction="demo-admin.php" value="Submit as admin">//提交到不同页面的按钮</form>

6.input的formenctype属性
用于表单提交到服务器的数据编码(只对form表单中method=”post”表单),该属性会覆盖form元素的enctype属性。

<form action="demo-post-enctype.php" method="post">  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>

7 input formmethod属性,定义了表单的提交方式,覆盖了form元素的method属性

<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="Submit">  <input type="submit" formmethod="post" formaction="demo-post.php" value="Submit using POST"></form>

8 input formnovalidate属性
input元素在表单提交时不需要验证

<form action="demo-form.php">  E-mail: <input type="email" name="userid"><br>  <input type="submit" value="Submit"><br>//普通的方式提交  <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">//不需要验证方式的提交</form>

9.input formtarget属性
指定一个名称或一个关键字来指明表单提交数据接收后的展示

<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="Submit as normal">  <input type="submit" formtarget="_blank"  value="Submit to a new window"></form>

10.input height和width
height 和 width 属性规定用于 image 类型的<input>标签的图像高度和宽度。 height 和 width 属性只适用于 image 类型的<input> 标签。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

11.input的list属性
list属性规定输入域的datalist。datalist是输出域的选项列表。

<form action="demo-form.php" method="get"><input list="browsers" name="browser"><datalist id="browsers">  <option value="Internet Explorer">  <option value="Firefox">  <option value="Chrome">  <option value="Opera">  <option value="Safari"></datalist><input type="submit"></form>

12.input的min和max属性
min,max和step属性为包含数字或日期的input类型规定约束。

<input type="number" name="quantity" min="1" max="5">

13.input的multiple属性
该属性规定input元素中可选择多个值。
multiple属性适用于以下类型的标签:email和file。

<form action="demo-form.php">  选择图片: <input type="file" name="img" multiple>  <input type="submit"></form>

14.input的pattern属性
该属性描述了一个正则表达式用于验证input元素的值。适用于以下类型的input标签:text,search,url,tel,email,password.

<form action="demo-form.php">  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">  <input type="submit"></form>

15 input的placeholder属性
placeholder属性提供一种提示,描述输入域所期待的值。输入框中默认的输入内容。

<input type="text" name="fname" placeholder="First name">

16 input的required属性
该属性是一个boolean属性,required属性规定必须在提交之前填写输入域(不能为空)

Username: <input type="text" name="usrname" required>

17 step属性
step属性为输入域规定合法的数字间隔。

0 0