HTML5 表单元素的属性

最新推荐文章于 2021-06-26 10:19:35 发布

老姜一不小心

最新推荐文章于 2021-06-26 10:19:35 发布

阅读量154

点赞数

分类专栏： html笔记文章标签： html5 元素表单不能为空设置 input 输入时间

原文链接：https://zhuanlan.zhihu.com/p/26963712

版权

3 篇文章 0 订阅

订阅专栏

email（邮箱输入框，focus后在手机输入版中会有@字符）

url（网址输入框，focus后在手机输入版中会有.com字符）

tel（电话输入框，focus后自动弹出数字输入板）

number（数字输入框）

时间选择（年月日）
：年月日
：年月
：年月星期
：时分秒
：年月日时分秒（UTC时间）
：年月日时分秒（本地时间）
PS：以上的input类型基本只有谷歌和Opera浏览器是完全支持的，datetime类型谷歌浏览器不兼容

1.color：选取颜色，点击可以弹出调色板

2.range：选取数值范围，有max和min两个属性（不填写则默认为0到100）

3.search：search类型和普通输入框很相像，但是当有值输入的时候，会多出一个可以点选删除的叉叉

autocomplete：是否自动补全（该属性有两个值，on/off，默认是on），该属性也可以用在所有input标签中

autofocus：在页面刚载入时，焦点放在哪个输入框上，（该属性有一个值autofocus，只填写属性不填写值也能生效），可以用于所有input标签中，当页面中有多个autofocus时，只有自上而下第一个使用该属性的标签生效

multiple：输入多个值，只适用于file和email类型的input，语法multiple=‘multiple’，或者只写一个multiple属性也有效果

file：在type='file’中，使用multiple属性后，选取文件可以按住ctrl键同时选取多个文件（在此吐槽一下狗爹的网页文件上传只能一个一个上传，恶心死.）

email：在type='email’中，使用multiple属性后，可以在一个输入框中填写多个邮箱地址（用分号分隔），然后传输过去后台，后台会识别这是多个邮箱地址（数组）而不是一个邮箱地址

required：input填写该属性后，表单提交时会对该input做简单的校验，不能为空并且需要必须的字段

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：

<body>
<ol start='5'> 
	  <lix</li>
	  <lix</li>
	  <lixs/li>
	  <lix/li>
	  <lix/li>
</ol>
</body>

5>6>7>8>9

reversed：

<body>
<ol reversed> 
	  <lix</li>
	  <lix</li>
	  <lixs/li>
	  <lix/li>
	  <lix/li>
</ol>
</body>

5>4>3>2>1

转载自：https://zhuanlan.zhihu.com/p/26963712

关注