form表单新增的三个属性,form属性,multiple属性,pattern属性。

关于表单的新增属性:

HTML5吸纳了Web Forms2.0标准,大幅度强化了针对表单的功能,使关于表单的开发更快,更方便。其中我学到了三点,感觉挺有用的,特此记录一下。

一.form属性的增强:

在我们的小白的理解中,form表单的控件只能存放在<form></form>之间,也就是说必须将相关的控件元素放在表单的内部。但HTML5中新增了form属性解决了这个问题。

有了这个form属性,我们便可以将表单内的从属元素写在页面的任何一个位置,然后只需要将这个从属元素的form属性指定为表单的ID,切记,在使用时,必须引用所属表单的ID。

例子如下:(就是这么骚)

<form action="#" method="post" id="form1">
    <input type="tel" autofocus/>
    <input type="button" value="提交">

</form>
<input type="text" placeholder="请输入你的名字" form="form1">
<!-- 这个主要是说明了HTML5的新属性,以前的form表单的控件必须要在form的双标签之内,现在的话,不用了,我们可以
脱离form的双标签在别的地方写控件了,只要在控件的末端加上主要的form表单的ID就可以了,如上面的form = form1。-->



二.新增的form属性:multiple:

以上的multiple的中文意思是多重的,多个的意思,想必大家应该知道我想要表达什么了吧,

我们的上传文件功能在以前是只能支持选择单个文件上传,而我们的multiple属性支持选择多个文件同时上传,十分的简单快捷。

<form action="#">
    <input type="file" value="上传文件" multiple><!--multiple支持多个文件的上传,不像之前的file型
                                                 ,只支持单个文件的上传-->
    <input type="button" value="提交">

</form>

注意:在选择文件的时候要按住Ctrl键才能同时选择多个文件


三.新增的pattern属性:

我们将其理解为HTML5的正则表达式

它的作用是用于验证用户输入的内容是否与自定义的正则表达式相匹配,该属性适用于input中的text,search,URL,tel,email,password。

<form action="#" method="post">
    <input type="tel" pattern="^1[3|4|5|7|8][0-9]{9}$" placeholder="请输入您的手机号"
    title="请输入正确的手机号">
    <input type="button" value="提交">
    <!--pattern属性允许用户自定义一个正则表达式,而用户的输入必须符合正则表达式所指定的规则,pattern属性中
    的正则表达式语法与JavaScript中的正则表达式语法相匹配-->

</form>

以上的是为了验证手机号是否输入正确。


  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值