Juglar

Lacónico. 10+3.   Menú

Formularios: usabilidad y accesibilidad

Categoría: Diseño Web  -   18 Junio 2006  -  

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>


Comentarios





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

Todos los comentarios serán moderados antes de su publicación.

Disculpen las molestias.