Attributi Input HTML per Funzionalità Avanzate
Abbiamo già appreso come costruire i moduli utilizzando input ed etichette. Ora, consideriamo altri attributi utili per gli elementi di input che ne migliorano funzionalità e usabilità.
Attributi comuni per gli elementi di input
Placeholder
placeholder fornisce un suggerimento o un testo di esempio all'interno del campo di input, guidando l’utente sul tipo di dato richiesto. Utile per offrire contesto o istruzioni agli utenti prima dell’inserimento dei dati.
<input type="text" placeholder="Enter your email" />
Name
name specifica il nome del campo di input, utilizzato per identificare i dati inseriti al momento dell’invio del modulo. Ogni campo di input all’interno di un modulo dovrebbe avere un attributo name univoco.
<input type="text" name="username" />
Value
value imposta il valore iniziale o predefinito del campo di input. Precompila il campo di input con un valore specifico al caricamento della pagina.
<input type="tel" value="+1 (484) 298-9732" />
Obbligatorio
required specifica che il campo di input deve essere compilato prima che il modulo possa essere inviato. Impedisce l'invio del modulo se il campo obbligatorio viene lasciato vuoto.
<input type="password" required />
Disabilitato
disabled disabilita il campo di input, impedendo agli utenti di interagire con esso o di inserire dati. Utile per visualizzare campi di input di sola lettura o inattivi.
<input type="text" value="New York" disabled />
Sola lettura
readonly rende il campo di input di sola lettura, consentendo agli utenti di visualizzare il valore ma non di modificarlo. Simile all'attributo disabled, ma permette comunque di mettere a fuoco e selezionare il campo.
<input type="text" value="USA" readonly />
Min e Max
min e max specificano i valori minimo e massimo consentiti per i campi di input numerici. Utili per imporre vincoli sull'inserimento di valori numerici, come età o quantità.
<input type="number" min="21" max="99" />
Esempio: Considerare un esempio che include tutti gli attributi e gli elementi necessari per il modulo.
index.html
Video tutorial
1. Quale attributo fornisce un suggerimento o un testo di esempio all'interno di un campo di input, guidando l'utente sul tipo di dato richiesto?
2. Quale attributo specifica il nome del campo di input, utilizzato per identificare i dati inseriti quando il modulo viene inviato?
3. Quale attributo impedisce l'invio del modulo se il campo obbligatorio viene lasciato vuoto?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain the difference between the disabled and readonly attributes?
What happens if I don't set a name attribute for an input field in a form?
Can you give more examples of using min and max with different input types?
Awesome!
Completion rate improved to 3.13Attributi Input HTML per Funzionalità Avanzate
Scorri per mostrare il menu
Abbiamo già appreso come costruire i moduli utilizzando input ed etichette. Ora, consideriamo altri attributi utili per gli elementi di input che ne migliorano funzionalità e usabilità.
Attributi comuni per gli elementi di input
Placeholder
placeholder fornisce un suggerimento o un testo di esempio all'interno del campo di input, guidando l’utente sul tipo di dato richiesto. Utile per offrire contesto o istruzioni agli utenti prima dell’inserimento dei dati.
<input type="text" placeholder="Enter your email" />
Name
name specifica il nome del campo di input, utilizzato per identificare i dati inseriti al momento dell’invio del modulo. Ogni campo di input all’interno di un modulo dovrebbe avere un attributo name univoco.
<input type="text" name="username" />
Value
value imposta il valore iniziale o predefinito del campo di input. Precompila il campo di input con un valore specifico al caricamento della pagina.
<input type="tel" value="+1 (484) 298-9732" />
Obbligatorio
required specifica che il campo di input deve essere compilato prima che il modulo possa essere inviato. Impedisce l'invio del modulo se il campo obbligatorio viene lasciato vuoto.
<input type="password" required />
Disabilitato
disabled disabilita il campo di input, impedendo agli utenti di interagire con esso o di inserire dati. Utile per visualizzare campi di input di sola lettura o inattivi.
<input type="text" value="New York" disabled />
Sola lettura
readonly rende il campo di input di sola lettura, consentendo agli utenti di visualizzare il valore ma non di modificarlo. Simile all'attributo disabled, ma permette comunque di mettere a fuoco e selezionare il campo.
<input type="text" value="USA" readonly />
Min e Max
min e max specificano i valori minimo e massimo consentiti per i campi di input numerici. Utili per imporre vincoli sull'inserimento di valori numerici, come età o quantità.
<input type="number" min="21" max="99" />
Esempio: Considerare un esempio che include tutti gli attributi e gli elementi necessari per il modulo.
index.html
Video tutorial
1. Quale attributo fornisce un suggerimento o un testo di esempio all'interno di un campo di input, guidando l'utente sul tipo di dato richiesto?
2. Quale attributo specifica il nome del campo di input, utilizzato per identificare i dati inseriti quando il modulo viene inviato?
3. Quale attributo impedisce l'invio del modulo se il campo obbligatorio viene lasciato vuoto?
Grazie per i tuoi commenti!
