狠色狠色狠狠色综合久久,国产第一页浮力影院入口,刺激性视频黄页,日本强伦片中文字幕免费看 黄色综合,91.cn国产大片,亚洲日韩视频在线观看

h5新增的表單標(biāo)簽

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 檢測是否為空;



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é)果輸出、腳本的輸出


日歷

鏈接

個(gè)人資料

存檔