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.

Se vuoi aggiornamenti su Design inserisci la tua email nel box qui sotto:

Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.

Ti consigliamo anche