Html5中的表单新增属性2

该博客记录了Form表单相关知识。包含autofocus属性,multiple使文件上传控件可多选,required让文本框提交前必填且可加正则校验。还介绍了表单标签属性,如novalidate可控制提交时是否验证及是否有自动完成功能。

1)autofocus属性

<input type="text" autofocus="autofocus"/>

2)multiple:用于文件上传控件,设置此属性后,允许上传多个文件。

3)required:文本框在提交前必须有数据输入。添加pattern:正则表达式的校验

input type="text" autofocus="autofocus" required pattern="\d+" />

4)Form表单标签属性

(1)novalidate :提交表单时候不应该验证form或input区域
(2)novalidate:规定form或input区域应该拥有自动完成功能

代码笔记:

<body>
<!--
placeholder:在文本框中显示字段
autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s" placeholder="海贼王" autofocus="true">
<input type="button" name="" value="搜索">

<br>
<!--
novalidate:在控件中加入了required、emial、url等验证后,如果想让这些验证失效,可以在表单中将novalidate设置为true
-->
<form action="${page}" method="post" accept-charset="utf-8" id="form1" novalidate="true">
 <!--
required:必填
autocomplete:在网页的文本框中输入部分内容或者双节时,经常会看到在下面显示输入过的内容,
这就是html5的新特性:自动完成,如果不想使用此功能,将其设置为off即可
-->
 <input type="text" name="UserName" value="" required autocomplete="off" autofocus="autofocus"/>
 <br>
 <!--
multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使用鼠标选中多个文件进行上传
 -->
 选择文件
 <input type="file" name="upload" value="" multiple="multiple">
 <br>
 <!--
list:这个属性要和datalist元素一起使用,指定此文本框的可选择项,另外其相较于select的优点在于还可以输入
 -->
 区号:
 <input type="text" name="age" value="" list="list1">
 <br>
 <datalist id="list1">
 <option value="0312">深圳</option>
 <option value="0311">上海</option>
 <option value="010">北京</option>
 <option value="0313">唐山</option>
 </datalist>
 <!--
formaction:可以更改点击此按钮式提交到服务器的处理程序
formmethod:可以更改向服务器提交数据的方式
 -->
 <input type="submit" name="subsave" value="提交">
 <input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
</form>
</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值