input 標(biāo)簽詳解

最近學(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博客

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抖剿,一起剝皮案震驚了整個(gè)濱河市朽寞,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌斩郎,老刑警劉巖脑融,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異缩宜,居然都是意外死亡肘迎,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進(jìn)店門锻煌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來妓布,“玉大人,你說我怎么就攤上這事宋梧∠徽樱” “怎么了?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵捂龄,是天一觀的道長释涛。 經(jīng)常有香客問我加叁,道長,這世上最難降的妖魔是什么唇撬? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任它匕,我火速辦了婚禮,結(jié)果婚禮上窖认,老公的妹妹穿的比我還像新娘豫柬。我一直安慰自己,他們只是感情好耀态,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布轮傍。 她就那樣靜靜地躺著,像睡著了一般首装。 火紅的嫁衣襯著肌膚如雪创夜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天仙逻,我揣著相機(jī)與錄音驰吓,去河邊找鬼。 笑死系奉,一個(gè)胖子當(dāng)著我的面吹牛檬贰,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播缺亮,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼翁涤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了萌踱?” 一聲冷哼從身側(cè)響起葵礼,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎并鸵,沒想到半個(gè)月后鸳粉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡园担,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年届谈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弯汰。...
    茶點(diǎn)故事閱讀 40,675評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡艰山,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出咏闪,到底是詐尸還是另有隱情程剥,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站织鲸,受9級特大地震影響舔腾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜搂擦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一稳诚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瀑踢,春花似錦扳还、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至棘劣,卻和暖如春俏让,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背茬暇。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工首昔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人糙俗。 一個(gè)月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓勒奇,卻偏偏與公主長得像,于是被迫代替她去往敵國和親巧骚。 傳聞我的和親對象是個(gè)殘疾皇子赊颠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內(nèi)容

  • <input>:用于收集用戶信息。 根據(jù)不同的 type 屬性值劈彪,輸入字段擁有很多種形式竣蹦。輸入字段可以是文本字段、...
    PYFang閱讀 2,005評論 0 0
  • 標(biāo)簽用于搜集用戶信息粉臊,一般放在 標(biāo)簽下草添,根據(jù)不同的type屬性值驶兜,輸入字段擁有很多種形式扼仲,可以是文本、復(fù)選框抄淑、按鈕...
    饑人谷_Oneleven閱讀 2,127評論 1 2
  • 什么是input屠凶? 標(biāo)簽用于搜集用戶信息。根據(jù)不同的 type 屬性值肆资,輸入字段擁有很多種形式矗愧,輸入字段可以是文本...
    饑人谷_Dylan閱讀 1,224評論 0 50
  • 常用的input標(biāo)簽 button 一個(gè)沒有默認(rèn)行為的推送按鈕 checkbox 一個(gè)被選中的盒子,必須使用val...
    勃王閱讀 424評論 0 0
  • 一、<input>是什么 它在HTML中代表一個(gè)元素(Element),多數(shù)用于表單的互交控件唉韭。input在HTM...
    饑人谷_hak閱讀 1,721評論 0 0