HTML - I MODULI

Laboratorio TPSIT
HTML : I MODULI

➔ Come raccogliere informazioni dai visitatori

➔ Vari tipi di controlli per i moduli
➔ Nuovi controlli per i moduli in HTML5
HTML : COME FUNZIONANO I MODULI

L’utente compila il modulo e preme il Al server viene inviato il nome di ogni

pulsante per l’invio delle informazioni campo del modulo con il valore specificato
dall’utente.

Il server elabora l’informazione utilizzando

un linguaggio di programmazione come
PHP,C#, VB.net o JAVA. Può anche
memorizzare le informazioni in un
database.
HTML : COME FUNZIONANO I MODULI

Il server crea una nuova pagina

da rinviare al browser, sulla
base delle informazioni ricevute
HTML : COME FUNZIONANO I MODULI

Per distinguere i vari dati immessi, le informazioni

vengono inviate dal browser al server utilizzando coppie
nome/valore.
In questo esempio, il modulo chiede il nome utente del
visitatore e poi domanda qual è il musicista preferito. Le
coppie nome/valore sono le seguenti:
HTML : STRUTTURA DI UN MODULO

<form> I controlli di un modulo sono collocati all’interno dell’elemento <form>. Questo

elemento deve sempre contenere l’attributo action e normalmente anche gli attributi method e id.

action Ogni elemento form richiede l’attributo action, il suo valore è l’URL della pagina del server
che riceverà le informazioni contenute nel modulo, una volta che questo verrà inoltrato.

method I moduli possono essere inviati utilizzando due metodi: get o post.

get → Brevi moduli - Nessuna modifica sui database

post → Moduli che consentono di inviare file - Moduli con molti dati - Dati che modificano i database.
Se non viene utilizzato l’attributo method, tutti i moduli saranno inviati con il metodo get
HTML : STRUTTURA DI UN MODULO

maxlength L’attributo maxlength limita il numero di caratteri che l’utente può inserire nel
campo testuale.

size L’attributo size veniva utilizzato per indicare la larghezza della casella di input
testuale, misurata in base al numero di caratteri visualizzabili al suo interno. Per esempio
per una casella destinata a contenere l’anno l’attributo size potrebbe avere valore 4.

L’attributo size non dovrebbe essere utilizzato in HTML, ma per controllare la larghezza
degli elementi bisogna impiegare codice CSS.
HTML : STRUTTURA DI UN MODULO

HTML

OUTPUT

text-input.html
HTML : INPUT TESTUALE

<input> L’elemento <input> viene utilizzato per creare vari controlli per i moduli. I
valori dell’attributo type determinano il tipo di input creato.

type=”text” Quando l’attributo type ha valore text, viene creata un’unica riga di
input testuale.

name Quando gli utenti devono inserire informazioni in un modulo, il server deve sapere
quale controllo del modulo conterrà i dati inseriti. Pertanto ogni controllo del modulo richiede
un attributo name, il valore di questo attributo identifica il controllo e viene inviato al server
insieme all’informazione fornita dall’utente → nome/valore
HTML : INPUT DI PASSWORD

HTML type=”password”
Quando l’attributo type ha
valore password crea una
casella di testo dove i
caratteri inseriti vengono
mascherati.

name=”username”

name=”password”

OUTPUT

password-input.html
HTML : AREA DI TESTO

HTML <textarea>
L’elemento <textarea>
viene utilizzato per creare un
input testuale composto da
più righe. A differenza degli
altri elementi di input, questo
deve prevedere un tag di
apertura e un tag di chiusura.

Il testo compreso tra i tag

verrà visualizzato nell’area di
input…
Deve essere cancellato
OUTPUT dall’utente, o da istruzioni
JavaScript.

textarea.html
HTML : PULSANTI DI OPZIONI

HTML

OUTPUT radio-button.html
HTML : PULSANTI DI OPZIONI

HTML

type=”radio” consente di visualizzare pulsanti di opzione, gli utenti possono

selezionare una sola opzione.
name L’attributo name viene inviato al server insieme al valore dell’attributo value

checked Questo attributo può essere utilizzato per una selezione di default al momento
del caricamento della pagina
HTML : CASELLE DI SELEZIONE

HTML

<input>
type=”checkbox” Le caselle di
selezione consentono agli utenti di
OUTPUT selezionare ( e deselezionare) una o più
opzioni in risposta a una domanda…

checkbox.html
HTML : CASELLA CON ELENCO A DISCESA

<select>
L’elemento <select> viene
utilizzato per creare la casella
a discesa, la quale può
contenere due o più elementi
<option>
HTML
name verrà inviato come nome al server
insieme al valore di value (in option)
selezionato dall’utente.

Può essere selezionata una sola opzione

OUTPUT
drop-down-list-box.html
HTML : CASELLA CON ELENCO A DISCESA E SELEZIONE MULTIPLA

HTML

Può essere selezionata una o

più opzioni - Occorre mantenere
premuto il tasto Ctrl
OUTPUT
multiple-select-box.html
HTML : CASELLA CON ELENCO A DISCESA E SELEZIONE MULTIPLA

HTML

<select>
size Definisce il numero di opzioni che vogliamo mostrare contemporaneamente
multiple Potete consentire agli utenti di selezionare più opzioni dall’elenco
aggiungendo l’attributo multiple con valore multiple
multiple=”multiple”
HTML : CASELLA PER L’INVIO DI FILE

HTML

OUTPUT

<input> Se vogliamo consentire l’invio di file

dobbiamo utilizzare una casella per il caricamento
del file…con l’attributo type=”file”

file-input-box.html
HTML : CASELLA PER L’INVIO DI FILE

HTML

Ogni browser visualizza un messaggio sul pulsante, per esempio Edge visualizza “Scegli il
file”
type=”submit” crea il pulsante per l’invio del file al server indicato in action
HTML : PULSANTE DI INVIO

HTML

OUTPUT

<input>
type=”submit” Il pulsante di invio consente di inviare il modulo al server.
value L’attributo value viene utilizzato per controllare il testo che compare nel pulsante

submit-button.html
HTML : RAGGRUPPAMENTO DEGLI ELEMENTI DI UN MODULO

<fieldset> E’ possibile raggruppare insieme i

controlli correlati di un modulo
La maggior parte dei browser rappresenta
<fieldset> con una linea che circonda gli
elementi correlati
<legend> può essere inserito subito dopo
l’apertura di <fieldset> e contiene il titolo che
grouping-form-elements.html
identifica il gruppo di controlli
HTML : Etichette per i controlli di un modulo

<label> Ogni controllo di un modulo dovrebbe avere un proprio elemento <label> che
garantisce la comprensibilità anche agli utenti affetti da problemi di vista.
L’elemento <label> può essere utilizzato in due modi:
● Per racchiudere sia la descrizione (o etichetta del controllo) che l’elemento <input>
HTML : Etichette per i controlli di un modulo

● Può essere distinto rispetto al controllo del modulo e utilizzare l’attributo for per
indicare il controllo a cui fa riferimento (l’elemento <input> dovrà avere l’attributo id).
HTML : Etichette per i controlli di un modulo

labelling-form-controls.html
Ecco le migliori posizioni per collocare le etichette:

SOPRA O A SINISTRA
● Input testuali
● Aree di testo
● Caselle di selezione
● Caselle per l’invio di file

A DESTRA
● Singole caselle di selezione
● Singoli pulsanti di opzioni
HTML5 : Convalida dei moduli

required L’attributo required consente di rendere un campo di controllo

obbligatorio prima dell’invio del modulo al server:

html5-form-validation.html
HTML5 : Inserimento di date

Se chiediamo all’utente di inserire una data possiamo utilizzare l’elemento <input>

specificando l’attributo type=”date”:

html5-date-input.html
HTML5 : Inserimento di indirizzi email
<input> type=”email”
html5-email-input.html
HTML5 : Inserimento di url

Elemento <input> attributo type=”url”

html5-url-input.html
HTML5 : Casella di ricerca

Elemento:<input> attributo:type=”search” attributo:plachholder=”...”

html5-placeholder.html