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. 【XSY2384】【GDOI2017】微信

    致去年的我:这是道广义SAM模板题啊…… 题意: Description Input Output HINT $1\leq N\leq 20$,$1\leq Q\leq 10^5$,字符串总长$\le ...

  2. el表达式中的比较和包含

    相等( equal ) :eq 不相等( not equal ): ne / neq 大于( greater than ): gt 小于( less than ): lt 大于等于( great th ...

  3. vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]

    后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...

  4. php 将多个txt文件合并成

    function test() { $hostdir= iconv("utf-8","gbk","C:\Users\原万里\Desktop\日常笔记& ...

  5. Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

    转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherlock ...

  6. DB-MySQL:MySQL 复制表

    ylbtech-DB-MySQL:MySQL  复制表 1.返回顶部 1. MySQL 复制表 如果我们需要完全的复制MySQL的数据表,包括表的结构,索引,默认值等. 如果仅仅使用CREATE TA ...

  7. 17.UNP第一章 简介

    获取时间的客户端代码: //客户端程序 #include "unp.h" int main(int argc, char **argv) { int sockfd, n; ]; s ...

  8. 如何用写js弹出层 ----2017-03-29

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. CentOS 7 NAT模式上网配置

    一 VMware 配置 在“编辑”选项卡中,选择“虚拟网络编辑器”,如下图: 选择VMnet8,修改子网IP与子网掩码,注意不要给“使用本地DHCP服务将IP地址分配给虚拟机”选项打勾,如下图: 点击 ...

  10. 浅谈javascript的面向对象思想

    面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...