2020-2-20 seo达人
h5新增的表单标签
原创weixin_46366721 最后发布于2020-02-29 12:27:39 阅读数 13 收藏
展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/ 谷歌 /
input::-webkit-input-placeholder{
color:blue;
}
/ 火狐19+ /
input::-moz--input-placeholder{
color:blue
}
/ 火狐4-18 /
input:-moz-input-placeholder{
color:blue;
}
/ ie高版本，ie+ /
input::-ms-input-placeholder{
color:blue;
}
/ 欧鹏 /
input::-o-input-placeholder{
color:blue;
}
</style>
</head>
<body>
<form action="" novalidate>
<input type="email">
<input type="submit">
<br>
<input type="url">
<input type="submit">
<br>
<input type="range">
<input type="submit">
<br>
<input type="number">
<input type="submit">
<br>
<input type="search">
<input type="submit">
<br>
<input type="color">
<input type="submit">
<br>
<input type="time">
<br>
<input type="month">
<br>
<input type="week">
<br>
<!-- <input type="datetime-local> -->
<input type="date">
<br>
<!-- <input type="text" required>
<input type="submit"> -->
<br>
<input type="number" step="3">
<input type="submit">
<br>
<input type="text" name="aa" autocomplete="off">
<input type="submit">
<br>
<input type="text" value="" placeholder="请输入您的姓名：" autofocus>
<input type="submit">
<br>
<input type="text" placeholder="请输入您的手机号：" pattern="^1[3|5|8]\d{9}$">
<input type="submit">
<br>
<input type="file" multiple>
<br>
<input type="url" list="lll">
<datalist id="lll">
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.sina.com" label="新浪"></option>
</datalist>
<input type="submit">
</form>
</body>
</html>
h5新增type类型：
Type=“email” 限制用户必须输入email类型
Type=“url” 输入的网址前面必须加上http://
Type=“range” 产生一个滑动条表单
Type=“number” 必须输入的是数字，调整数字大小(谷歌浏览器输入字母不可以，但是可以输入e；火狐可以输入字母，不能提交)
Type=“search” 产生一个搜索意义的表单（火狐浏览器没有叉号，谷歌有）
Type=“color” 生成一个颜色选择的表单；
产生很大的兼容问题：
type=“time” 限制用户必须输入时间类型
type=“month” 限制用户必须输入月份类型（火狐浏览器不显示）
type="week"限制用户必须输入周类型
type="datetime-local"选取本地时间
type=“date”
新增表单属性：
required 检测是否为空；
min:最小值
max：最大值
step：数值增加的幅度； 如果输入的是step=“3”,搜索框输入2，按住上键调的话，会是3，因为法定值：-3 0 3 6 9
autocomplete是否自动提示信息 on（默认值）off;和name="" 一起使用；
placeholder：文本框的提示信息(value的值得手动删除，而placeholder不用删除，可以直接输入内容)
autofocus：自动聚焦，一个页面只能存在一个聚焦（auto：自动）
pattern：后面的属性值是一个正则表达式
//手机号验证pattern=“^1[3][5]\d{9}$”
novalidate：取消验证，放在form里面
multiple:选择多个文件上传
list:提示信息；必须结合datalist标签，绑定datelist (谷歌提示value和label，而火狐只有label提示)
h5:新增的表单标签
datalist
option
output:计算结果输出、脚本的输出