English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 ha aggiunto alcuni nuovi attributi ai moduli, form ha aggiunto autocomplete e novalidate, e gli elementi input hanno aggiunto autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, altezza e larghezza, lista, min e max, multiple, pattern (regexp)
HTML5 ha aggiunto alcuni nuovi attributi a <form> e <input> tag.
Nuovo attributo di <form>:
autocomplete
novalidate
Nuovo attributo di <input>:
autocomplete
autofocus
form
formaction
Formenctype
Formmethod
Formnovalidate
Formtarget
Altezza e larghezza
Elenco
Min e max
Moltiplicativo
Pattern (regexp)
Placeholder
Richiesto
Step
L'attributo autocomplete specifica che il form o il dominio input dovrebbe avere la funzione di completamento automatico.
Quando l'utente inizia a digitare nel campo di completamento automatico, il browser dovrebbe visualizzare le opzioni inserite nel campo.
Attenzione: L'attributo autocomplete potrebbe essere attivato nell'elemento form, ma disattivato nell'elemento input.
L'attributo autocomplete si applica al tag <form> e ai seguenti tipi di tag <input>: text, search, url, telephone, email, password, datepicker, range e color.
Attivare autocomplete (un campo input disattivato) nel modulo HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.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> <p>Compila e invia il modulo, quindi ricarica la pagina per vedere come viene compilato automaticamente il contenuto.</p> <p>Attenzione: l'attributo autocomplete del form è impostato su "on" (acceso), ma l'e-mail è impostato su "off" (spento) automaticamente.</p> </body> </html>Testa e guarda ‹/›
Suggerimento: In alcuni browser potresti dover abilitare la funzione di completamento automatico per che l'attributo funzioni correttamente.
L'attributo novalidate è un attributo booleano (booleano).
L'attributo novalidate specifica che non dovrebbe essere verificato il form o il dominio input al momento dell'invoio del modulo.
Non verificare i dati del modulo inviati
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> <p><strong>Attenzione:</strong> L'attributo novalidate non è supportato in Safari e in Internet Explorer 9 e versioni precedenti.</p> </body> </html>Testa e guarda ‹/›
L'attributo autofocus è un attributo booleano.
L'attributo autofocus determina che un campo ottenga automaticamente la focus quando la pagina viene caricata.
Fare in modo che il campo input "Nome" si concentri automaticamente alla pagina caricata:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Nome: <input type="text" name="fname" autofocus><br> Cognome: <input type="text" name="lname"><br> <input type="submit"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano l'attributo autofocus del tag input.</p> </body> </html>Testa e guarda ‹/›
L'attributo form determina uno o più form di appartenenza per un campo di input.
Attenzione:Per fare riferimento a più di un form, utilizzare una lista separata da spazi.
Il campo input situato al di fuori del form fa riferimento all'HTML form (questo input form fa ancora parte del form):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" id="form1"> Nome: <input type="text" name="fname"><br> <input type="submit" value="Invia"> </form> <p>Il campo "Cognome" non è all'interno del form, ma fa comunque parte del form.</p> Cognome: <input type="text" name="lname" form="form1"> <p><b>Attenzione:</b> Internet Explorer non supporta l'attributo form.</p> </body> </html>Testa e guarda ‹/›
L'attributo formaction viene utilizzato per descrivere l'indirizzo URL di invio del modulo.
L'attributo formaction sovrascrive l'attributo action dell'elemento <form>.
Attenzione: L'attributo formaction viene utilizzato per type="submit" e type="image".
Il seguente form HTML contiene due pulsanti di invio per indirizzi diversi:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Nome: <input type="text" name="fname"><br> Cognome: <input type="text" name="lname"><br> <input type="submit" value="Invio"><br> <input type="submit" formaction="demo-admin.php" value="Invia"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano l'attributo formaction del tag input.</p> </body> </html>Testa e guarda ‹/›
L'attributo formenctype descrive la codifica dei dati presentati al server per il modulo (solo per i moduli form con method="post")
L'attributo formenctype copre l'attributo enctype dell'elemento form.
Principale: L'attributo può essere utilizzato con type="submit" e type="image".
Il primo pulsante di invio invia i dati del modulo con la codifica predefinita, il secondo pulsante di invio invia i dati del modulo con il formato di codifica "multipart/form-data":
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-post-enctype.php" 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> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano l'attributo formenctype degli elementi input.</p> </body> </html>Testa e guarda ‹/›
L'attributo formmethod definisce il metodo di presentazione del modulo.
L'attributo formmethod copre l'attributo method dell'elemento <form>.
Attenzione: L'attributo può essere utilizzato con type="submit" e type="image".
Esempio di ridefinizione del metodo di presentazione del modulo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.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-form.php" value="Invia con POST"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano l'attributo formmethod degli elementi input.</p> </body> </html>Testa e guarda ‹/›
L'attributo novalidate è un attributo booleano.
L'attributo novalidate descrive che l'elemento <input> non deve essere verificato durante la presentazione del modulo.
L'attributo formnovalidate copre l'attributo novalidate dell'elemento <form>.
Attenzione: l'attributo formnovalidate viene utilizzato insieme a type="submit"
Moduli con due pulsanti di invio (con e senza convalida):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Invio"><br> <input type="submit" formnovalidate="formnovalidate" value="Invio senza convalida"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti, o Safari, non supportano l'attributo formnovalidate dei tag input.</p> </body> </html>Testa e guarda ‹/›
L'attributo formtarget specifica un nome o una parola chiave per indicare dove visualizzare i dati ricevuti dopo l'invio del modulo.
L'attributo formtarget sovrascrive l'attributo target dell'elemento <form>.
Attenzione: L'attributo formtarget viene utilizzato insieme a type="submit" e type="image".
I moduli con due pulsanti di invio, visualizzati in finestre diverse:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Nome: <input type="text" name="fname"><br> Cognome: <input type="text" name="lname"><br> <input type="submit" value="Invio normale"> <input type="submit" formtarget="_blank" value="Invia su una nuova pagina"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano l'attributo formtarget dei tag input.</p> </body> </html>Testa e guarda ‹/›
Gli attributi height e width definiscono l'altezza e la larghezza dell'immagine per il tag <input> di tipo image.
Attenzione: Gli attributi height e width sono applicabili solo ai tag <input> di tipo image.
Attenzione:L'altezza e la larghezza dell'immagine sono solitamente specificate contemporaneamente. Se l'immagine è impostata per altezza e larghezza, lo spazio Verrà conservato durante il caricamento della pagina. Senza questi attributi: Il browser non conosce la dimensione dell'immagine e non può riservare Spazio adeguato. Durante il caricamento dell'immagine, l'effetto di layout della pagina può cambiare (Nonostante l'immagine sia stata caricata).
Definito un pulsante di invio di immagine, utilizzando gli attributi height e width:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Nome: <input type="text" name="fname"><br> Cognome: <input type="text" name="lname"><br> <input type="image" src="login_button.gif" alt="Submit"> </form> </body> </html>Testa e guarda ‹/›
L'attributo list determina un elenco di opzioni per il campo di input. Il datalist è un elenco di opzioni per il campo di input.
Valori predefiniti per <input> nel <datalist>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 (e versioni precedenti IE), Safari non supportano l'etichetta datalist.</p> </body> </html>Testa e guarda ‹/›
Gli attributi min, max e step definiscono vincoli per i tipi di input che contengono numeri o date.
Attenzione: gli attributi min, max e step si applicano ai seguenti tipi di etichette <input>: selettori di data, numeri e intervallo.
Impostazione del valore minimo e massimo dell'elemento <input>:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Inserisci una data precedente al 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Inserisci una data successiva al 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> Quantità (tra 1 e 5): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti, Firefox non supportano gli attributi max e min dell'etichetta input.</p> <p><strong>Attenzione:</strong> <p>Attenzione: In Internet Explorer 10, gli attributi max e min non sono supportati per l'inserimento di date e ora, IE 10 non supporta questi tipi di input.</p> </body> </html>Testa e guarda ‹/›
L'attributo multiple è un attributo booleano.
L'attributo multiple determina che siano selezionabili più valori nell'elemento <input>.
Attenzione: L'attributo multiple è applicabile ai seguenti tipi di etichetta <input>: email e file:
Carica più file:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Seleziona immagine: <input type="file" name="img" multiple> <input type="submit"> </form> <p>Prova a selezionare un'immagine o più immagini.</p> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano l'attributo multiple dell'etichetta input.</p> </body> </html>Testa e guarda ‹/›
L'attributo pattern descrive un'espressione regolare utilizzata per verificare il valore dell'elemento <input>.
Attenzione:L'attributo pattern è applicabile ai seguenti tipi di etichetta <input>: text, search, url, tel, email e password.
Il suggerimento: è usato globalmente title L'attributo descrive lo schema.
L'esempio seguente mostra un campo di testo che può contenere solo tre lettere (senza numeri e caratteri speciali):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程 di base (oldtoolbag.com)</title>
</head>
<body>
<form action="demo-form.php">
Codice del paese: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Codice del paese di tre lettere">
<input type="submit">
</form>
<p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti, o Safari, non supportano l'attributo pattern dell'etichetta input.</p>
</body>
</html>Testa e guarda ‹/›L'attributo placeholder fornisce un suggerimento (hint) che descrive il valore atteso per il campo di input.
Un breve suggerimento viene visualizzato sul campo di input prima che l'utente inserisca un valore.
Attenzione: L'attributo placeholder si applica ai seguenti tipi di etichetta <input>: text, search, url, telephone, email e password.
Testo di suggerimento del campo input t:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="text" name="fname" placeholder="Nome"><br> <input type="text" name="lname" placeholder="Cognome"><br> <input type="submit" value="Invia"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano l'attributo placeholder dell'etichetta input.</p> </body> </html>Testa e guarda ‹/›
L'attributo required è un attributo booleano.
L'attributo required stabilisce che l'area di input deve essere compilata prima di inviare (non può essere vuota).
Attenzione:L'attributo required si applica ai seguenti tipi di etichetta <input>: text, search, url, telephone, email, password, selettori di data, number, checkbox, radio e file.
Il campo input non può essere vuoto:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Username: <input type="text" name="usrname" required> <input type="submit"> </form> <p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti, o Safari, non supportano l'attributo required dell'etichetta input.</p> </body> </html>Testa e guarda ‹/›
L'attributo step specifica gli intervalli numerici validi per l'area di input.
Se step="3", i numeri validi sono -3, 0, 3, 6 e così via
Suggerimento: L'attributo step può essere utilizzato con Gli attributi max e min creano un intervallo di valori.
Attenzione: l'attributo step viene utilizzato insieme ai seguenti tipi di type: number, range, date, datetime, datetime-local, month, time e week.
Regola input step passo 3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程 di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> <input type="number" name="points" step="3"> <input type="submit"> </form> <p><strong>Attenzione：</strong> Internet Explorer 9 e versioni precedenti, o Firefox, non supportano l'attributo step del tag input.</p> </body> </html>Testa e guarda ‹/›
| Etichetta | Descrizione |
| <form> | Definire un modulo form |
| <input> | Definire un campo input |