Proprietà HTML Input
- Pagina precedente Tipi di input HTML
- Pagina successiva Attributi dei form HTML Input
Proprietà value
value L'attributo specifica il valore iniziale del campo di input:
Esempio
<form action=""> Nome:<br> <input type="text" name="firstname" value="Bill"> <br> Cognome:<br> <input type="text" name="lastname"> </form>
Proprietà readonly
readonly L'attributo specifica che il campo di input è readonly (non può essere modificato):
Esempio
<form action=""> Nome:<br> <input type="text" name="firstname" value="Bill" readonly> <br> Cognome:<br> <input type="text" name="lastname"> </form>
L'attributo readonly non richiede un valore. È equivalente a readonly="readonly".
Proprietà disabled
disabled L'attributo specifica che il campo di input è disabilitato.
Gli elementi disabilitati non sono utilizzabili e non possono essere cliccati.
Gli elementi disabilitati non vengono inviati.
Esempio
<form action=""> Nome:<br> <input type="text" name="firstname" value="Bill" disabled> <br> Cognome:<br> <input type="text" name="lastname"> </form>
L'attributo disabled non richiede un valore. È equivalente a disabled="disabled".
Proprietà size
size La proprietà specifica la dimensione del campo di input (in caratteri):
Esempio
<form action=""> Nome:<br> <input type="text" name="firstname" value="Bill" size="40"> <br> Cognome:<br> <input type="text" name="lastname"> </form>
Proprietà maxlength
maxlength La proprietà specifica la lunghezza massima consentita per il campo di input:
Esempio
<form action=""> Nome:<br> <input type="text" name="firstname" maxlength="10"> <br> Cognome:<br> <input type="text" name="lastname"> </form>
Se viene impostato l'attributo maxlength, il controllo dell'input non accetterà più caratteri rispetto a quelli permessi.
Questa proprietà non fornirà alcun feedback. Se è necessario avvisare l'utente, è necessario scrivere codice JavaScript.
Nota:Le limitazioni di input non sono infallibili. JavaScript offre molti metodi per aumentare l'input non autorizzato. Per limitare in modo sicuro l'input, il ricevente (il server) deve verificare entrambi i limiti.
Attributi HTML5
HTML5 ha aggiunto i seguenti attributi a <input>:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- altezza e larghezza
- list
- min e max
- multiple
- pattern (regexp)
- placeholder
- required
- step
E aggiunge come attributi necessari per <form>:
- autocomplete
- novalidate
Attributo autocomplete
L'attributo autocomplete determina se il modulo o il campo di input dovrebbe essere completato automaticamente.
Quando il completamento automatico è attivato, il browser riempirà automaticamente i valori basandosi sui precedenti input dell'utente.
Suggerimento:Puoi impostare autocomplete del modulo su on, e il campo di input specifico su off, e viceversa.
L'attributo autocomplete si applica a <form> e ai seguenti tipi di <input>: text, search, url, tel, email, password, datepicker, range e color.
Esempio
Formulari con completamento automatico attivato in HTML (un campo di input è off):
<form action="action_page.php" autocomplete="on"> Nome: <input type="text" name="fname"><br> Cognome: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>
Suggerimento:In alcuni browser potresti dover abilitare manualmente la funzione di completamento automatico.
L'attributo novalidate
L'attributo novalidate appartiene agli attributi <form>.
Se impostato, l'attributo novalidate specifica che i dati del modulo non devono essere validati al momento dell'invio.
Esempio
Indica che il modulo non deve essere validato quando viene inviato:
<form action="action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
L'attributo autofocus
L'attributo autofocus è un attributo booleano.
Se impostato, specifica che l'elemento <input> dovrebbe ottenere automaticamente il focus quando la pagina viene caricata.
Esempio
Fare in modo che il campo di input "Nome" riceva automaticamente il focus quando la pagina viene caricata:
Nome: <input type="text" name="fname" autofocus>
L'attributo form
L'attributo form specifica uno o più moduli di appartenenza dell'elemento <input>.
Suggerimento:Per riferirsi a più di un modulo, utilizzare una lista di id di modulo separati da spazi.
Esempio
Il campo di input si trova al di fuori del modulo HTML (ma appartiene al modulo):
<form action="action_page.php" id="form1"> Nome: <input type="text" name="fname"><br> <input type="submit" value="Invia"> </form> Cognome: <input type="text" name="lname" form="form1">
L'attributo formaction
L'attributo formaction specifica l'URL del file che deve essere elaborato quando il modulo viene inviato.
L'attributo formaction copre l'attributo action dell'elemento <form>.
L'attributo formaction è applicabile a type="submit" e type="image".
Esempio
Un HTML modulo con due pulsanti di invio per azioni diverse:
<form action="action_page.php"> Nome: <input type="text" name="fname"><br> Cognome: <input type="text" name="lname"><br> <input type="submit" value="Invia"><br> <input type="submit" formaction="demo_admin.asp" value="Invia come admin"> </form>
L'attributo formenctype
L'attributo formenctype specifica come codificare i dati del modulo (form-data) quando vengono inviati al server (solo per i moduli con method="post").
L'attributo formenctype copre l'attributo enctype dell'elemento <form>.
L'attributo formenctype è applicabile a type="submit" e type="image".
Esempio
Invia dati del modulo con codifica predefinita e codifica "multipart/form-data" (secondo pulsante di invio):
<form action="demo_post_enctype.asp" method="post"> Nome: <input type="text" name="fname"><br> <input type="submit" value="Invia"> <input type="submit" formenctype="multipart/form-data"> value="Invia come Multipart/form-data"> </form>
Attributo formmethod
L'attributo formmethod definisce il metodo HTTP utilizzato per inviare i dati del modulo (form-data) all'URL di azione.
L'attributo formmethod sovrascrive l'attributo method dell'elemento <form>.
L'attributo formmethod è applicabile a type="submit" e type="image".
Esempio
Il secondo pulsante di invio sovrascrive il metodo HTTP del modulo:
<form action="action_page.php" method="get"> Nome: <input type="text" name="fname"><br> Cognome: <input type="text" name="lname"><br> <input type="submit" value="Invia"> <input type="submit" formmethod="post" formaction="demo_post.asp"> value="Invia tramite POST"> </form>
Attributo formnovalidate
L'attributo novalidate è un attributo booleano.
Se impostato, specifica che non viene eseguita alcuna validazione sugli elementi <input> al momento dell'invio del modulo.
L'attributo formnovalidate sovrascrive l'attributo novalidate dell'elemento <form>.
L'attributo formnovalidate può essere utilizzato con type="submit".
Esempio
Modulo con due pulsanti di invio (con validazione e senza validazione):
<form action="action_page.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Invia"><br> <input type="submit" formnovalidate value="Invia senza validazione"> </form>
Attributo formtarget
L'attributo formtarget specifica il nome o la parola chiave che indica dove visualizzare la risposta ricevuta dopo l'invio del modulo.
L'attributo formtarget sovrascrive l'attributo target dell'elemento <form>.
L'attributo formtarget può essere utilizzato con type="submit" e type="image".
Esempio
Questo modulo ha due pulsanti di invio, che corrispondono a finestre di destinazione diverse:
<form action="action_page.php"> Nome: <input type="text" name="fname"><br> Cognome: <input type="text" name="lname"><br> <input type="submit" value="Invia come normale"> <input type="submit" formtarget="_blank"> value="Invia in una nuova finestra"> </form>
Le proprietà height e width
Le proprietà height e width specificano l'altezza e la larghezza dell'elemento <input>.
Le proprietà height e width sono utilizzate solo per <input type="image">.
Nota:Si dovrebbe sempre specificare le dimensioni dell'immagine. Se il browser non conosce le dimensioni dell'immagine, la pagina lampeggerà durante il caricamento dell'immagine.
Esempio
Definire l'immagine come pulsante di invio e impostare le proprietà height e width:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Attributo list
L'attributo list di un <datalist> contiene le opzioni predefinite dell'elemento <input>.
Esempio
Utilizzare <datalist> per impostare l'elemento <input> con valori predefiniti:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
Attributi min e max
Gli attributi min e max specificano il valore minimo e massimo dell'elemento <input>.
Gli attributi min e max si applicano ai tipi di input: number, range, date, datetime, datetime-local, month, time e week.
Esempio
Elemento <input> con valori minimi e massimi:
Inserisci una data prima del 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Inserisci una data prima del 1980-01-01: Inserisci una data dopo il 2000-01-01: Quantità (tra 1 e 5): <input type="number" name="quantity" min="1" max="5">
Attributo multiple
L'attributo multiple è un attributo booleano.
Se impostato, determina che l'utente può inserire più di un valore nell'elemento <input>.
L'attributo multiple si applica ai seguenti tipi di input: email e file.
Esempio
Campo di upload dei file che accetta più valori:
Scegli un'immagine: <input type="file" name="img" multiple>
Attributo pattern
L'attributo pattern specifica l'espressione regolare utilizzata per verificare il valore dell'elemento <input>.
L'attributo pattern si applica ai seguenti tipi di input: text, search, url, tel, email e password.
Suggerimento:Usa l'attributo title globale per descrivere il pattern per aiutare l'utente.
Suggerimento:Scopri di più sui pattern regolari nel nostro tutorial su JavaScript.
Esempio
Il campo di input può contenere solo tre lettere (nessuna cifra o carattere speciale):
Codice del paese:
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Codice del paese di tre lettere">
Attributo placeholder
L'attributo placeholder specifica un suggerimento per descrivere il valore atteso del campo di input (valore di esempio o breve descrizione del formato).
Questo avviso viene visualizzato nel campo di input prima che l'utente inserisca un valore.
L'attributo placeholder è applicabile ai seguenti tipi di input: text, search, url, tel, email e password.
Esempio
Campi di input con testo di placeholder:
<input type="text" name="fname" placeholder="First name">
Attributo required
L'attributo required è un attributo booleano.
Se impostato, stabilisce che il campo di input deve essere compilato prima di inviare il modulo.
L'attributo required è applicabile ai seguenti tipi di input: text, search, url, tel, email, password, selettori di data, number, checkbox, radio e file.
Esempio
Campi di input obbligatori:
Username: <input type="text" name="usrname" required>
Attributo step
L'attributo step definisce l'intervallo numerico legale dell'elemento <input>.
Esempio: se step="3", i numeri validi sono -3, 0, 3, 6, ecc.
Suggerimento:L'attributo step può essere utilizzato insieme agli attributi max e min per creare un intervallo di valori validi.
L'attributo step è applicabile ai seguenti tipi di input: number, range, date, datetime, datetime-local, month, time e week.
Esempio
Campi di input con intervallo numerico specifico legale:
<input type="number" name="points" step="3">
- Pagina precedente Tipi di input HTML
- Pagina successiva Attributi dei form HTML Input
