Attributi di input HTML
Questo capitolo descrive i diversi attributi per l' <input>elemento HTML.
Il valore Attributo
valueL' attributo di input specifica un valore iniziale per un campo di input:
Esempio
Campi di immissione con valori iniziali (predefiniti):
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
L'attributo di sola lettura
L' readonlyattributo di input specifica che un campo di input è di sola lettura.
Un campo di input di sola lettura non può essere modificato (tuttavia, un utente può visualizzarlo con una scheda, evidenziarlo e copiarne il testo).
Il valore di un campo di input di sola lettura verrà inviato al momento dell'invio del modulo!
Esempio
Un campo di input di sola lettura:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
L'attributo disabilitato
L' disabledattributo di input specifica che un campo di input deve essere disabilitato.
Un campo di input disabilitato è inutilizzabile e non selezionabile.
Il valore di un campo di input disabilitato non verrà inviato durante l'invio del modulo!
Esempio
Un campo di input disabilitato:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
L'attributo di dimensione
L'attributo di input sizespecifica la larghezza visibile, in caratteri, di un campo di input.
Il valore predefinito per sizeè 20.
Nota: l' sizeattributo funziona con i seguenti tipi di input: testo, ricerca, tel, URL, e-mail e password.
Esempio
Imposta una larghezza per un campo di input:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
L'attributo maxlength
L'attributo di input maxlengthspecifica il numero massimo di caratteri consentiti in un campo di input.
Nota: quando a maxlengthè impostato, il campo di input non accetterà più del numero di caratteri specificato. Tuttavia, questo attributo non fornisce alcun feedback. Quindi, se vuoi avvisare l'utente, devi scrivere codice JavaScript.
Esempio
Impostare una lunghezza massima per un campo di input:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Gli attributi minimo e massimo
L'input mine maxgli attributi specificano i valori minimo e massimo per un campo di input.
Gli attributi mine maxfunzionano con i seguenti tipi di input: numero, intervallo, data, dataora locale, mese, ora e settimana.
Suggerimento: utilizza gli attributi max e min insieme per creare un intervallo di valori legali.
Esempio
Imposta una data massima, una data minima e un intervallo di valori legali:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
L'attributo multiplo
L'attributo di input multiplespecifica che l'utente può immettere più di un valore in un campo di input.
L' multipleattributo funziona con i seguenti tipi di input: email e file.
Esempio
Un campo di caricamento file che accetta più valori:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
L'attributo del modello
L'attributo di input patternspecifica un'espressione regolare rispetto alla quale viene verificato il valore del campo di input, quando il modulo viene inviato.
L' patternattributo funziona con i seguenti tipi di input: testo, data, ricerca, URL, tel, e-mail e password.
Suggerimento: utilizza l'attributo del titolo globale per descrivere il modello per aiutare l'utente.
Suggerimento: scopri di più sulle espressioni regolari nel nostro tutorial JavaScript.
Esempio
Un campo di input che può contenere solo tre lettere (nessun numero o carattere speciale):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
L'attributo segnaposto
L'attributo di input placeholderspecifica un breve suggerimento che descrive il valore atteso di un campo di input (un valore di esempio o una breve descrizione del formato previsto).
Il breve suggerimento viene visualizzato nel campo di immissione prima che l'utente immetta un valore.
L' placeholderattributo funziona con i seguenti tipi di input: testo, ricerca, URL, tel, e-mail e password.
Esempio
Un campo di input con un testo segnaposto:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
L'attributo richiesto
L' requiredattributo di input specifica che un campo di input deve essere compilato prima di inviare il modulo.
L' requiredattributo funziona con i seguenti tipi di input: testo, ricerca, url, tel, e-mail, password, selettore di data, numero, casella di controllo, radio e file.
Esempio
Un campo di input obbligatorio:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
L'attributo del passaggio
stepL' attributo di input specifica gli intervalli di numeri legali per un campo di input.
Esempio: se step="3", i numeri legali potrebbero essere -3, 0, 3, 6, ecc.
Suggerimento: questo attributo può essere utilizzato insieme agli attributi max e min per creare un intervallo di valori legali.
L' stepattributo funziona con i seguenti tipi di input: numero, intervallo, data, dataora locale, mese, ora e settimana.
Esempio
Un campo di input con intervalli di numeri legali specificati:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Nota: le restrizioni di input non sono infallibili e JavaScript offre molti modi per aggiungere input illegali. Per limitare in modo sicuro l'input, deve essere controllato anche dal ricevitore (il server)!
L'attributo autofocus
L' autofocusattributo di input specifica che un campo di input deve ottenere automaticamente lo stato attivo quando la pagina viene caricata.
Esempio
Lascia che il campo di input "Nome" si attivi automaticamente quando la pagina viene caricata:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Gli attributi di altezza e larghezza
L'input heighte widthgli attributi specificano l'altezza e la larghezza di un <input
type="image">elemento.
Suggerimento: specifica sempre gli attributi di altezza e larghezza per le immagini. Se sono impostate altezza e larghezza, lo spazio necessario per l'immagine viene riservato al caricamento della pagina. Senza questi attributi, il browser non conosce la dimensione dell'immagine e non può riservare ad essa lo spazio appropriato. L'effetto sarà che il layout della pagina cambierà durante il caricamento (durante il caricamento delle immagini).
Esempio
Definisci un'immagine come pulsante di invio, con attributi di altezza e larghezza:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
L'elenco Attributo
listL' attributo input fa riferimento a un <datalist>elemento che contiene opzioni predefinite per un elemento <input>.
Esempio
Un elemento <input> con valori predefiniti in un <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
L'attributo di completamento automatico
L'attributo di input autocompletespecifica se un modulo o un campo di input deve avere il completamento automatico attivato o disattivato.
Il completamento automatico consente al browser di prevedere il valore. Quando un utente inizia a digitare un campo, il browser dovrebbe visualizzare le opzioni per compilare il campo, in base ai valori digitati in precedenza.
L' autocompleteattributo funziona con <form>i seguenti <input>tipi: testo, ricerca, url, tel, e-mail, password, datepicker, intervallo e colore.
Esempio
Un modulo HTML con completamento automatico attivato e disattivato per un campo di input:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Suggerimento: in alcuni browser potrebbe essere necessario attivare una funzione di completamento automatico affinché funzioni (guarda in "Preferenze" nel menu del browser).
Esercizi HTML
Modulo HTML ed elementi di input
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .