2018-05-14

h5新特性

一.表单元素的补充

1.电子邮箱:<input type="email" name="表单元素名称" placeholder="提示文字",自动校验

2.网址:<input type="url" name="表单元素名称" placeholder="提示文字">,自动校验

3.电话:<input type="tel" name="表单元素">,自动校验

4.数量1:<input type="number" name="表单元素名称" min="最小值" max="最大值" step="步长">

5.数量2:<input type="range" name="表单元素名称" min="最小值" max="最大值" step="步长值">

6.搜索框:<input type="search" name="表单元素名称">

7.日期和时间类额表单元素(没有完全被兼容)

(1)包含日期和时间:<input type="datetime-local" name="表单元素名称">

(2)包含日期:<input type="date" name="表单元素名称">

(3)包含时间:<input type="time" name="表单元素名称">

(4)包含年、月:<input type="month" name="表单元素名称">

(5)包含年、周<input type="week" name="表单元素名称">

8.<optgroup></optgroup>标签:作用是对select中的option选项进行分组,包含的属性为label,属性值为分组的标题名称,格式如下

<optgroup></optgroup>标签格式

9.<datalist></datalist>标签:该标签的作用是可以让文本框有选项列表,使用时需要和文本框结合使用,格式如下

<datalist></datalist>

10.<button></button>标签:作用是在页面中插入按钮,如果要在该按钮上显示文字,那么需要将文字写在开始标签和结束标签间,如<button>提示文字</button>,该按钮默认的功能是提交数据,包含的属性为type,属性值为submit(默认),reset,button

11.<details></details>标签:用来描述文档某个部分的细节(简单说就是可以折叠和展示某个部分),包含的属性为open,属性值为open,该属性的作用是设置文档的某个部分默认为显示状态,details中可以包含一个子标签,即<summary></summary>标签,该标签的作用是设置标题

12.<video></video>标签:作用是在页面中插入视频,支持的视频格式为MP4、WebM、Ogg,包含的属性为

(1)width:设置宽度,属性值可以是像素值或百分比,注意会等比例缩放

(2)height:设置高度,属性值为像素值或百分比

(3)src:设置视频文件的地址路径

(4)controls:显示控制面板,默认不显示,属性名和属性值相同

(5)autoplay:自动放映,属性名和属性值相同

(6)loop:循环放映,属性名和属性值相同

(7)poster:视频播放前显示一个图像,属性值为图像所在的路径

13.<audio></audio>标签:作用是在页面中插入音频,支持的格式为MP3、Wav、Ogg,包含的属性为

(1)src:设置音频路径

(2)autoplay:自动播放

(3)controls:显示控制面板

(4)loop:循环播放

二.表单新增的属性

1.required属性:作用是设置必填效果

2.placeholder属性:设置提示文字,它和value的区别是

(1)value和placeholder都可以设置提示文字,placeholder是新的属性,IE中不支持,而value是早期就有的属性

(2)如果value和placeholder同时存在,那么value的值优先显示

(3)value的值可以提交到服务器,但是placeholder的值不会提交到服务器

3.autofocus:自动获得焦点,属性值和属性名相同

4.accesskey:通过设置组合键,使表单元素获得焦点,属性值为键盘上按键的名称,如accesskey=”A”,当按Alt+A键时可以获得焦点

5.tabindex:设置当按Tab键时光标的跳转顺序,属性值为数值,跳转时从小到大跳转

6.autocomplete:设置是否开启自动记忆功能,属性值为on(默认,开启)、off(关闭)

7.pattern:通过设置正则表达式,对输入的内容进行验证,如<input type="text" name="user" patter="^\d{4}$">

8.form属性:页面中如果需要将位于标签外面的表单元素和form标签关联起来,那么就可以使用form属性了,格式

form属性

9.novalidate:该属性的作用是在表单提交时不验证表单元素中添加的数据是否符合格式要求,属性值和属性名相同,注意该属性值是<form>标签的属性
10.表单重写属性:该属性添加到提交按钮上
(1)formaction:重写form的action地址
(2)formmethod:重写form的method方式
(3)formtarget:重写form的target方式

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,579评论 18 139
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,820评论 0 0
  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架,建立于...
    Hsinwong阅读 22,295评论 1 92
  •   JavaScript 最初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。   尽管目前的...
    霜天晓阅读 656评论 0 3
  • 老大说:“走完武功山,你就可以算头驴了。” ——题记 第一次听到武功山的名字是2015年走徽杭古道的时候,领队兔兔...
    charlene_xl阅读 776评论 1 7