您当前位置:首页 > 文章中心 > HTML5+CSS3 > HTML5

HTML5 新的表单元素

稿件来源: 互联网   撰稿作者: 太阳光   发表日期: 2013-10-07   阅读次数: 161   查看权限: 游客查看

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>

 

关键词: html5,form,表单输入   编辑时间: 2013-10-08 8:57:10

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐