Chiamaci Web Design Roma - Via spinoza 86,
Chiamaci
00137 Roma - Tel. 06 86891320
Web Design Roma Home
ELABORARE.COM
CATERING MATRIMONIO
ADRCENTER.IT
MONDOADR.IT
ASIR.IT
WSRMAG.IT
SPECIALMAG.IT
ARBAKA.COM
CATENELLA58.IT
EVENTISPETTACOLARI.IT
STARSITALIA.IT
VINICASTELLIROMANI.IT
FOTOGALLERY
AUTOMOTOCLUBROMA.ORG
EMCA4.C0M
GIANFRANCODEMEO.IT
LUCIOVECCHIOTTI.COM
EIDOSTUDIO.COM
ALLIANCECULTURELLE.COM
IBUSINESSPROMOTER.IT
PINOLEONE.COM
NEGOTIATE.IT
COMPUTER-ROMA.IT
PERCORSIFORMATIVI.IT

Un po' d'ordine: raggruppare i moduli

Scritto da Federico Albani   

Per la loro natura di "raccoglitori di informazioni", i moduli tendono a ingigantirsi e diventare lunghissimi. Per questo, con l'HTML 4 sono statiintrodotti dei tag per fare un po' d'ordine all'interno dei form.

Grazie al tag <fieldset> possiamo creare dellemacro-aree all'interno dei form, e grazie al tag <legend>, possiamo indicare il nome di ciascunamacro-area.

Poniamo ad esempio di dover raccogliere i dati di un utente, raccogliendodati anagrafici, residenza, domicilio e reperibilità sul lavoro.

Possiamo farlo con la seguente sintassi:

<form action=ìì>
<fieldset>
  <legend>Datianagrafici</legend>
  <br><br><br>
</fieldset>

<fieldset>
  <legend>Residenza</legend>
  <br><br><br>
</fieldset>

eccetera

</form>

che dà:

Datianagrafici

Residenza

come si può vedere vengono creati dei riquadri con un indicazione del tipo dicontenuto.

Un altro tag particolarmente utile - si può utilizzare con ogni tipo di campoche vedremo d'ora in poi - è il tag <label>, che permette di indicare un'etichetta per il nome del campo.

Ad esempio:

<form action=ìì>
 <fieldset>
  <legend>Datianagrafici</legend>
  <label>Anno di nascita: <input type="text"></label>
 </fieldset>
</form>

che dà:

DatianagraficiAnno di nascita:

oppure (cambiando la posizione del testo):

<fieldset>
  <legend>Dati anagrafici</legend>
  <label><input type="text">: anno di nascita</label>
</fieldset>

che dà:

Dati anagrafici: anno di nascita

Come si può vedere il campo su cui si vogliono dare delle indicazioni deve essere compreso all'interno del tag label stesso.

Hits: 233
Commenti (0)Add Comment

Scrivi commento
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
< Prec.   Pros. >