Che cos’è un form HTML
Finora le pagine HTML realizzate hanno principalmente mostrato informazioni: testi, immagini, liste, link e tabelle.
Finora le pagine HTML realizzate hanno principalmente mostrato informazioni: testi, immagini, liste, link e tabelle.
In molte applicazioni Web è però necessario permettere all’utente di inserire informazioni.
Un form HTML è una parte della pagina che contiene controlli attraverso i quali l’utente può inserire o selezionare dati.
Esempi comuni sono:
- modulo di registrazione;
- modulo di accesso;
- barra di ricerca;
- modulo di contatto;
- questionario;
- modulo per effettuare una prenotazione.
Il form rappresenta l’interfaccia attraverso la quale l’utente inserisce i dati. HTML permette di costruire questa interfaccia e di preparare i dati per l’invio.
Il tag form
Il tag <form> definisce il contenitore del modulo.
Il tag <form> definisce il contenitore del modulo.
La struttura generale è:
<form>
controlli del modulo
</form>
All’interno del form vengono inseriti i controlli necessari per raccogliere i dati.
Per esempio:
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
</form>
form
|
+-- label
|
+-- input
Il form contiene quindi gli elementi utilizzati per descrivere e raccogliere i dati.
Gli attributi action e method
Un form viene normalmente utilizzato per raccogliere dati che successivamente dovranno essere inviati ed elaborati.
Un form viene normalmente utilizzato per raccogliere dati che successivamente dovranno essere inviati ed elaborati.
Due attributi importanti del tag form sono action e method.
<form action="elabora.php" method="post">
...
</form>
| Attributo | Funzione | Esempio |
|---|---|---|
| action | Indica la risorsa che riceverà i dati inviati dal form. | action="elabora.php" |
| method | Indica il metodo HTTP utilizzato per inviare i dati. | method="post" |
Non è ancora necessario conoscere PHP per costruire un form HTML. Per il momento è sufficiente comprendere che action indica dove verranno inviati i dati e method specifica come avverrà l’invio.
L’elaborazione dei dati sarà affrontata successivamente con un linguaggio lato server.
Il tag input
Il tag <input> permette di creare diversi tipi di controlli per l’inserimento dei dati.
Il tag <input> permette di creare diversi tipi di controlli per l’inserimento dei dati.
Uno dei più semplici è il campo di testo:
<input type="text">
L’attributo type specifica il tipo di controllo.
Con:
type="text"
il browser crea un campo nel quale l’utente può digitare una breve quantità di testo.
Input è un elemento vuoto: non contiene testo o altri elementi al proprio interno.
Il tag label
Un campo di input dovrebbe essere accompagnato da una descrizione che permetta di capire quale informazione inserire.
Un campo di input dovrebbe essere accompagnato da una descrizione che permetta di capire quale informazione inserire.
Per questa funzione si utilizza il tag <label>.
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
L’attributo for della label deve corrispondere all’attributo id del controllo associato.
label
for="nome"
|
|
v
input
id="nome"
Selezionando la label, il browser può attivare il campo associato. Questa associazione rende inoltre il form più accessibile.
Gli attributi id e name
Gli attributi id e name possono avere lo stesso valore, ma svolgono funzioni differenti.
Gli attributi id e name possono avere lo stesso valore, ma svolgono funzioni differenti.
<input
type="text"
id="nome"
name="nome"
>
| Attributo | Funzione principale | Esempio |
|---|---|---|
| id | Identifica l’elemento nella pagina e permette di associarlo alla label. | id="nome" |
| name | Assegna un nome al dato quando il form viene inviato. | name="nome" |
È frequente assegnare loro lo stesso valore, ma non devono essere confusi. id identifica l’elemento nel documento, mentre name identifica il dato durante l’invio del form.
L’attributo placeholder
L’attributo placeholder permette di visualizzare un breve suggerimento all’interno del campo.
L’attributo placeholder permette di visualizzare un breve suggerimento all’interno del campo.
<label for="nome">Nome:</label>
<input
type="text"
id="nome"
name="nome"
placeholder="Inserisci il tuo nome"
>
Il testo del placeholder scompare quando l’utente inizia a digitare.
Il placeholder non sostituisce la label. La label descrive stabilmente il significato del campo, mentre il placeholder fornisce soltanto un suggerimento temporaneo.
L’attributo required
L’attributo required indica che la compilazione di un campo è obbligatoria prima dell’invio del form.
L’attributo required indica che la compilazione di un campo è obbligatoria prima dell’invio del form.
<input
type="text"
id="nome"
name="nome"
required
>
Se l’utente tenta di inviare il modulo senza compilare il campo, il browser impedisce normalmente l’invio e segnala che il dato è necessario.
Required introduce una prima forma di controllo eseguita dal browser. Nelle applicazioni reali i dati dovranno essere controllati anche dal programma che li riceve sul server.
Il campo email
Modificando il valore dell’attributo type possiamo indicare al browser quale tipo di dato deve essere inserito.
Modificando il valore dell’attributo type possiamo indicare al browser quale tipo di dato deve essere inserito.
Per un indirizzo email possiamo utilizzare:
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="nome@esempio.it"
required
>
Il browser riconosce che il campo è destinato a un indirizzo email e può effettuare un controllo di base sul formato inserito.
HTML mette a disposizione numerosi altri valori di type, come password, number, date, radio e checkbox. Questi controlli possono essere approfonditi separatamente dopo aver compreso la struttura fondamentale del form.
Il pulsante di invio
Per permettere all’utente di inviare il form possiamo utilizzare un input di tipo submit.
Per permettere all’utente di inviare il form possiamo utilizzare un input di tipo submit.
<input type="submit" value="Invia">
L’attributo value definisce il testo visualizzato sul pulsante.
Utente
|
v
compila i campi
|
v
preme "Invia"
|
v
il browser prepara i dati
|
v
il form invia i dati
Anatomia di un campo completo
<label for="nome">Nome:</label>
<input
type="text"
id="nome"
name="nome"
placeholder="Inserisci il nome"
required
>
| Elemento | Funzione |
|---|---|
<label> |
Descrive il campo. |
for="nome" |
Collega la label al controllo con id nome. |
type="text" |
Definisce un campo di testo. |
id="nome" |
Identifica il controllo nella pagina. |
name="nome" |
Assegna un nome al dato da inviare. |
placeholder |
Mostra un suggerimento temporaneo. |
required |
Rende obbligatoria la compilazione. |
LABORATORIO
Creare un modulo di registrazione
L’obiettivo è creare un semplice modulo HTML che permetta di inserire nome, cognome ed email.
L’obiettivo è creare un semplice modulo HTML che permetta di inserire nome, cognome ed email.
In questa attività ci concentriamo esclusivamente sulla costruzione del form. Non verrà ancora utilizzato PHP per elaborare i dati.
Passo 1 - Creare il file
Creare un nuovo file denominato:
registrazione.html
Passo 2 - Creare la struttura HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registrazione</title>
</head>
<body>
<h1>Registrazione</h1>
</body>
</html>
Passo 3 - Inserire il form
All’interno del body, dopo il titolo, inserire:
<form action="" method="post">
</form>
In questo primo esercizio non è ancora presente un programma PHP che elabori i dati. L’obiettivo è costruire correttamente l’interfaccia HTML del form.
Passo 4 - Inserire il campo Nome
<label for="nome">Nome:</label>
<input
type="text"
id="nome"
name="nome"
placeholder="Inserisci il nome"
required
>
Passo 5 - Inserire il campo Cognome
<label for="cognome">Cognome:</label>
<input
type="text"
id="cognome"
name="cognome"
placeholder="Inserisci il cognome"
required
>
Passo 6 - Inserire il campo Email
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="nome@esempio.it"
required
>
Passo 7 - Aggiungere il pulsante
<input type="submit" value="Registrati">
Passo 8 - Separare visivamente i campi
Non avendo ancora introdotto CSS, è possibile utilizzare temporaneamente elementi div per organizzare i controlli su righe differenti.
<div>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
</div>
<div>
<label for="cognome">Cognome:</label>
<input type="text" id="cognome" name="cognome" required>
</div>
Codice completo del laboratorio
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registrazione</title>
</head>
<body>
<h1>Registrazione</h1>
<form action="" method="post">
<div>
<label for="nome">Nome:</label>
<input
type="text"
id="nome"
name="nome"
placeholder="Inserisci il nome"
required
>
</div>
<div>
<label for="cognome">Cognome:</label>
<input
type="text"
id="cognome"
name="cognome"
placeholder="Inserisci il cognome"
required
>
</div>
<div>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="nome@esempio.it"
required
>
</div>
<div>
<input type="submit" value="Registrati">
</div>
</form>
</body>
</html>
La pagina deve mostrare tre campi: Nome, Cognome ed Email, seguiti dal pulsante Registrati.
Se uno dei campi obbligatori non viene compilato, il browser deve segnalare il problema quando si tenta di inviare il form.
Errori comuni
| Errore | Problema | Correzione |
|---|---|---|
| Input fuori dal form | Il controllo non appartiene al modulo che deve essere inviato. | Inserire i controlli tra <form> e </form>. |
| Label non associata | Il valore di for non corrisponde all’id del campo. | Utilizzare lo stesso identificatore. |
| Manca name | Il campo non possiede il nome necessario per identificare il dato inviato. | Aggiungere un attributo name significativo. |
| Placeholder usato al posto della label | Il campo perde una descrizione permanente. | Mantenere sempre una label appropriata. |
| Type non appropriato | Il browser non può applicare i controlli specifici del dato. | Utilizzare, per esempio, type="email" per un indirizzo email. |
Questo esempio contiene un errore:
<label for="nome">Nome:</label>
<input
type="text"
id="utente"
name="nome"
>
La label cerca un elemento con id="nome", ma il campo possiede id="utente".
Una possibile correzione è:
<label for="nome">Nome:</label>
<input
type="text"
id="nome"
name="nome"
>
Esercizio autonomo
Creare un file denominato contatti.html contenente un semplice modulo per la richiesta di informazioni.
Creare un file denominato contatti.html contenente un semplice modulo per la richiesta di informazioni.
Il form deve contenere:
- un campo Nome;
- un campo Cognome;
- un campo Email;
- una label associata correttamente a ogni campo;
- un id diverso per ogni input;
- un name significativo per ogni input;
- un placeholder per ogni campo;
- l’attributo required per tutti i campi;
- un pulsante con il testo Invia richiesta.
- Tutti i controlli devono essere contenuti nel form.
- Ogni label deve essere associata al relativo input.
- Ogni input deve possedere id e name.
- Il campo Email deve utilizzare type="email".
- I campi devono essere obbligatori.
- Il documento deve essere correttamente indentato.
Verifica rapida
- A cosa serve un form HTML?
- Quale tag contiene i controlli del modulo?
- A cosa serve il tag input?
- A cosa serve il tag label?
- Qual è la relazione tra l’attributo for della label e l’attributo id dell’input?
- Qual è la differenza tra id e name?
- A cosa serve placeholder?
- A cosa serve required?
- Quale type è appropriato per un indirizzo email?
- A cosa servono action e method?