Formularios: usabilidad y accesibilidad
Probemos con un ejemplo de formulario para los comentarios de un blog. Se intenta cumplir con la accesibilidad, la usabilidad y cierta organizacion de cara al diseño.
<form action="/wp-comments-post.php" method="post" id="formulariocomentarios">
<fieldset title="Comentarios de los lectores">
<legend>Comentarios</legend>
<p>
<input type="text" name="autor" id="autor" class="texto" size="28" tabindex="1" />
<label for="autor">Nombre</label>
</p><p>
<input type="text" name="correo" id="correo" class="texto" size="28" tabindex="2" />
<label for="correo">Correo</label>
</p><p>
<input type="text" name="web" id="web" class="texto" size="28" tabindex="3" />
<label for="web">Web</label>
</p><p>
<label for="comentario">Tu comentario</label>
<br />
<textarea name="comentario" id="comentario" class="texto" cols="40" rows="3" tabindex="4"></textarea>
</p>
</fieldset>
<p>
<input type="submit" name="boton" id="boton" tabindex="5" value="Graba el comentario" class="boton" />
</p>
</form>
fieldset: Agrupa un conjunto de controles.
legend: Da una leyenda al fieldset.
tabindex: Orden que seguirá el cursor por cada caja, dándole a la tecla tabuladora.
label: Cuando hace click sobre el texto, también seleccionas la caja.
Cada input debe tener un id, pero además podemos agrupar mediante classes para modificar mas fácilmente los estilos de las cajas.
Minid.net - Formularios Web
Intenta - Agrupar campos con CSS
Armonía - Formularios y mensajes de error







Artículos relacionados
Opciones de discusión
Hay 0 comentarios
No hay comentarios aún. Anímate a participar.
Deja un comentario