Il <form> Element
moduli HTML vengono utilizzati per raccogliere l'input dell'utente.
Il <form> elemento definisce un modulo HTML:
<form>
.
Moduli HTML contengono elementi del modulo. elementi del modulo sono diversi tipi di elementi di ingresso, caselle di controllo, pulsanti di opzione, presentare pulsanti, e più.
Il <input> Element
Il <input> elemento è l'elemento più importante forma.
Il <input> elemento ha molte varianti, a seconda del type di attributo.
Ecco i tipi utilizzati in questo capitolo:
Tipo Descrizione text Definisce normale immissione di testo radio Definisce l'ingresso pulsante di opzione (for selecting one of many choices) submit Definisce un pulsante di invio (for submitting the form)
Si impara molto di più sui tipi di input più avanti in questo tutorial.
L'immissione di testo
<input type="text"> definisce un campo di input di una riga per immissione di testo:
Esempio
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Prova tu stesso " Questo è come apparirà come in un browser:
Nome di battesimo:
Cognome:
Note: La forma stessa non è visibile. Si noti inoltre che la larghezza di default di un campo di testo è di 20 caratteri.
Radio Button Input
<input type="radio"> definisce un radio pulsante.
Radio pulsanti permettono all'utente di selezionare uno di un numero limitato di scelte:
Esempio
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
Maschio
Femmina
Altro
Il pulsante Invia
<input type="submit"> definisce un pulsante per la presentazione di un modulo ad una forma-handler.
La forma-gestore è tipicamente una pagina del server con uno script per l'elaborazione di dati di input.
La forma-gestore è specificato nel form action di attributo:
Esempio
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
Nome di battesimo:
Cognome:
L' Action attributo
L' action attributo definisce l'azione da eseguire quando il modulo viene inviato.
Il modo più comune per inviare un modulo a un server, è quello di utilizzare un pulsante di invio.
Normalmente, il modulo viene inviato ad una pagina web su un server web.
Nell'esempio di cui sopra, uno script lato server viene specificato per gestire il modulo inviato:
<form action="action_page.php ">
Se l' action attributo viene omesso, l'azione è impostata alla pagina corrente.
Il Method attributo
Il method attributo specifica il metodo HTTP ( GET o POST ) per essere utilizzato nel sottoporre le forme:
<form action="action_page.php" method="get" > o:
<form action="action_page.php" method="post" >
Quando utilizzare GET ?
È possibile utilizzare GET (the default method) :
Se il modulo di presentazione è passivo (like a search engine query) , e senza le informazioni sensibili.
Quando si utilizza GET , i dati del modulo saranno visibili nel l'indirizzo della pagina:
action_page.php?firstname=Mickey&lastname=Mouse GET è la più adatta a brevi quantità di dati. limiti di dimensioni sono impostate nel browser.
Quando utilizzare POST ?
Si dovrebbe usare POST :
Se la forma è l'aggiornamento dei dati, o include informazioni sensibili (password) .
POST offre maggiore sicurezza perché i dati presentati non è visibile nel l'indirizzo della pagina.
Il Name attributo
Da presentare correttamente, ogni campo di ingresso deve avere un name di attributo.
Questo esempio presenterà solo il "Last name" campo di input:
Esempio
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Prova tu stesso "
Raggruppamento Data Form con <fieldset>
I <fieldset> gruppi di elementi relativi dati in una forma.
Il <legend> elemento definisce una didascalia per l' <fieldset> elemento.
Esempio
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
HTML Form Attributi
Un HTML <form> elemento, con tutte le possibili attributi impostati, sarà simile a questa:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
Mettiti alla prova con esercizi! Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»
Ecco l'elenco dei <form> attributi:
Attributo Descrizione accept-charset Specifica il set di caratteri usato nella forma presentata (default: la pagina charset). action Specifica un indirizzo (url) dove inviare il modulo (default: la pagina dell'invio). autocomplete Specifica se il browser dovrebbe completare automaticamente il modulo (default: on) . enctype Specifica la codifica dei dati trasmessi (default: is url-encoded) . method Specifica il metodo HTTP utilizzato nel sottoporre la forma (default: GET) . name Specifica un nome utilizzato per identificare la forma (per l'utilizzo DOM: document.forms.name). novalidate Specifica che il browser non dovrebbe convalidare il formulario. target Specifica l'obiettivo di l'indirizzo nel action attributi (default: _self).
Imparerete di più su attributi nei prossimi capitoli.
Altri esempi
Invia e-mail da un modulo
Come inviare e-mail da un modulo.