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属性为输入域规定合法的数字间隔。