本文探讨了HTML5中input标签的各种type属性，如color、date、email等，用于实现不同类型的字段验证。同时，通过CSS的:invalid选择器，当输入值不符合要求时，可以设置input元素的样式，例如显示为红色边框，从而实现视觉上的错误提示。
本文主要介绍H5的input标签type自带属性校验，以及输入框自带校验样式。
一、type的属性如下：
color（定义拾色器）
date（定义日期字段）
datetime（定义日期字段）
datetime-local（定义日期字段）
month（定义日期字段的月）
week（定义日期字段的周）
time（定义日期字段的时、分、秒）
email（定义用于 e-mail 地址的文本字段）
number（定义带有 spinner 控件的数字字段）
range（定义带有 slider 控件的数字字段）
search（定义用于搜索的文本字段）
tel（定义用于电话号码的文本字段）
url（定义用于 URL 的文本字段）
二、CSS :invalid 选择器
如果 input 元素中的值是非法的，设置样式为红色：
input:invalid
{
border:2px solid red;
}
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input:invalid
{
border:2px solid red;
}
</style>
</head>
<body>
订阅专栏 解锁全文
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
