input輸入框type參數

今日閒來無事,把所有的輸入框type屬性都試了一遍。
一共呢,是有23個參數。

<form action="">
<input type="text" placeholder="1">//純文本輸入框
<input type="button" placeholder="2">//轉換成按鈕
<input type="checkbox" placeholder="3">//轉換成勾選框
<input type="color" placeholder="4">//顏色選擇器
<input type="date" placeholder="5">//日期選擇,年月日
<input type="datetime" placeholder="6">//貌似沒變化,依舊是純輸入框
<input type="datetime-local" placeholder="7">//日期選擇精細版,年月日時分
<input type="email" placeholder="8">//郵箱輸入框,使用form表單提交時能識別正確郵箱格式
<input type="file" placeholder="9">//文件選擇器
<input type="hidden" placeholder="10">//隱藏輸入框
<input type="image" placeholder="11">//可以放圖片的表單提交按鈕??
<input type="month" placeholder="12">//日期的選擇,年和月
<input type="number" placeholder="13">//數字輸入框,只能輸入數字,但可以輸入小數點,還有大小寫Ee,小數點可以理解,e是幹嘛用的?有人能告訴我嗎?
<input type="password" placeholder="14">//如字面意思,這是經常用到的密碼框
<input type="radio" placeholder="15">//那個圓圈單選框
<input type="range" placeholder="16">//跟調音量的那條直線差不多,可以來回走動的,調試什麼百分比應該會用到
<input type="reset" placeholder="17">//表單重置
<input type="search" placeholder="18">//專爲搜索定製的搜索框
<input type="submit" placeholder="19">//表單提交
<input type="tel" placeholder="20">//這個沒試出來有什麼特別
<input type="time" placeholder="21">//時間選擇,時與分
<input type="url" placeholder="22">//網址輸入框,表單提交時識別是否爲正確網址
<input type="week" placeholder="23">//這個選擇時間的,選擇哪一年和第幾個星期
</form>

在這裏插入圖片描述
突然發現,記熟這些參數能讓自己寫界面的時候省下很多的功夫,像什麼數字框,網址框,郵箱框,不過這些框要用form表單提交它會去識別和提醒,不用form表單的話是沒有效果的。
在這裏插入圖片描述
唉,我以前都是用正則來判斷的…麻煩的要死…

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章