Organización de formularios
Para la organización de los campos de un formulario disponemos de varios elementos. A continuación, se muestran algunos.
Elemento <label>
El elemento <label> permite asociar a cada campo del formulario una etiqueta con su nombre. El texto mostrado entre las etiquetas <label> se muestra y constituye, además, una ayuda de usabilidad a personas invidentes.
<label for="conforme">Acepto el acuerdo de licencia</label>
<input type="checkbox" name="licencia" id="conforme" value="ok">
En el ejemplo la etiqueta <label> se asocia al campo tipo <input> mediante el atributo for que contiene el valor del identificador (id) de la etiqueta <input>.
En el navegador se mostraría de la siguiente forma:
Elemento <fieldset>
El elemento <fieldset> agrupa los campos de formulario que estén entre la etiqueta de apertura y cierre <fieldset> y los rodea con un borde.
Por ejemplo:
<fieldset>
<legend>Introduzca su nombre de usuario y contraseña</legend>
<div>
<label for="username">Usuario</label>
<input type="text" id="username" name="user" required />
</div>
<br />
<div>
<label form="password">Contraseña</label>
<input type="password" id="password" name="pass" required />
</div>
</fieldset>
En el navegador se mostraría de la siguiente forma:
Elemento <legend>
El elemento <legend> escrito inmediatamente a continuación de la etiqueta de apertura <fieldset>, agrega un texto relacionado con los campos agrupados