Muchos desarrolladores web de aplicaciones hacen uso formularios para el envío y recepción de información, pero no todos hacen formularios accesibles y usables, que permitan además validar los campos del formulario através de javascript (en caso de que este habilitado).
En esta situación haremos uso de la accesibilidad web y la usabilidad web, para en conjunto, realizar formularios accesibles con javascript en los desarrollos web de aplicaciones que realicemos.
Ventajas formularios accesibles
- Compatible con la totalidad de navegadores web.
- No es necesario tener javascript habilitado.
- Permite validar los campos del formulario por javascript.
- Se cumplen los estándares web de la W3C.
- Se cumplen las pautas de accesibilidad web.
Ejemplo formularios accesibles con javascript
Descarga el ejemplo Formularios accesibles con javascript.
En primer lugar debemos añadir entre las etiquetas head el código javascript para validar el formulario accesible:
<script type="text/javascript">
function validarFrm() {
if(!document.frm['nombre'].value) { document.frm['nombre'].focus(); alert('El campo "nombre" es obligatorio.'); }
else if(!document.frm['apellidos'].value) { document.frm['apellidos'].focus(); alert('El campo "apellidos" es obligatorio.'); }
else if(!document.frm['email'].value) { document.frm['email'].focus(); alert('El campo "email" es obligatorio.'); }
else if(!document.frm['consulta'].value) { document.frm['consulta'].focus(); alert('El campo "consulta" es obligatorio.'); }
else { document.frm.submit(); }
return false;
}
</script>
Más tarde, entre las etiquetas body añadimos el código html del formulario usable:
<form name="frm" action="#submit" enctype="multipart/form-data" method="post" onsubmit="return validarFrm()">
<fieldset>
<legend>Formulario accesible</legend>
<p>Ejemplo de <strong>formulario accesible</strong> con <em>javascript</em>, no olvide que todos los campos marcados con (*) son obligatorios.</p>
<label for="nombre">Nombre *<input type="text" name="nombre" id="nombre" accesskey="n" tabindex="1" /></label>
<label for="apellidos">Apellidos *<input type="text" name="apellidos" id="apellidos" accesskey="a" tabindex="2" /></label>
<label for="email">Email *<input type="text" name="email" id="email" accesskey="e" tabindex="3" /></label>
<label for="telefono">Teléfono <input type="text" name="telefono" id="telefono" accesskey="t" tabindex="4" /></label>
<label for="consulta">Consulta *<textarea name="consulta" id="consulta" accesskey="c" tabindex="5" cols="1" rows="1"></textarea></label>
<label for="submit"><input type="submit" name="submit" id="submit" accesskey="s" tabindex="6" value="Enviar" /></label>
</fieldset>
</form>
El código html referente al formulario usable contendrá:
- Etiquetas fieldset, legend, label e input.
- Etiqueta form con el atributo onsubmit.
- Llamada a la función en javascript para validar los campos del formulario.
- Los atributos name, id, accesskey y tabindex en los campos del formulario.
- Campo tipo submit para poder enviar el formulario sin javascript.
Si seguimos las prácticas detalladas anteriormente, nuestros formularios accesibles serán además formularios usables por cualquier usuario con acceso al sitio web. Responderé cualquier duda referente a las etiquetas y/o atributos usados en el artículo.
08 Abril 2009, a las 20:05
necesito saber como al form accesible que hicistes le pongo codigo para que mande lo que escriben en comentario a mi correo, porque ahi dice submit pero mailto y el nombre del correo no aparece
08 Abril 2009, a las 23:20
@natalia: tendrías que realizar la parte de programación (según el lenguaje que uses: PHP, ASP, etc) para poder enviar el email sin necesidad de hacer uso de un gestor de correo.
Un saludo,
Alejandro Arco
04 Mayo 2009, a las 3:08
Que bueno, justo lo que estaba buscando!
07 Mayo 2009, a las 17:57
¿cómo hago para que los datos enviados lleguen a un archivo .xls o .txt? necesito crear una lista con todos los datos enviados desde el form
26 Julio 2009, a las 4:17
HOLA A TODOS NECESITO CREAR UN FORMULARIO DE COMENTARIOS , PERO QUE ESTE ENVIE LO COMENTADO EM LA MISMA WEB TAL COMO ESTE DE ABAJO..xD
23 Agosto 2009, a las 12:40
[...] unos meses publiqué un artículo denominado formularios accesibles con javascript, para ello usaba el atributo onsubmit de la etiqueta form para validar el formulario web con [...]