2020-2-20 seo達(dá)人
h5新增的表單標(biāo)簽
原創(chuàng)weixin_46366721 最后發(fā)布于2020-02-29 12:27:39 閱讀數(shù) 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="請(qǐng)輸入您的姓名：" autofocus>
<input type="submit">
<br>
<input type="text" placeholder="請(qǐng)輸入您的手機(jī)號(hào)：" 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” 輸入的網(wǎng)址前面必須加上http://
Type=“range” 產(chǎn)生一個(gè)滑動(dòng)條表單
Type=“number” 必須輸入的是數(shù)字，調(diào)整數(shù)字大小(谷歌瀏覽器輸入字母不可以，但是可以輸入e；火狐可以輸入字母，不能提交)
Type=“search” 產(chǎn)生一個(gè)搜索意義的表單（火狐瀏覽器沒有叉號(hào)，谷歌有）
Type=“color” 生成一個(gè)顏色選擇的表單；
產(chǎn)生很大的兼容問題：
type=“time” 限制用戶必須輸入時(shí)間類型
type=“month” 限制用戶必須輸入月份類型（火狐瀏覽器不顯示）
type="week"限制用戶必須輸入周類型
type="datetime-local"選取本地時(shí)間
type=“date”
新增表單屬性：
required 檢測(cè)是否為空；
min:最小值
max：最大值
step：數(shù)值增加的幅度； 如果輸入的是step=“3”,搜索框輸入2，按住上鍵調(diào)的話，會(huì)是3，因?yàn)榉ǘㄖ担?3 0 3 6 9
autocomplete是否自動(dòng)提示信息 on（默認(rèn)值）off;和name="" 一起使用；
placeholder：文本框的提示信息(value的值得手動(dòng)刪除，而placeholder不用刪除，可以直接輸入內(nèi)容)
autofocus：自動(dòng)聚焦，一個(gè)頁面只能存在一個(gè)聚焦（auto：自動(dòng)）
pattern：后面的屬性值是一個(gè)正則表達(dá)式
//手機(jī)號(hào)驗(yàn)證pattern=“^1[3][5]\d{9}$”
novalidate：取消驗(yàn)證，放在form里面
multiple:選擇多個(gè)文件上傳
list:提示信息；必須結(jié)合datalist標(biāo)簽，綁定datelist (谷歌提示value和label，而火狐只有l(wèi)abel提示)
h5:新增的表單標(biāo)簽
datalist
option
output:計(jì)算結(jié)果輸出、腳本的輸出
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net