表單控件狀態(禁用狀態)


Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的,在相應的表單控件上添加屬性“disabled”。

在使用了“form-control”的表單控件中,樣式設置了禁用表單背景色為灰色,而且手型變成了不准輸入的形狀。如果控件中不使用類名“form-control”,禁用的控件只會有一個不准輸入的手型出來。

在Bootstrap框架中,如果fieldset設置了disabled屬性,整個域都將處於被禁用狀態。

對於整個禁用的域中,如果legend中有輸入框的話,這個輸入框是無法被禁用的。

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表單控件狀態——禁用狀態</title>
 6     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 7 </head>
 8 <body>
 9 <h3>示例1</h3>
10 <form role="form" class="form-horizontal">
11   <div class="form-group">
12     <div class="col-xs-6">
13       <input class="form-control input-lg" type="text" placeholder="不是焦點狀態下效果">
14     </div>
15     <div class="col-xs-6">
16       <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用,不可輸入" disabled>
17     </div>
18   </div> 
19 </form> 
20 <br>
21 <br>
22 <br>
23 <h3>示例2</h3>   
24 <form role="form">
25   <fieldset disabled>
26     <div class="form-group">
27       <label for="disabledTextInput">禁用的輸入框</label>
28       <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
29     </div>
30     <div class="form-group">
31       <label for="disabledSelect">禁用的下拉框</label>
32       <select id="disabledSelect" class="form-control">
33         <option>不可選擇</option>
34       </select>
35     </div>
36     <div class="checkbox">
37       <label>
38         <input type="checkbox"> 無法選擇
39       </label>
40     </div>
41     <button type="submit" class="btn btn-primary">提交</button>
42   </fieldset>
43 </form> 
44 <br>
45 <br>
46 <br>
47 <h3>示例3</h3>
48 <form role="form">
49   <fieldset disabled>
50     <legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了,但是我沒被禁用,不信?單擊試一下" /></legend>
51     <div class="form-group">
52       <label for="disabledTextInput">禁用的輸入框</label>
53       <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
54     </div>
55     <div class="form-group">
56       <label for="disabledSelect">禁用的下拉框</label>
57       <select id="disabledSelect" class="form-control">
58         <option>不可選擇</option>
59       </select>
60     </div>
61     <div class="checkbox">
62       <label>
63         <input type="checkbox"> 無法選擇
64       </label>
65     </div>
66     <button type="submit" class="btn btn-primary">提交</button>
67   </fieldset>
68 </form>  
69 </body>
70 </html>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM