disabled niteliği
disabled niteliği, bir HTML
form
elemanını devre dışı bırakır, yani etkin olmayan hale getirir. Değeri olmayan bir niteliktir.
Elemanları devre dışı bırakmak genellikle, kullanıcının bazı değerleri değiştirmesini yasaklamak için gereklidir (bununla birlikte, bu değerler kullanıcıya form elemanları şeklinde gösterilmelidir). Bazen elemanlar JavaScript kullanılarak devre dışı bırakılır (ve devre dışı bırakma kaldırılır).
Davranış
Buton durumunda (button
veya input
elemanının type niteliği button,
reset veya submit değerlerine sahipse) devre dışı bırakma,
butona tıklanamayacağı anlamına gelir.
Metin giriş alanı durumunda (input
veya textarea)
içindeki metin değiştirilemez veya kopyalanamaz.
Onay kutularında
ve radyo düğmelerinde
durumları (işaretli veya değil) değiştirilemez.
Açılır listelerde (select)
seçili liste öğesi değiştirilemez.
Devre dışı bırakılmış bir eleman varsayılan olarak gri bir arka plana sahiptir. Ayrıca Tab tuşu geçişlerine katılmaz.
Örnek . Devre dışı bırakılmış buton
disabled niteliğini kullanarak bir butonu devre dışı bırakalım.
Karşılaştırma için yanında devre dışı bırakılmamış bir buton örneği
(tıklamayı deneyin):
<button disabled>metin</button>
<button>metin</button>
:
Örnek . Devre dışı bırakılmış onay kutusu
Şimdi devre dışı bırakılmış bir onay kutusuna bakalım. Karşılaştırma için yanında devre dışı bırakılmamış bir onay kutusu örneğine bakalım:
<input type="checkbox" disabled>
<input type="checkbox">
:
Örnek . Devre dışı bırakılmış ve işaretlenmiş onay kutusu
Devre dışı bırakılmış ve checked
niteliği kullanılarak işaretlenmiş bir onay kutusunun nasıl göründüğüne bakalım.
Karşılaştırma için yanında devre dışı bırakılmamış işaretli bir onay kutusu örneğine bakalım:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
Örnek . Devre dışı bırakılmış metin girişi
Şimdi bir input elemanını devre dışı bırakalım. Karşılaştırma için yanında devre dışı bırakılmamış bir input örneğine bakalım:
<input type="text" value="metin" disabled>
<input type="text" value="metin">
:
Örnek . Devre dışı bırakılmış textarea
Burada devre dışı bırakılmış bir textarea göreceğiz (devre dışı bırakılmış textarea'nın boyutunun değiştirilebileceğine dikkat edin). Karşılaştırma için yanında devre dışı bırakılmamış bir textarea örneğine bakalım:
<textarea disabled>metin</textarea>
<textarea>metin</textarea>
:
Örnek . Devre dışı bırakılmış açılır liste
Devre dışı bırakılmış bir
select
elemanının nasıl çalıştığına bakalım.
Karşılaştırma için yanında devre dışı bırakılmamış bir açılır liste örneğine bakalım:
<select disabled>
<option>şehir1</option>
<option selected>şehir2</option>
<option>şehir3</option>
<option>şehir4</option>
</select>
<select>
<option>şehir1</option>
<option selected>şehir2</option>
<option>şehir3</option>
<option>şehir4</option>
</select>
:
