欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解HTML的<input> 標簽及其禁用方法

WEB前端開發(fā)   發(fā)布時間：2015-08-05 18:10:49   作者：佚名   我要評論
這篇文章主要介紹了詳解HTML的input標簽及其禁用方法,歸納了幾種CSS中使用disabled屬性實現(xiàn)禁用的方法,需要的朋友可以參考下

定義和用法
<input> 標簽用于搜集用戶信息。
根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
HTML 與 XHTML 之間的差異
在 HTML 中，<input> 標簽沒有結束標簽。
在 XHTML 中，<input> 標簽必須被正確地關閉。
實例
一個簡單的 HTML 表單，包含兩個文本輸入框和一個提交按鈕：

XML/HTML Code復制內容到剪貼板
  1. <form action="form_action.asp" method="get">  
  2.   First name: <input type="text" name="fname" />  
  3.   Last name: <input type="text" name="lname" />  
  4.   <input type="submit" value="Submit" />  
  5. </form>  

其中disabled 屬性規(guī)定應該禁用 input 元素。
被禁用的 input 元素既不可用，也不可點擊?？梢栽O置 disabled 屬性，直到滿足某些其他的條件為止（比如選擇了一個復選框等等）。然后，就需要通過 JavaScript 來刪除 disabled 值，將 input 元素的值切換為可用。
201585180424922.jpg (205×270)

以下三種寫法都可以禁用 input
 

XML/HTML Code復制內容到剪貼板
  1. <input type="text" disabled="disabled" value="已禁用" />  
  2. <input type="text" disabled="disabled" value="已禁用" />  
  3. <input type="text" disabled="disabled" value="已禁用" />  

被禁用的 input 默認顯示灰色，可以通過CSS修改樣式。注：IE9及以下無法改變字體顏色
1. 利用CSS3 :disabled 偽元素定義
 

CSS Code復制內容到剪貼板
  1. //Chrome Firefox Opera Safari   
  2. input:disabled{   
  3.     border: 1px solid #DDD;   
  4.     background-color: #F5F5F5;   
  5.     color:#ACA899;   
  6. }  

2. 利用屬性選擇符定義
 

CSS Code復制內容到剪貼板
  1. //IE6 failed   
  2. input[disabled]{   
  3.     border: 1px solid #DDD;   
  4.     background-color: #F5F5F5;   
  5.     color:#ACA899;   
  6. }  

3. 利用class來定義,為要禁用的input增加一個class
 

CSS Code復制內容到剪貼板
  1. input.disabled{   
  2.     border: 1px solid #DDD;   
  3.     background-color: #F5F5F5;   
  4.     color:#ACA899;   
  5. }  

最終結果：
 

CSS Code復制內容到剪貼板
  1. //Chrome Firefox Opera Safari IE9+   
  2. input:disabled{   
  3.     border: 1px solid #DDD;   
  4.     background-color: #F5F5F5;   
  5.     color:#ACA899;   
  6. }   
  7. //IE8-   
  8. input[disabled]{   
  9.     border: 1px solid #DDD;   
  10.     background-color: #F5F5F5;   
  11.     color:#ACA899;   
  12. }   
  13. //IE6 Using Javascript to add CSS class "disabled"  
  14. * html input.disabled{   
  15.     border: 1px solid #DDD;   
  16.     background-color: #F5F5F5;   
  17.     color:#ACA899;   
  18. }  

注意：IE8 bug
由于IE8 不識別 :disabled 導致input[disabled],input:disabled樣式失效，可以考慮單獨來寫，或者直接使用input[disabled]。;IE9及以下無法改變字體顏色。

    Demo

相關文章

  • HTML與XHTML、以及HTML4與HTML5標簽之間的區(qū)別簡介

    這篇文章主要介紹了HTML與XHTML、以及HTML4與HTML5標簽之間的區(qū)別,是網頁前端編程入門學習中的基礎知識,需要的朋友可以參考下
    2015-11-07

  • HTML5安全攻防之新標簽攻擊詳解

    HTML5引入的新標簽有一些有趣的屬性，例如poster、autofocus、onerror、formaction、oninput，這些屬性都可以用來執(zhí)行javascript，這會導致XSS和CSRF跨域請求偽造。對這方
    2015-09-27

  • 簡單介紹HTML5中audio標簽的使用

    這篇文章主要介紹了HTML5中audio標簽的使用,在各瀏覽器中添加音頻播放控件,需要的朋友可以參考下
    2015-09-24

  • 詳解HTML5中ol標簽的用法

    這篇文章主要介紹了詳解HTML5中ol標簽的用法,是HTML5入門學習中的基礎知識,需要的朋友可以參考下
    2015-09-08

  • 詳解HTML的style標簽以及相關的CSS引用

    這篇文章主要介紹了詳解HTML的style標簽以及相關的CSS引用,是HTML和CSS入門學習中的基礎知識,需要的朋友可以參考下
    2015-08-27

  • HTML中Li標簽的使用示例

    這篇文章主要介紹了HTML中Li標簽的使用示例,主要用來讓文章標題和日期等左右對齊,需要的朋友可以參考下
    2015-07-13

  • HTML5 video標簽（播放器）學習筆記（二）:播放控制

    這篇文章主要介紹了HTML5 video標簽（播放器）學習筆記（二）:播放控制,本文講解了獲取影片總時長、播放、暫停、獲取影片的播放時間和設置播放點、音量的獲取和設置等內容,
    2015-04-24

  • HTML頁面中添加Canvas標簽示例

    這篇文章主要介紹了HTML頁面中添加Canvas標簽示例,本文直接給出示例代碼,并講解了一些重要屬性和js訪問方法,需要的朋友可以參考下
    2015-01-01

  • 常用HTML meta 標簽屬性(網站兼容與優(yōu)化需要)

    標簽提供關于HTML文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。它可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務
    2014-12-27

  • HTML常用標簽大全及html標簽的特點

    本篇文章給大家整理些關于html常用標簽大全及html標簽的特點，希望對大家學習html相關知識有所幫助，感興趣的朋友一起學習吧
    2015-11-19

最新評論