Pubblicato da In html esiste un tag molto carino per i form, un tag che consente raggruppare diversi campi del modulo in appositi box/sezioni, in modo tale da rendere i form più belli da vedere e più facili da leggere.
Sto parlando della potentissima fieldset html, un tag che in alcuni casi può fare la differenza tra un modulo semplice da compilare, da un modulo incasinato.
Vediamo subito come rendere più leggibile un form lungo con pochi semplici accorgimenti del codice.
Come abbellire i form html con le fieldset
Per farla breve, ciò che serve per poter incorniciare una serie di campi in una sorta di box raccoglitore, con tanto di legenda, è un tag chiamato fieldset, al cui interno è presente un altro tag chiamato legend.
La sintassi tipica è la seguente:
<form>
<fieldset>
<legend>legenda fieldset 1</legend>
//campi form sezione 1
</fieldset>
<fieldset>
<legend>legenda fieldset 2</legend>
//campi form sezione2
</fieldset>
...
</form>
Bisogna infatti susseguire le varie fieldset contenente tutti i campi del form che vogliamo raggruppare, indicare una legenda per ogni fieldset, ed infine chiudere la form.
Ecco un esempio pratico:
<html>
<body>
<form>
<fieldset>
<legend>Dati anagrafici:</legend>
Nome: <input type="text"><br>
Cognome: <input type="text"><br>
Data di nascita: <input type="text">
</fieldset>
<fieldset>
<legend>Contatti:</legend>
Email: <input type="text"><br>
Telefono: <input type="text"><br>
Cellulare: <input type="text">
</fieldset>
</form>
</body>
</html>
Il risultato sarà qualcosa del genere:
Ovviamente fieldset e legend possono essere abbellite con i fogli di stile css, tutto sta all'abilità grafica del webmaster di turno :)
Piaciuto l'articolo? Lascia un commento!
EmoticonEmoticon