微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML5 form标签新增属性

1.判断浏览器的版本的方法,要放到头部,小于ie8的可以通过引入html5.js来支持部分html5的操作

<!-- [if lt IE9]> //lt 表示小于 <script src="html5.js"> <![endif] -->

2.input中form属性的使用,可以使标签放在form之外,有利于布局,通过form属性指定form,目的就是讲表单项写在表单外面。

<form id="login" action="login.PHP" method="get">
</form>
<input form="login" type="'text" name="username" value="admin" /><br>

3.form里面的input标签支持新增的属性formaction,formmethod。
用于指定form里面的action和method。使用场景:如一个form表单里面,有三个提交按钮,但是都是提交到form里的action对应的PHP方法的,通过form表单设置的method来进行post或者get操作,都是同一个,然后PHP脚本只能通过name来判断你是哪个标签,现在加了这两个属性,可以每个提交按钮都提交到指定的action用指定的method了。
下面例子的效果就是,点击通过按钮,会通过get方法提交到b.PHP页面,点击不通过按钮会通过post方式提交到c.PHP页面

<form id="login" action="login.PHP" method="get">
</form>
<input form="login" formaction="b.PHP" formmethod="get" type="submit"  name="dosubmit" value="通过" />
<input form="login" formaction="c.PHP" formmethod="post" type="submit"  name="dosubmit" value="不通过" />

4.placeholder标签,设置提示

<input type="text"  name="dosubmit" placeholder="提示语" />

4.autofocus标签,表示进入页面后光标认位置,下面的例子进去后,光标就会到通过的input里了

<input type="text"  name="dosubmit" value="通过" autofocus/>
<input type="text"  name="dosubmit" value="不通过" />

5.autocomplete标签,这个标签可以通过autocomplete=”on”打开,autocomplete=”off”关闭,主要是input输入的时候要不要显示提示列表

<input form="login" type="'text"  name="username" value="admin" autocomplete="off" /><br>

然后可以用list标签,和datalist一起使用,提供用户自动填写信息

<input type="'text" list="listtest" name="username" value="admin" autocomplete="off" /><br>
<datalist id="listtest">
    <option>11111</option>
    <option>22222</option>
    <option>33333</option>
    <option>44444</option>
</datalist>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。