1:便于排版的Form表单

HTML5为了方便排版,可以使form的表单标签脱离form的嵌套。

方法:form指定id,所有的标签标签都添加form= id属性。

例如:

<form action="" method="post" id="register"></form>

<input type="text" name="user" value="" form="register" />

<input type="password" name="pwd" value="" form="register" />

2:form新类型

type = "email" 邮箱(自带格式校验)

type = "url"   网址,必须带协议(自带格式校验)

type = "date"  日期选择器

type = "time" 时间选择器

type = "month" 月份选择器

type = "week" 周选择器

type = "number" 数字选择器

type = "range" 滑动条

max属性

step属性(验证合法性) step="2",例如从0开始,只能选择0-2-4-6-8

type = "search" 搜索框

results="n"谷歌浏览器可用,显示搜索图标。

type = "color" 颜色选择器

3:新增的表单属性

required="required" 设置必填项

placeholder = "我是默认值" 设置默认值,不会提交到后台

autofocus = "autofocus" 自动聚焦

pattern="\d{3}" 自定义正则表达式

4:自动填充表单

<input type="text" name="auto" value="" list="movie" />

<datalist id="movie">

<option>人在囧途</option>

<option>车在囧途</option>

<option>泰囧</option>

</datalist>

5:output标签

<form action="" method="post"

oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">

<input type="number" name="no1" value="" />

<input type="number" name="no2" value="" />

<output name="result"></output>

</form>

H5新增的标签总结的更多相关文章

  1. h5新增html标签语义

    H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...

  2. H5新增的标签和属性

    声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...

  3. H5新增的标签以及改良的标签

    1>OL标签的改良 start type  reversed:翻转排序 2>datalist标签自动补全的使用 3>progress标签的使用:进度条 4>meter标签的应用 ...

  4. H5新增input标签

    1.电子邮件 <input type="email" name="email"/> 默认正则:输入内容必须有@符号,@后面必须有内容 2.搜索框 & ...

  5. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  6. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  7. h5废弃的标签和属性及新增的标签和属性

    一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...

  8. H5新增特性之语义化标签

    H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...

  9. H5新增API

    H5新增API 选择器 querySelector()和querySelectorAll(),参数都是css选择器,前者返回符合条件的第一个匹配的元素,如果没有则返回Null,后者返回符合筛选条件的所 ...

随机推荐

  1. java的值传递与引用传递

    一. 经常搞不清楚,当一个对象做为参数传入到方法中时,为啥有时候值能被改变,有时候又不会改变,以下说明原因: 1.当传入的参数,在方法中能被改变的为 引用传递 2.当传入的参数,在方法中没被改变的为 ...

  2. windows系统中软件开发常用的软件

    1.windwos快速打开控制面板:热键+r打开运行框,输入control就打开windows的控制面板了 2.windows自带的远程桌面控制系统:mstsc -Microsoft terminal ...

  3. [Linux]第一部分-认识Linux及Linux主机规划与安装

    ctrl + alt + f1~f6 切换六个终端ctrl + alt + f7 图形化界面 startx 开启x-window桌面 ls -al /root 列出root目录 date日期 +%y/ ...

  4. [ASP.NET]asp.net动态加载用户控件

    用户控件 // 用户控件源码 namespace wzjr.control { public partial class Topic : System.Web.UI.UserControl { pub ...

  5. Android 自己定义View学习(2)

    上一篇学习了基本使用方法,今天学一下略微复杂一点的.先看一下效果图 为了完毕上面的效果还是要用到上一期开头的四步 1,属性应该要有颜色,要有速度 <?xml version="1.0& ...

  6. jQuery取得循环列表的第一列值

    有例如以下的表格: <table class="list_tab" id="personalDetail"> <tr class=" ...

  7. #定位系统性能瓶颈# perf

    perf是一个基于Linux 2.6+的调优工具,在liunx性能測量抽象出一套适应于各种不同CPU硬件的通用測量方法,其数据来源于比較新的linux内核提供的 perf_event 接口 系统事件: ...

  8. 【为小白菜打call】

    作为本校的竞赛生,我必须为我大OJ打call caioj,小白菜oj,顾名思义,就是为刚踏进OI的“小白菜”们准备的网站,里面包含了许多专题内容,各种模版和讲解视频 而且对于刚学习C++的同学,更有帮 ...

  9. UESTC--1264--人民币的构造(数学规律)

    人民币的构造 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit Status D ...

  10. 杂项-公司:YKK

    ylbtech-杂项-公司:YKK YKK的全称为Yoshida Kogyo Kabushikigaisha.YKK是拉链行业的鼻祖,代表着行业标准,因为采用日本精确的工艺,原料和管理方法,YKK价格 ...