Corso HTML e CSS (Lezione 10)

Impariamo a costruire un sito Web

Lezione 10: I tag del <body> : Tag dei forms

I tag che abbiamo incluso in questo raggruppamento sono:

<form> Definisce un modulo di input
<input /> Definisce un controllo di input
<textarea> Definisce un’area di testo
<button> Definisce un bottone cliccabile
<select> Definisce una lista drop-down
<optgroup> Definisce un gruppo di opzioni in una lista drop-down
<option> Definisce un opzione in una lista drop-down
<label> Definisce un’etichetta per un elemento <input>
<fieldset> Raggruppa elementi del form in relazione tra loro
<legend> Definisce un titolo per un elemento <fieldset>

Vediamo innanzitutto la struttura generale di un form:

<form action="#" method="post" name="form1" id="form1">
	<fieldset>
    	<label for="nome">Nome</label>
        <input id="nome" type="text" name="name" alt="Nome" value="" />
         . . . . . .
        <label for="nome">Nome</label>
        <input type="submit" name="Submit" value="Invio" />
    </fieldset>
</form> 

<form> e </form> sono itag che racchiudono la definizione del form. Il raggruppamento fieldset è opzionale, mentre all’interno troviamo gli elementi <input> che definiscono ciascun campo in cui l’utente può inserire delle informazioni. La <label> è l’etichetta che definisce il tipo di campo di input.
Da notare l’ultimo campo di input che è il bottone che l’utilizzatore dovrà premere al termine della compilazione del modulo.

Vediamo ora in dettaglio i singoli tag:

1) <form> … </form>

Questo tag, come detto, viene usato per definire il form.

Vediamo gli attributi che il tag <form> può avere:

Attributo Valore Descrizione Obblig./Facolt.
action URL Dice dove mandare il form perché venga elaborato. Obbligatorio
accept MIME_type Specifica il tipo di file che il server accetta. Non supportato da alcun browser, quindi da non usare. Non usare
accept-charset character_set Specifica una o più liste di caratteri Facoltativo
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifica come il form debba essere codificato prima di essere inviato al server Facoltativo
method get
post
Specifica il metodo HTTP usato per inviare i dati Facoltativo
name nome Specifica il nome del form Facoltativo
target _blank
_self
_parent
_top
framename
Specifica in quale pagina debba essere inviata la risposta al form inviato. Non usare. Deprecated.

Inoltre può anche avere gli attributi standard, già più volte descritti.

L’attributo action come scritto nella tabella, è obbligatorio, perché dice al browser dove deve mandare le informazioni digitate dall’utente nel form. L’URL può essere un’altra pagina del sito, la stessa pagina dove si trova il form od una pagina di un altro sito. Le spiegazioni dettagliate dell’uso di questo e degli altri attributi li rimandiamo alla lezione in cui affronteremo la tematica dei form. Per ora aggiungiamo  solo che gli altri attributi da usare col tag <form> sono method e name.
Due parole su method: il metodo di trasmissione delle informazioni può essere get o post. Per ora anticipiamo che get invia tutte le informazioni nell’URL e quindi visibili all’utente, mentre post utilizza la transazione HTTP post. Post è più sicuro, inoltre va ricordato che inserire tutte le informazioni nell’URL, oltre che inelegante, pone problemi di sicurezza (pensiamo alle password) e va anche tenuto conto dei limiti di lunghezza di un URL.

2) <input … />

Questo tag va usato per ogni campo di input del form. Non ha tag di chiusura.
Gli attributi da usare con questo tag sono:

Attributo Valore Descrizione Obblig./Facolt.
accept audio/*
video/*
image/*
MIME_type
Specifica il tipo di files che il server accetta (utilizzabile solo se type=”file”). Non è supportato da Internet Explorer e Safari. Meglio quindi evitare di usarlo. Facoltativo
align left
right
top
middle
bottom
Usare i CSS Deprecated
alt testo Specifica un testo alternative per l’immagine (utilizzabile solo se type=’image’) Facoltativo
checked checked Usato per i tipi ‘checkbox’ e ‘radio’ per dire che nel form quell’elemento di input deve essere preselezionato. Facoltativo
disabled disabled Specifica che l’elemento di input è disabilitato nel form. Facoltativo
maxlength numero Specifica il Massimo numero di caratteri permessi in un elemento di input. Facoltativo
name nome Specifica il nome dell’elemento di input. Facoltativo
readonly readonly Specifica che un elemento di input deve essere read-only. Facoltativo
size number Specifies the width, in characters, of an <input> element Facoltativo
src URL Specifica l’URL dell’ immagine to usata come bottone (es. submit o reset) (utilizzabile solo se type=’image’). Facoltativo
type button
checkbox
file
hidden
image
password
radio
reset
submit
text
Specifica il tipo dell’elemento di input. Facoltativo
value testo Specifica il valore di un elemento di input. Facoltativo

più gli attributi standard:

Attributo Valore Descrizione Obblig./Facolt.
accesskey carattere Specifica una shortcut da tastiera per accedere all’ elemento. Facoltativo
class classname Attribuisce uno stile abbinando una classe. Vedremo successivamente con i CSS Facoltativo
dir rtl
ltr
Specifica la direzione del testo (ltr o rtl) Facoltativo
id id Specifica un id univoco per l’elemento. Vedremo successivamente con i CSS Facoltativo
lang language_code Specifica un codice linguaggio per il testo associato all’immagine. Facoltativo
style elemento di stile Attribuisce un elemento di stile senza far ricorso ad un foglio CSS. Vedremo successivamente. Facoltativo
tabindex numero Specifica l’ordine di tabulazione dell’elemento. Facoltativo
title testo Titolo dato all’immagine che comparirà quando si porterà il mouse sull’immagine stessa. Facoltativo
xml:lang language_code Specifica un codice linguaggio per il testo associato all’immagine in un documento XHTML. Facoltativo

Sottolineamo che accept non è completamente supportato ed è quindi meglio evitarlo mentre align non va usato in quanto non più accettato nell’ultima versione XHTML.

Alt ha lo stesso uso visto per il tag <img> visto per le immagini. L’unica differenza è che in questo caso non è obbligatorio. Gli altri sono comunque autoesplicativi e ne rimandiamo la descrizione dettagliata alla lezione relativa ai forms.

Un esempio verrà mostrato alla fine della lezione.

 

3) <textarea> … </textarea>

Questo tag va usato per delimitare un campo di input che può contenere testo libero con un numero illimitato di caratteri.
gli attributi sono:

Attributo Valore Descrizione Obblig./Facolt.
cols numero Specifica la larghezza visibile dell’area di testo. Obbligatorio
rows numero Specifica il numero di righe visibili dell’area di testo. Nel caso comparirà la scroll bar verticale. Obbligatorio
disabled disabled Specifica che la textarea è disabilitata. Facoltativo
name nome Specifica il nome della textarea. Facoltativo
readonly readonly Specifica che la textarea deve essere read-only. Facoltativo

Inoltre può anche avere gli attributi standard, già visti per il tag <input>.

 

4) <button> … </button>

Questo tag va ovviamente usato per inserire nel form un pulsante per inviare i dati al server o per resettare i campi del form.

Può avere i seguenti attributi:

Attributo Valore Descrizione Obblig./Facolt.
disabled disabled Specifica che il bottone è disabilitato nel form. Facoltativo
name nome Specifica il nome del bottone. Facoltativo
type button
reset
submit
Specifica il tipo dell’elemento di input. Facoltativo
value testo Specifica il valore di un elemento di input. Facoltativo

più gli attributi standard visti sopra.
Da notare che il tipo button (da non confondere col tag <button>) è del tutto generico e l’azione che si deve intraprendere al click del mouse deve essere specificata con una funzione javascript richiamata al verificarsi dell’ evento ‘onclick’. Faremo cenno a questo tipo di attributi legati agli eventi successivamente anche se richiedono comunque funzioni javascript.

 

5) <select> … </select>
<option> … </option>

Questi tag vanno usati per inserire nel form una lista drop-down. Li vediamo insieme in quanto sono strettamente legati. Il browser presenterà un combo-box con la lista degli elementi inclusi nei tag <option>.

Gli attributi che <select> può avere sono:

Attributo Valore Descrizione Obblig./Facolt.
disabled disabled Specifica che la list drop-down è disabilitata nel form. Facoltativo
name nome Specifica il nome della lista drop-down. Facoltativo
multiple multiple Specifica che possono essere selezionati più elementi della lista. Facoltativo
size numero Definisce il numero di elementi della lista che saranno visivili nella finestra drop-down. Per gli elementi in eccesso si userà la scroll-bar. Facoltativo

mentre gli attributi degli elementi <option> sono:

Attributo Valore Descrizione Obblig./Facolt.
disabled disabled Specifica che il singolo elemento della lista è disabilitato. Facoltativo
label nome E’ una corta etichetta per l’elemento della lista. Facoltativo
selected selected Specifica l’elemento che deve essere presentato nella lista come pre-selezionato. Facoltativo
value testo Specifica il valore che verrà restituito al server in seguito alla scelta dell’utente (dopo la pressione sul tasto submit). Facoltativo

<select> potrà poi avere gli attributi standard visti sopra, mentre per <option> gli attributi standard saranno gli stessi con l’eccezione di tabindex, in quanto le options non sono elementi del form, bensì elementi di <select>.

Tutti gli attributi sono opzionali. Quindi se non viene indicato selected=”selected” la lista avrà il primo elemento pre-selezionato. In mancanza dell’attributo value il form ritornerà come scelto il numero progressivo dell’elemento della lista (partendo da zero).

Anche per la lista drop-down potete vedere l’esempio riportato alla fine della lezione ed anche quello riportato al prossimo punto..

 

6) <optgroup> … </optgroup>

Questo tag può essere usato per raggruppare delle opzioni in una lista drop-down.

Gli attributi possibili sono:

Attributo Valore Descrizione Obblig./Facolt.
label nome Specifica un’etichetta per il raggruppamento di opzioni della lista. Obbligatorio
disabled disabled Specifica che il raggruppamento è disabilitato. Facoltativo

Inoltre <optgroup> potrà avere gli attributi standard visti sopra,  con l’eccezione di tabindex, in quanto le options – e quindi i relativi raggruppamenti – non sono elementi del form, bensì elementi di <select>.

Vediamo un esempio di lista. Scriviamo:

	<select>
	  <optgroup label="Tag per le immagini">
		<option value="tg1">&#60;img/&#62;</option>
		<option value="tg2">&#60;map&#62;</option>
		<option value="tg3">&#60;area/&#62;</option>
	  </optgroup>
	  <optgroup label="Tag per i links">
		<option value="tg4">&#60;a&#62;</option>
		<option value="tg5">&#60;link/&#62;</option>
	  </optgroup>
	</select>

Il browser presenterà:

Da notare che per mostrare a video i caratteri riservati ‘<‘ e ‘>’ abbiamo dovuto usare la specifica numerica corrispondente come spiegato nella lezione 4.

7) <label> … </label>

Questo tag è usato per dare un titolo, un’etichetta ad un campo di input.
Gli attributi sono:

Attributo Valore Descrizione Obblig./Facolt.
for id Specifica a quale campo di input si riferisce l’etichetta. Obbligatorio

Inoltre può avere gli attributi standard visti sopra tranne che tabindex.

8 ) <fieldset> … </fieldset>
<legend> … </legend>

Il tag <fieldset> è usato per delimitare alcuni campi di input che abbiano tra loro una relazione. L’effetto è che il browser disegna un box come cornice di questo insieme.
Il tag <legend> invece assegna un titolo all’area fieldset che verrà scritto nella parte alta della cornice.

Non vi sono attributi possibili per questo tag se non quelli standard visti nelle lezioni precedenti (con l’esclusione quindi di tabindex.

Vediamo a questo punto un esempio di un form. Con il codice che segue

 

<form action="registra.php" method="post" name="registr" id="registr">
    <fieldset><legend>Registrazione</legend><br />
		<label for="rg_name">Nome</label>
		<input id="rg_name" type="text" name="name" alt="Nome" /><br /><br />
		<label for="rg_surname">Cognome</label>
		<input id="rg_surname" type="text" name="surname" alt="Cognome" /><br /><br />
		<label for="rg_email">email</label>
		<input id="rg_email" type="text" name="email" alt="email" /><br /><br />
		<label for="rg_psw">Password</label>
		<input id="rg_psw" type="password" name="passwd" alt="password" /><br /><br />
		<label for="rg_pv">Professione</label>
		<select id="rg_pv" name="pf">
			<option value="01">Pittore</option>
			<option value="02">Scultore</option>
			<option value="03">Grafico</option>
			<option value="04">Galleria d'arte</option>
			<option value="05">Associazione</option>
			<option value="06">Critico d'arte</option>
			<option value="99">Altro</option>
		</select><br />
    </fieldset> <br /><br />
    <fieldset> 
	  <legend>Acconsento al trattamento dei dati personali ai fini di:</legend>
		<label for="Y1"><em>Iscrizione al servizio </em></label>
		<label for="Y2"><em> Iscrizione alla newsletter</em></label>
		<label for="Y3"><em> Invio di materiale pubblicitario</em></label>
		<br />
		<input type="checkbox" checked name="Y1" value="Serv" style="margin-left:30px;" /> 
		<input type="checkbox" checked name="Y2" value="NL" style="margin-left:140px;" /> 
		<input type="checkbox" checked name="Y3" value="adv" style="margin-left:190px;" />
    </fieldset> <br /><br />
    <fieldset> 
		<input type="submit" name="Submit" value="Invio" />
		<input type="reset" name="Reset" value="Reset" />
    </fieldset> 
</form>

Il form a video apparirà come segue:

Registrazione


Acconsento al trattamento dei dati personali ai fini di:





One thought on “Corso HTML e CSS (Lezione 10)”

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.