本文详细介绍了HTML表单中的各种属性及其用法，包括autocomplete、novalidate、autofocus等，并解释了这些属性如何增强用户体验及确保数据的有效性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="demo-form.php" autocomplete="on">
first name <input type="text" name="fanem" /> <br />
second name <input type="text" name="faem" /><br />
Email <input type="email" name="EMAIL" autocomplete="on" /><br />
<input type="submit" />
</form>
<p>注意填写表单，然后重新刷新页面查看如何自动填充内容</p>
<p>注意form的autocomplete的属性为“on”开 email的autocomplete属性为“off”</p>
<!--novalidate 属性的一个boolean 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。-->
<form action="function.html" novalidate="novalidate">
EMail <input type="email" autocomplete="on" name="type_name" />
<p>
<strong>
name
<!--novalidate 属性的一个boolean 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。-->
</strong>
</p>
<input type="submit" />
</form>
<!--autofocus 属性是一个 boolean 属性.-->
<!--autofocus 属性规定在页面加载时，域自动地获得焦点-->
<form action="demo-form.php" >
帐号<input type="text" autofocus="autofocus" />
密码<input type="text" />
</form>
<form>
<!--<input> formaction 属性
The formaction 属性用于描述表单提交的URL地址.
The formaction 属性会覆盖<form> 元素中的action属性.
注意: The formaction 属性用于 type="submit" 和 type="image".-->
first name <input type="text" name="farm" />
second name <input type="password" name="password" />
<input type="submit" />
<input type="submit" formaction="http://www.baidu.ocm" value="百度" />
</form>
<!--<input> formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
主要: 该属性与 type="submit" 和 type="image" 配合使用。-->
<form action="function.html" method="post">
first name<input type="text" name="name" />
<input type="submit" />
<input type="submit" value="multipart/form-data" formenctype="multipart/form-data" />
</form>
<!--<input> formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 <form> 元素的的method 属性。
注意: 该属性可以与 type="submit" 和 type="image" 配合使用。-->
<form action="index.html" method="get">
first name <input type="text" name="fname" /><br />
second name <input type="text" name="fname" /><br />
<input type="submit" value="submit" /><br />
<input type="submit" value="using post" formmethod="post" />
</form>
<!--<input> formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 <input> 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 <form> 元素的novalidate属性.
注意: formnovalidate 属性与type="submit一起使用-->
<form>
Emial <input type="email" name="userid" autocomplete="on" /><br />
<input type="submit" value="userid" /><br />
<input type="submit" formnovalidate="formnovalidate" value="submit" /><br
/>
</form>
<!--formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
The formtarget 属性覆盖 <form>元素的target属性.
注意: formtarget 属性与type="submit" 和 type="image"配合使用.-->
<form>
<!--<input> list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。-->
<input list="brows" />
<datalist id="brows">
<input type="checkbox" />
<option>第一项</option><br />
<option>第二项</option>
</datalist>
</form>
<form>
<!--<input> min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。-->
<form action="表单属性.html">
<input type="date" name="data" max="2016-01-01" /><br />
<input type="date" name="data" min="2000-01-01" /><br />
<input type="number" name="quality" min="1" max="5"/><br />
<input type="submit" />
</form>
<!--multiple 属性是一个 boolean 属性.
multiple 属性规定<input> 元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file。: email, and file.-->
<form action="myindecx.html">
<input type="file" name="file" multiple="multiple" />
<input type="submit" />
<p>上传文件</p>
</form>
<form>
<!--pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。-->
<!--注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.-->
<input type="text" name="coudg_code" pattern="[a-z]{3}"/>
<input type="submit" />
</form>
<form action="表单属性.html">
<!--
作者：137973550@qq.com
时间：2016-04-21
描述：step 属性为输入域规定合法的数字间隔。
如果 step="3"，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值.
注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
-->
<input type="month" name="count" step="3" />
<input type="submit" />
</form>
<video width="500px" height="500px" autoplay="autoplay">
<source src="welcome.mp4" type="video/mp4">
</source>
</video>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
