HTML5表单元素的新增属性

作者: 大春春 | 来源:发表于2017-05-14 10:39 被阅读243次

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:


相关文章

  • h5表单

    html5 表单 新增input类型 新增表单元素 html5表单验证 新增表单属性 新增的input类型 inp...

  • 02.HTML5表单新增的元素与属性

    表单新增的属性 1.form属性 HTML4中,表单内的从属元素必须书写在表单内部,而在HTML5中,可以把他们书...

  • HTML5详解

    01-HTML5新增语义化标签 HTML5语义化标签的兼容 HTML5新增表单控件和表单属性 HTML5表单验证反...

  • HTML5和CSS3提高

    视频 播放 html5新增input类型 新增表单属性 required required 表单不能为空pl...

  • 智能表单

    智能表单元素 新增input表单元素类型 新增表单元素属性 配合datalist标签能实现自动补全的效果

  • HTML5 表单元素

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性。 本章介绍以下新的表单元素: datali...

  • HTML5表单自动验证

    在html5 中,在增加了大量的表单元素与属性的同时,也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证...

  • HTML5新增元素

    HTML5新增元素 类别元素构建页面的语义元素 用于标识文本的语义元素 web表单 ...

  • 增强的表单Form功能

    所有元素必须放到表单form中或者指定form属性 新增属性 表单内部,可省略form属性 formaction属...

  • 表单的自动完成功能

    HTML5 中表单新增属性 autocomplete 。 在编写表单结构的时候,多次在input输入提交。在下次输...

网友评论

本文标题:HTML5表单元素的新增属性

本文链接:https://www.haomeiwen.com/subject/ayrxxxtx.html