Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Attributi Input HTML per Funzionalità Avanzate | Tabelle e Moduli
Fondamenti di HTML

bookAttributi 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

index.html

copy

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?

question mark

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?

Select the correct answer

question mark

Quale attributo specifica il nome del campo di input, utilizzato per identificare i dati inseriti quando il modulo viene inviato?

Select the correct answer

question mark

Quale attributo impedisce l'invio del modulo se il campo obbligatorio viene lasciato vuoto?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 7

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

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.13

bookAttributi 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

index.html

copy

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?

question mark

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?

Select the correct answer

question mark

Quale attributo specifica il nome del campo di input, utilizzato per identificare i dati inseriti quando il modulo viene inviato?

Select the correct answer

question mark

Quale attributo impedisce l'invio del modulo se il campo obbligatorio viene lasciato vuoto?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 7
some-alt