HTML5 新的表单元素

【HTML5】

下载

新闻

文章

HTML5 新的表单元素

<form action="form.asp" method="get">
Name: <input type="text" name="name" dirname="comment.dir" required />
E-mail: <input type="number" name="user_email" />
Homepage: <input type="url" name="user_url" />
Points: <input type="number" name="points" min="1" max="10" step="1" />
Range: <input type="range" name="points" min="1" max="10" />
Month: <input type="month" name="month" />
Week: <input type="week" name="week" />
Time: <input type="time" name="Time" />
Date and time: <input type="datetime" name="datetime" />
Local time: <input type="datetime-local" name="local_time" />
Search: <input type="search" name="search" />
Color: <input type="color" name="color" />
Telephone: <input type="tel" name="tel" />
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
Encryption: <keygen name="security" />
<output id="output"></output>
<input type="submit" />
</form>

autocomplete 是否自动完成。
autofocus 是否自动获取焦点。
required 是否必填写。
placeholder 占位符(灰色提示语)。
pattern 验证输入正侧表达式。
form 定义本输入框属于哪个form表单
dirname dirname="comment.dir"获取书写方向性，ltr或rtlonerror 当发生错误时运行脚本。 onhaschange 当发生变化时运行脚本。
oncontextmenu 当触发上下文菜单时运行脚本。
onformchange 当表单改变时运行脚本。
onforminput 当表单获得用户输入时运行脚本。
oninput 当元素获得用户输入时运行脚本。
oninvalid 当元素无效时运行脚本。

fieldset下的disabled属性
当fieldset的设置disabled属性时，其所有的子控件都被禁用掉了，但不包括legend里的元素。name属性是用来脚本访问的。<form>

    <fieldset name="clubfields" disabled>
        <legend><label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card
        </label></legend>
        <p><label>Name on card: <input name=clubname required></label></p>
        <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
        <p><label>Expiry date: <input name=clubexp type=month></label></p>
    </fieldset>
</form>

form下的novalidate属性
新增属性novalidate的意思是允许form表单不验证即可提交（不用管form里的元素是否有验证条件，例如required, min, max等）。<form action="demo_form.asp" novalidate="novalidate">

  E-mail: <input type="email" name="user_email" />
  <input type="submit" />
</form>

input与button下的新属性
input和button元素新增加了几个新属性（formaction, formenctype, formmethod, formnovalidate和formtarget），如果这些设置这些属性的话，那所对应的form属性值将被覆盖，即input或button所属的form元素的action, enctype, method, novalidate和target属性的值将被覆盖。<form action="demo_form.asp" method="get">

First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" value="Submit" /><br />
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
</form>

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
<input type="submit" formtarget="_blank" value="Submit" />
</form>