HTML5表单元素的新增属性

Input标签(类型属性)

email/url/range/number/search/color/tel/时间选择/针对PC端的其它类型(除了number和时间选择外,其它的类型都只有在手机端的输入板有效果)

  • email(邮箱输入框,focus后在手机输入版中会有@字符)
    <input type="email">
  • url(网址输入框,focus后在手机输入版中会有.com字符)
    <input type='url'>
  • tel(电话输入框,focus后自动弹出数字输入板)
    <input type="tel" name='tel'>
  • number(数字输入框)
    <input type="number" name='number'>
    PC端显示(只有数字、运算符和字母e可以作为自然数的常数可以输入):

    移动端输入板显示:
  • 时间选择(年月日)
    <input type="date">             :年月日
    <input type="month">          :年月
    <input type="week">           :年月星期
    <input type="time">             :时分秒
    <input type="datetime">      :年月日时分秒(UTC时间)
    <input type="datetime-local">:年月日时分秒(本地时间)
PS:以上的input类型基本只有谷歌和Opera浏览器是完全支持的,datetime类型谷歌浏览器不兼容

效果图:



此外还有选项框等:



手机端效果都是以滚轮的形式呈现的:
例如datetime-local类型
  • 其它类型:(color、range、search)
    1.color:选取颜色,点击可以弹出调色板
    <input type="color">

    2.range:选取数值范围,有max和min两个属性(不填写则默认为0到100)
    <input type="range" max='20' min='0' value='20'>

    3.search:search类型和普通输入框很相像,但是当有值输入的时候,会多出一个可以点选删除的叉叉
    <input type="search">

表单属性

autocomplete/autofocus/multiple/required

  • autocomplete:是否自动补全(该属性有两个值,on/off,默认是on),该属性也可以用在所有input标签中
  • autofocus:在页面刚载入时,焦点放在哪个输入框上,(该属性有一个值autofocus,只填写属性不填写值也能生效),可以用于所有input标签中,当页面中有多个autofocus时,只有自上而下第一个使用该属性的标签生效
  • multiple:输入多个值,只适用于file和email类型的input,语法multiple='multiple',或者只写一个multiple属性也有效果
    1.file:在type='file'中,使用multiple属性后,选取文件可以按住ctrl键同时选取多个文件(在此吐槽一下狗爹的网页文件上传只能一个一个上传,恶心死.)



    2.email:在type='email'中,使用multiple属性后,可以在一个输入框中填写多个邮箱地址(用分号分隔),然后传输过去后台,后台会识别这是多个邮箱地址(数组)而不是一个邮箱地址


  • required:input填写该属性后,表单提交时会对该input做简单的校验,不能为空并且需要必须的字段
    例如:
    <input type='text' required>

    <input type='email' required>

链接属性

link的sizes属性/base对的target属性

  • sizes(主要用于link中的网页图标进行大小的控制,如下图图标)


  • base标签(放置在head标签中)中的target(可以控制整个网页中a链接打开新窗口。也可以控制a链接跳转的页面)
    例如:a链接在新窗口中打开百度
 <head>
    <base href='https://www.baidu.com/' target='_blank'>
</head>
<body>
    <a href>aaa</a>
</body>

其他属性

script/ol

  • script标签新增属性
    async和defer(异步加载外部js文件,可解决外部js放置在头部导致的白屏问题)
    不同点:
    async:什么时候加载完js什么时候执行
    defer:所有资源加载完后再执行js

  • ol新增属性
    start(起始值)和reversed(倒序排列),注意,reversed的倒叙并不会使内容也倒叙,只是ol自带的序号倒叙
    start:



    reversed:


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

推荐阅读更多精彩内容

  • HTML5 新的表单元素 HTML5 有以下新的表单元素: < datalist> 注意:不是所有的浏览器都支持H...
    hx永恒之恋阅读 610评论 0 2
  • <input type=> text:在表单中输入字母、数字等内容,默认宽度为20字符 radio:单选按钮 ch...
    梨啊梨阅读 579评论 0 0
  • html5新增了许多表单属性。这里主要分为 属性和 属性,当然还有关于checkbox的和label标签的属性我们...
    便U_Life阅读 2,071评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,633评论 18 139
  • 曾香香阅读 112评论 0 0