订阅博客
收藏博客
微博分享
QQ空间分享

html5 新增常用表单控件属性

频道:前端 标签:笔记 时间:2019年07月15日 浏览:88次 评论:0条
作者: 三只松果


HTML5 的 <form> 和 <input>标签添加了几个新属性. 

<form>新属性:

     autocomplete

     novalidate 

<input>新属性:

    autocomplete 

    autofocus
  form
  formaction 

    formenctype 

    formmethod 

    formnovalidate 

    formtarget 

    height and width 

    list

    min and max

    multiple

    pattern (regexp)

    placeholder

    required
  step


<!--
placeholder:用于在文本框未输入时提示作用 autofocus:用于控件自动获取焦点
-->
<input type="search" name="key" value="" results="s"

placeholder="君乐宝" autofocus="true">
<input type="button" name="" value="搜索">


<!--

novalidate:在控件中加入了required、emial、url等验证后,如果想让 这些验证失效,可以在表单中将novalidate设置为true

-->
<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">

<br/><br/>


<!--
required:必填 autocomplete:在网页的文本框中输入部分内容或者双击时,经常会

看到在下面显示输入过的内容,这就是html5的新特性:自动完成,如果 不想使用此功能,将其设置为off即可

-->

<input type="text" name="UserName" value="" required autocomplete="off">

<br/><br/>


<!--

multiple:在选择文件时,默认只能单选,加上这个属性后,则可以使 用鼠标选中多个文件进行上传

-->
选择文件
<input type="file" name="upload" value="" multiple="multiple"> <br/><br/>


<!--

list:这个属性要和datalist元素一起使用,指定此文本框的可选择 项,另外其相较于select的优点在于还可以输入

-->
区号:
<input type="text" name="age" value="" list="list1"> <br/><br/>
<datalist id="list1">

<option value="0312">保定</option> <option value="0311">石家庄</option> <option value="010">北京</option> <option value="0313">唐山</option>

</datalist> <br/><br/>


<!--
formaction:可以更改点击此按钮式提交到服务器的处理程序 formmethod:可以更改向服务器提交数据的方式
-->
<input type="submit" name="subsave" value="提交"><br/><br/> <input type="submit" name="subresset" value="更改"

formaction="1.php" formmethod="get"> </form>




◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。