Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 44 di 58
  • livello principiante
Indice lezioni

Un po' d'ordine: raggruppare i moduli

Come rendere più eleganti e razionali i nostri moduli con il tag fieldset
Come rendere più eleganti e razionali i nostri moduli con il tag fieldset
Link copiato negli appunti

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à:

Datianagrafici


oppure (cambiando la posizione del testo):

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

che dà:

Dati anagrafici


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

Ti consigliamo anche