LoSapevi

Losapevi: quello che vuoi sapere, e quello che ancora non sai...manuali, glossari, tutorial, curiosità, articoli, guide e molto altro...navigate queste pagine, scoprite e curiosate

Home » Articoli » HTML disabled e readonly: le differenze tra questi due attributi

HTML disabled e readonly: le differenze tra questi due attributi

La differenza tra gli attributi disabled e readonly assegnati ai campi di input di una form HTML

Lunedì 13 Agosto 2007 da Yak | HTML, Tutorial

Gli attributi disabled e readonly applicabili ai capi di input (input, select, radio, checkbox e textarea) di una form HTML servono entrambi per bloccare la modifica del campo stesso da parte dell'utente.
Più precisamente:

  • readonly blocca la modifica del valore del campo
  • disabled, oltre a bloccare la modifica del valore del campo ne impedisce la copia del suo contenuto e sopratutto ne blocca l'invio dopo un submit della form HTML.
L'attributo readonly quindi non fa altro che bloccare la modifica del valore del campo e quindi per radio, checkbox e select è inutile perchè per questi tipi di campi risulta impossibile per l'utente modificarne il valore anche senza utilizzare l'attributo readonly.

Per capire pinamente l'effetto dei due attributi sui vari campi delle form HTML proviamo a fare degli esempi

1. Input di tipo "text" e textarea

<input type="text" name="input" value="Valore" readonly="readonly" />
<textarea name="textarea" readonly="readonly">Valore</textarea>


Utilizzando l'attributo readonly su input di tipo "text" e textarea l'utente può copiare il contenuto dei campi e facendo il submit della form HTML il valore dei campi vengono inviati.

<input type="text" name="input" value="Valore" disabled="disabled" />
<textarea name="textarea" disabled="disabled">Valore</textarea>


Utilizzando invece l'attributo disabled su input di tipo "text" e textarea l'utente NON può copiare il contenuto dei campi e facendo il submit della form HTML i valori dei campi NON vengono inviati.

2. Campi <input type="checkbox" /> e <input type="radio" />

<input type="radio" name="radio" value="1" readonly="readonly" />
<input type="checkbox" name="checkbox1" value="1" readonly="readonly" />
Radio 1
Radio 2
Check 1
Check 2

Utilizzando l'attributo readonly su input di tipo "radio" e "checkbox" non cambia niente e facendo il submit della form HTML i valori dei campi vengono inviati.

<input type="radio" name="radio" value="1" disabled="disabled" />
<input type="checkbox" name="checkbox1" value="1" disabled="disabled" />
Radio 1
Radio 2
Check 1
Check 2

Utilizzando invece l'attributo disabled su input di tipo "radio" e "checkbox" l'utente NON può modificare le scelte già selezionate e facendo il submit della form HTML i valori dei campi NON vengono inviati.

Come si può evitare che un utente cambi il valore selezionato di un radio o di un checkbox?

Si possono visualizzare i campi radio e checkbox con l'attributo disabled ed affiancarli con dei campi di tipo hidden con i valori da inviare dopo il submit

<input type="hidden" name="radio" value="2" />
<input type="hidden" name="checkbox1" value="1" />
Radio 1
Radio 2
Check 1
Check 2

3. Campo <select>

<select name="select" readonly="readonly">

Come per "radio" e "checkbox" utilizzando l'attributo readonly su una select non cambia niente e facendo il submit della form HTML il valore del campo viene inviato.

<select name="select" disabled="disabled">

Utilizzando invece l'attributo disabled su una select l'utente NON può modificare la scelta già selezionata e facendo il submit della form HTML il valore del campo NON viene inviato.

Dai un voto all'articolo

Media: 2.0/5 (83 voti)


Copyright © 2007-2019