Το χαρακτηριστικό disabled

Το χαρακτηριστικό disabled αποκλείει ένα στοιχείο HTML φόρμας, δηλαδή το καθιστά μη ενεργό. Είναι ένα χαρακτηριστικό χωρίς τιμή.

Ο αποκλεισμός στοιχείων συνήθως απαιτείται για να απαγορευτεί στον χρήστη να αλλάξει ορισμένες τιμές (οι οποίες, ωστόσο, πρέπει να εμφανίζονται στον χρήστη με τη μορφή στοιχείων φόρμας). Μερικές φορές τα στοιχεία αποκλείονται (και ο αποκλεισμός αίρεται) με τη βοήθεια του JavaSctipt.

Συμπεριφορά

Στην περίπτωση ενός κουμπιού (button ή input με το χαρακτηριστικό type στις τιμές button, reset ή submit) ο αποκλεισμός σημαίνει ότι το κουμπί δεν θα μπορεί να πατηθεί. Στην περίπτωση πεδίου εισαγωγής κειμένου (input ή textarea) δεν θα μπορεί να αλλάξει ή να αντιγραφεί το κείμενο. Στην περίπτωση των checkbox και radio η κατάστασή τους (επιλεγμένο ή όχι) δεν θα μπορεί να αλλάξει. Στην περίπτωση των αναδυόμενων λιστών select δεν θα μπορεί να αλλάξει το επιλεγμένο στοιχείο της λίστας.

Ένα αποκλεισμένο στοιχείο από προεπιλογή έχει γκρι φόντο. Επίσης, δεν θα συμμετέχει στις μεταβάσεις με το πλήκτρο Tab.

Παράδειγμα . Αποκλεισμένο κουμπί

Ας αποκλείσουμε ένα κουμπί με τη βοήθεια του χαρακτηριστικού disabled. Για σύγκριση, δίπλα υπάρχει παράδειγμα ενός μη αποκλεισμένου κουμπιού (ας προσπαθήσουμε να το πατήσουμε):

<button disabled>κείμενο</button>
<button>κείμενο</button>

Παράδειγμα . Αποκλεισμένο checkbox

Τώρα ας δούμε ένα αποκλεισμένο checkbox. Για σύγκριση, δίπλα βλέπουμε παράδειγμα ενός μη αποκλεισμένου checkbox:

<input type="checkbox" disabled>
<input type="checkbox">

Παράδειγμα . Αποκλεισμένο και επιλεγμένο checkbox

Ας δούμε πώς φαίνεται ένα αποκλεισμένο και επιλεγμένο με τη βοήθεια του χαρακτηριστικού checked checkbox. Για σύγκριση, δίπλα ας δούμε ένα παράδειγμα ενός μη αποκλεισμένου επιλεγμένου checkbox:

<input type="checkbox" disabled checked>
<input type="checkbox" checked>

Παράδειγμα . Αποκλεισμένο πεδίο εισαγωγής κειμένου

Τώρα ας αποκλείσουμε ένα πεδίο εισαγωγής. Για σύγκριση, δίπλα ας δούμε ένα παράδειγμα ενός μη αποκλεισμένου πεδίου εισαγωγής:

<input type="text" value="κείμενο" disabled>
<input type="text" value="κείμενο">

Παράδειγμα . Αποκλεισμένο textarea

Εδώ θα δούμε ένα αποκλεισμένο textarea (παρατηρήστε ότι το μέγεθος του αποκλεισμένου textarea μπορεί να αλλάξει). Για σύγκριση, δίπλα ας δούμε ένα παράδειγμα ενός μη αποκλεισμένου textarea:

<textarea disabled>κείμενο</textarea>
<textarea>κείμενο</textarea>

Παράδειγμα . Αποκλεισμένη αναδυόμενη λίστα

Ας δούμε πώς λειτουργεί ένας αποκλεισμένος select. Για σύγκριση, δίπλα ας δούμε ένα παράδειγμα ενός μη αποκλεισμένου αναδυόμενης λίστας:

<select disabled>
	<option>πόλη1</option>
	<option selected>πόλη2</option>
	<option>πόλη3</option>
	<option>πόλη4</option>
</select>
<select>
	<option>πόλη1</option>
	<option selected>πόλη2</option>
	<option>πόλη3</option>
	<option>πόλη4</option>
</select>

Δείτε επίσης

η ψευδοκλάση disabled,
που ορίζει στυλ για το αποκλεισμένο στοιχείο
η ψευδοκλάση enabled,
που ορίζει στυλ για το μη αποκλεισμένο στοιχείο