HTML5表单元素的新增属性

时间 2019-11-08

标签 html5 html 表单元素新增属性栏目 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/requiredbash

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/olasync

script标签新增属性 async和defer（异步加载外部js文件，可解决外部js放置在头部致使的白屏问题）不一样点： async：何时加载完js何时执行 defer：全部资源加载完后再执行jsui
ol新增属性 start（起始值）和reversed（倒序排列），注意，reversed的倒叙并不会使内容也倒叙，只是ol自带的序号倒叙 start： url

reversed：