詳解HTML的<input> 標(biāo)簽及其禁用方法

定義和用法
<input> 標(biāo)簽用于搜集用戶信息。
根據(jù)不同的 type 屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。
HTML 與 XHTML 之間的差異
在 HTML 中,<input> 標(biāo)簽沒有結(jié)束標(biāo)簽。
在 XHTML 中,<input> 標(biāo)簽必須被正確地關(guān)閉。
實(shí)例
一個簡單的 HTML 表單,包含兩個文本輸入框和一個提交按鈕:
- <form action="form_action.asp" method="get">
- First name: <input type="text" name="fname" />
- Last name: <input type="text" name="lname" />
- <input type="submit" value="Submit" />
- </form>
其中disabled 屬性規(guī)定應(yīng)該禁用 input 元素。
被禁用的 input 元素既不可用,也不可點(diǎn)擊??梢栽O(shè)置 disabled 屬性,直到滿足某些其他的條件為止(比如選擇了一個復(fù)選框等等)。然后,就需要通過 JavaScript 來刪除 disabled 值,將 input 元素的值切換為可用。
以下三種寫法都可以禁用 input
- <input type="text" disabled="disabled" value="已禁用" />
- <input type="text" disabled="disabled" value="已禁用" />
- <input type="text" disabled="disabled" value="已禁用" />
被禁用的 input 默認(rèn)顯示灰色,可以通過CSS修改樣式。注:IE9及以下無法改變字體顏色
1. 利用CSS3 :disabled 偽元素定義
- //Chrome Firefox Opera Safari
- input:disabled{
- border: 1px solid #DDD;
- background-color: #F5F5F5;
- color:#ACA899;
- }
2. 利用屬性選擇符定義
- //IE6 failed
- input[disabled]{
- border: 1px solid #DDD;
- background-color: #F5F5F5;
- color:#ACA899;
- }
3. 利用class來定義,為要禁用的input增加一個class
- input.disabled{
- border: 1px solid #DDD;
- background-color: #F5F5F5;
- color:#ACA899;
- }
最終結(jié)果:
- //Chrome Firefox Opera Safari IE9+
- input:disabled{
- border: 1px solid #DDD;
- background-color: #F5F5F5;
- color:#ACA899;
- }
- //IE8-
- input[disabled]{
- border: 1px solid #DDD;
- background-color: #F5F5F5;
- color:#ACA899;
- }
- //IE6 Using Javascript to add CSS class "disabled"
- * html input.disabled{
- border: 1px solid #DDD;
- background-color: #F5F5F5;
- color:#ACA899;
- }
注意:IE8 bug
由于IE8 不識別 :disabled 導(dǎo)致input[disabled],input:disabled樣式失效,可以考慮單獨(dú)來寫,或者直接使用input[disabled]。;IE9及以下無法改變字體顏色。
相關(guān)文章
HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別簡介
這篇文章主要介紹了HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別,是網(wǎng)頁前端編程入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-11-07- HTML5引入的新標(biāo)簽有一些有趣的屬性,例如poster、autofocus、onerror、formaction、oninput,這些屬性都可以用來執(zhí)行javascript,這會導(dǎo)致XSS和CSRF跨域請求偽造。對這方2015-09-27
- 這篇文章主要介紹了HTML5中audio標(biāo)簽的使用,在各瀏覽器中添加音頻播放控件,需要的朋友可以參考下2015-09-24
- 這篇文章主要介紹了詳解HTML5中ol標(biāo)簽的用法,是HTML5入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-09-08
詳解HTML的style標(biāo)簽以及相關(guān)的CSS引用
這篇文章主要介紹了詳解HTML的style標(biāo)簽以及相關(guān)的CSS引用,是HTML和CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-27- 這篇文章主要介紹了HTML中Li標(biāo)簽的使用示例,主要用來讓文章標(biāo)題和日期等左右對齊,需要的朋友可以參考下2015-07-13
HTML5 video標(biāo)簽(播放器)學(xué)習(xí)筆記(二):播放控制
這篇文章主要介紹了HTML5 video標(biāo)簽(播放器)學(xué)習(xí)筆記(二):播放控制,本文講解了獲取影片總時長、播放、暫停、獲取影片的播放時間和設(shè)置播放點(diǎn)、音量的獲取和設(shè)置等內(nèi)容,2015-04-24- 這篇文章主要介紹了HTML頁面中添加Canvas標(biāo)簽示例,本文直接給出示例代碼,并講解了一些重要屬性和js訪問方法,需要的朋友可以參考下2015-01-01
常用HTML meta 標(biāo)簽屬性(網(wǎng)站兼容與優(yōu)化需要)
標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上,但是對于機(jī)器是可讀的。它可用于瀏覽器(如何顯示內(nèi)容或重新加載頁面),搜索引擎(關(guān)鍵詞),或其他 web 服務(wù)2014-12-27HTML常用標(biāo)簽大全及html標(biāo)簽的特點(diǎn)
本篇文章給大家整理些關(guān)于html常用標(biāo)簽大全及html標(biāo)簽的特點(diǎn),希望對大家學(xué)習(xí)html相關(guān)知識有所幫助,感興趣的朋友一起學(xué)習(xí)吧2015-11-19