Corso a scelta
- Pagina precedente Attributi XHTML
- Pagina successiva Proprietà del Modulo HTML
Corso raccomandato:
HTML modulo
<form> L'elemento <form> viene utilizzato per raccogliere diversi tipi di input dell'utente.
L'HTML modulo viene utilizzato per raccogliere l'input dell'utente.
Esempio
<form> . elementi del modulo . </form>
<form> L'elemento <form> definisce l'HTML modulo:Elementi del modulo.
L'HTML modulo contiene
Elementi del modulo sono diversi tipi di elementi input, caselle di controllo, pulsanti di scelta singola, pulsanti di invio, ecc.
<input> L'elemento è il più importanteElementi del modulo.
L'elemento <input> ha molte forme, a seconda delle type Proprietà.
Questi sono i tipi utilizzati in questo capitolo:
| Tipo | Descrizione |
|---|---|
| text | Definire l'input di testo regolare. |
| radio | Definire l'input pulsante di scelta singola (selezione di una delle scelte multiple) |
| submit | Definire il pulsante di invio (invio del modulo) |
Nota:Imparerai di più sui tipi di input in questo tutorial.
Input di testo
<input type="text"> Definire perInput di testoIl campo di input a riga singola:
Esempio
<form> Nome:<br> <input type="text" name="firstname"> <br> Cognome:<br> <input type="text" name="lastname"> </form>
Nel browser, appare così:
Nota:Il modulo in sé è invisibile. Si noti anche che la larghezza predefinita dei campi di testo è di 20 caratteri.
Input pulsante di scelta singola
<input type="radio"> DefinirePulsante di scelta singola.
I pulsanti di scelta singola permettono agli utenti di selezionare uno dei numeri limitati di opzioni:
Esempio
<form> <input type="radio" name="sex" value="male" checked>Maschio <br> <input type="radio" name="sex" value="female">Femmina </form>
I pulsanti di scelta singola appaiono così nel browser:
Pulsante di invio
<input type="submit"> Definire perGestore del modulo(form-handler)InvioI pulsanti del modulo
Il gestore del modulo è generalmente una pagina del server che contiene uno script per gestire i dati di input.
Il gestore del modulo nel modulo action Nella proprietà specificata:
Esempio
<form action="action_page.php"> Nome:<br> <input type="text" name="firstname" value="Mickey"> <br> Cognome:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
Nel browser, appare così:
Proprietà Action
Proprietà actionDefinire l'azione da eseguire al momento dell'invio del modulo.
La pratica comune per inviare un modulo al server è utilizzare un pulsante di invio.
Di solito, il modulo viene inviato a una pagina web sul server web.
Nell'esempio precedente, è stato specificato uno script del server per gestire il modulo inviato:
<form action="action_page.php">
Se si omette l'attributo action, l'azione verrà impostata sulla pagina corrente.
Proprietà Method
Proprietà methodStabilisce il metodo HTTP utilizzato per inviare il modulo (GET o POST)
<form action="action_page.php" method="GET">
o:
<form action="action_page.php" method="POST">
Quando usare GET?
Puoi usare GET (metodo predefinito):
Se la presentazione del modulo è passiva (ad esempio, una ricerca di motore di ricerca) e non contiene informazioni sensibili.
Quando usi GET, i dati del modulo sono visibili nella barra degli indirizzi della pagina:
action_page.php?firstname=Mickey&lastname=Mouse
Nota:GET è più adatto per la presentazione di piccoli quantitativi di dati. Il browser stabilisce una capacità limite.
Quando usare POST?
Dovresti usare POST:
Se il modulo sta aggiornando dati o contiene informazioni sensibili (ad esempio, password).
POST è più sicuro perché i dati inviati nella barra degli indirizzi della pagina non sono visibili.
Proprietà Name
Per essere inviato correttamente, ogni campo di input deve avere una proprietà name.
In questo esempio, verrà inviato solo il campo di input "Cognome":
Esempio
<form action="action_page.php"> Nome:<br> <input type="text" value="Mickey"> <br> Cognome:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
Usa <fieldset> per combinare i dati del modulo.
<fieldset> Gli elementi combinano i dati correlati del modulo.
<legend> L'elemento <fieldset> definisce il titolo.
Esempio
<form action="action_page.php"> <fieldset> <legend>Informazioni personali:</legend> Nome:<br> <input type="text" name="firstname" value="Mickey"> <br> Cognome:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"></fieldset> </form>
Ecco come appare questo codice HTML nel browser:
Attributi del modulo HTML
L'elemento <form> HTML, con tutti gli attributi possibili impostati, è così:
Esempio
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . elementi del modulo . </form>
Di seguito è elencato l'attributo <form>:
| Attributo | Descrizione |
|---|---|
| accept-charset | Definisce il set di caratteri utilizzato nel modulo inviato (predefinito: set di caratteri della pagina). |
| action | Definisce l'indirizzo (URL) a cui inviare il modulo (pagina di invio). |
| autocomplete | Definisce se il browser deve completare automaticamente il modulo (predefinito: abilitato). |
| enctype | Definisce l'encoding dei dati inviati (predefinito: url-encoded). |
| method | Definisce il metodo HTTP utilizzato per inviare il modulo (predefinito: GET). |
| name | Definisce il nome con cui riconoscere il modulo (per DOM: document.forms.name). |
| novalidate | Definisce che il browser non verifica il modulo. |
| target | Definisce il destinatario dell'indirizzo nell'attributo action (predefinito: _self). |
Nota:Imparerai di più sugli attributi nei capitoli seguenti.
- Pagina precedente Attributi XHTML
- Pagina successiva Proprietà del Modulo HTML
