L'elemento HTML <input> ci consente di creare vari controlli del modulo per raccogliere l'input dell'utente. È possibile personalizzare il comportamento e l'aspetto di questi controlli utilizzando diversi attributi. Esploriamo alcuni attributi comunemente usati:

value

L'attributo value viene utilizzato per impostare il valore iniziale dell'elemento <input>. Il valore specifico che assume dipende dal tipo di input:

• Per i pulsanti (type="button", type="reset", type="submit"), definisce il testo visualizzato sul pulsante;

• Per i campi di testo (type="text") e password (type="password"), definisce il valore predefinito del campo di input;

• Per le caselle di controllo (type="checkbox") e i pulsanti di opzione (type="radio"), definisce il valore associato all'input.

Nota

L'attributo value non può essere utilizzato con <input type="file">.

autofocus

L'attributo autofocus specifica che il campo di input dovrebbe automaticamente avere il focus quando la pagina web viene caricata. Quando la pagina si carica, il campo di input verrà selezionato automaticamente, permettendo all'utente di iniziare a digitare senza dover prima cliccare sul campo di input.

Nota

L'autofocus non funziona qui perché la pagina non si ricarica quando si clicca sul pulsante "Run Code".

required

L'attributo required viene utilizzato per rendere obbligatorio un campo di input. Specifica che il campo di input deve essere compilato prima che l'utente possa inviare il modulo. Se l'utente tenta di inviare il modulo senza aver compilato il campo di input obbligatorio, riceverà un messaggio di errore di validazione che indica che il campo è obbligatorio.

placeholder

L'attributo placeholder fornisce un suggerimento o un esempio del valore di input previsto per l'utente. Una breve stringa di testo viene visualizzata all'interno del campo di input prima che l'utente inserisca qualsiasi valore. Questo è utile per i campi che richiedono una formattazione specifica, come numeri di telefono o di carte di credito.

Nota

Negli esempi sopra, vengono utilizzati diversi attributi type per gli elementi <input>, influenzando significativamente il loro aspetto e funzionalità. Approfondirai vari tipi di input nel prossimo capitolo.