最近學(xué)習(xí)HTML的過程中遇到了input標(biāo)簽隧出,作為一名前端初級學(xué)習(xí)者蜡豹,其實(shí)我是不太了解的。既然不懂的話,就得深入的去了解伪朽。那么,什么是input標(biāo)簽?zāi)兀?/p>
1.?input標(biāo)簽用于搜集用戶信息痛阻。
根據(jù)不同的 type 屬性值靖秩,輸入字段擁有很多種形式。輸入字段可以是文本字段鱼响、復(fù)選框鸣剪、掩碼后的文本控件、單選按鈕丈积、按鈕等等筐骇。
2.HTML 與 XHTML 之間的差異
在 HTML 中,input標(biāo)簽沒有結(jié)束標(biāo)簽江滨。
在 XHTML 中铛纬,input標(biāo)簽必須被正確地關(guān)閉。
3.HTML5 中的新屬性唬滑。
4. input標(biāo)簽支持HTML的全局屬性
5. input標(biāo)簽支持HTML的事件屬性
6.標(biāo)簽類型 (type):
說明:所有主流瀏覽器都支持 type 屬性饺鹃,但是并非所有主流瀏覽器都支持所有不同的 input 類型。
text:默認(rèn)间雀。定義一個(gè)單行的文本字段悔详。(默認(rèn)寬度為20)
password:定義密碼字段。(字符會被遮蓋)
checkbox:復(fù)選框(checked屬性:是否選中)
radio:單選框(name屬性:指定多個(gè)單選框的在一個(gè)區(qū)域里進(jìn)行單選操作)
button:定義普通按鈕惹挟。常用于與JS一起啟動(dòng)腳本茄螃。(value屬性:button按鈕顯示的文本)
reset:定義重置按鈕(清除文本區(qū)域內(nèi)容,重置所有表單值為默認(rèn)值)
submit:定義提交按鈕连锯。
hide:定義隱藏輸入字段归苍。(存放僅用于自己使用的信息)
file:定義輸入字段和 "瀏覽"按鈕用狱,供文件上傳。
image:定義圖像形式的提交按鈕拼弃。
以下類型為 HTML5 新增 type 類型:
email:在提交表單時(shí)會自動(dòng)驗(yàn)證email的格式是否正確,格式不正確瀏覽器是不允許提交的夏伊。opera瀏覽器中必須有name屬性,否則不起作用吻氧。
url:在提交表單時(shí)會自動(dòng)驗(yàn)證url的格式溺忧。Opera中會自動(dòng)在開始處添加http://.
number:可以限制輸入的數(shù)字,若未輸入則會拋出一個(gè)錯(cuò)誤盯孙。(step為上一個(gè)數(shù)字與下一個(gè)數(shù)字的間隔)
range:此類型將顯示一個(gè)可拖動(dòng)的滑塊條鲁森,能夠選擇性的對限制范圍內(nèi)的數(shù)值進(jìn)行設(shè)置。拖動(dòng)時(shí)會反饋給value一個(gè)值.
search:此類型表示輸入的將是一個(gè)搜索關(guān)鍵字振惰。
color:?此類型表單可讓選擇顏色值,并反饋到value中.
telephone:此類型可輸入一個(gè)電話號碼歌溉。
Date pickers (date, month, week, time, datetime, datetime-local):(?供選取日期和時(shí)間?)
date - 選取日、月骑晶、年
month - 選取月痛垛、年
week - 選取周和年
time - 選取時(shí)間(小時(shí)和分鐘)
datetime - 選取時(shí)間、日桶蛔、月匙头、年(UTC 時(shí)間)
datetime-local - 選取時(shí)間、日羽圃、月、年(本地時(shí)間)
參考資料:
1.W3C
2. Mr.Think博客