Formularios Web

Los formularios web son la interface ms importante de todas, permiten a los usuarios insertar
datos, tomar decisiones, comunicar informacin y cambiar el comportamiento de una aplicacin. Para
obtener informacin precisa a travs del formulario, ste debe ser obvio e inequvoco, de modo que el
usuario no tenga dudas sobre lo que tiene que escribir en cada campo.
PRINCIPIOS BSICOS SOBRE FORMULARIOS WEB.
Reducir el esfuerzo fsico.

A la mayora de los usuarios no les gusta escribir con el teclado ms de lo necesario.

No pedir la misma informacin ms de una vez.
Si es posible recordar los datos de las otras visitas de usuario a nuestro sitio.
No pedirle al usuario capturar datos derivados como la edad, en su lugar pedir la fecha de nacimiento.

Reducir el esfuerzo cognitivo del usuario.

Disear formularios sencillos y fciles de comprender.
Evitar pedir informacin que parezca innecesaria.

A los usuarios les molestan las preguntas que consideran irrelevantes para sus objetivos.
Cuidar la forma en la que pedimos datos obligatorios.
Mostrar parte del contenido al que se tendr acceso si se registra, puede ayudar a que el usuario se
sienta intrigado y est ms dispuesto a proporcionar informacin.
Si parte de la informacin que se pide es obligatoria, mientras que otros campos son opcionales
utilizar alguna pista visual para diferenciar unos de otros.

CONTROLES DE FORMULARIO.
En general, los distintos elementos del formulario, como las reas para introducir texto o las casillas de
verificacin, reciben el nombre de controles, controles del formulario o widgets.

CONTROLES DE FORMULARIO.
Despus de haber decidido que controles vamos a utilizar en el formulario, podemos empezar a implementarlo
mediante HTML, sin embargo necesitamos estudiar algunos conceptos sobre diseo de pginas especficas de
formularios.
Mantener la coherencia visual.
El formulario de la izquierda carece de coherencia visual, porque los extremos derechos de los campos no
estn alineados unos con otros. El formulario de la izquierda es mucho ms agradable visualmente, porque
los campos son de la misma longitud.

Controlar el foco del cursor y el orden de tabulacin.

El foco hace referencia al control en el que se encuentra el cursor, para especificar un orden de tabulacin
personalizado podemos asignar un valor al atributo tabindex a cada elemento del formulario afectado, de la
siguiente forma:
<input type=text tabindex=n name=txtDireccion id=txtDireccion />
Mostrar los campos en el orden correcto.
Agrupar los controles por categoras.
Esto puede ayudar a clarificar la estructura del formulario, sobre todo en los paneles de control largos. Para
ello podemos utilizar bordes, la etiqueta <fieldset> o las diferentes caractersticas de las fuentes, como el
tamao y el color.
Siempre dar retroalimentacin.
Los usuarios agradecen que les proporcionemos informacin que les indique que van por buen camino o que
les diga que se ha encontrado un fallo. De este modo, el usuario podr asegurarse de que el sistema ha
recibido correctamente los datos, y cuando se produce un fallo, la informacin de errores puede notificrselo
al usuario lo antes posible, y pueden ser fcilmente corregidos.
Hay dos tipos de generales de informacin: modal y no modal.
Mejorar el aspecto visual de los controles.

Formularios en HTML5.
HTML5 vuelve a estas funciones estndar agregando nuevos atributos, elementos y una API completa.
Ahora la capacidad de procesamiento de informacin insertada en formularios en tiempo real ha sido
incorporada en los navegadores y completamente estandarizada.
El elemento <form>.
La estructura sigue siendo la misma, pero HTML5 ha agregado nuevos elementos, tipos de campo y atributos
para expandirlos tanto como sea necesario y proveer as las funciones actualmente implementadas en
aplicaciones web.
Existen nuevos atributos para el elemento <form>:
autocomplete Este es un viejo atributo que se ha vuelto estndar en esta especificacin.
Puede tomar dos valores: on y off. El valor por defecto es on. Cuando es configurado como off los
elementos <input> pertenecientes a ese formulario tendrn la funcin de autocompletar desactivada.
Puede ser implementado en el elemento
<form>
o en cualquier elemento
<input>
independientemente.
novalidate Una de las caractersticas de formularios en HTML5 es la capacidad propia de validacin.
Los formularios son automticamente validados. Para evitar este comportamiento, podemos usar
el atributo novalidate. Para lograr lo mismo para elementos <input> especficos, existe otro
atributo llamado formnovalidate.
A continuacin elaboraremos una nueva pgina en HTML5 en la que se muestra el uso de cada uno de estos
nuevos elementos, al archivo podemos llamarle Formularios.html, recuerden probar en FireFox y Crome.
<!DOCTYPE html>
<html>
<head>
<title>Uso de Formularios HTML5</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<header>
<h1>Formularios en HTML5</h1>
</header>
<br>
<section>
<form name="miformulario" id="miformulario" method="get">
<p>Campo de texto.</p>
<p>El atributo placeholder representa una sugerencia corta, una palabra o
frase provista para ayudar al usuario a ingresar la informacin
correcta.</p>
<p>El atributo required no dejar que el formulario sea enviado si el campo
se encuentra vaco.</p>
<label>Nombre: <input type="text" name="txtNombre" id="txtNomre"
placeholder="Escribe tu nombre" required autofocus></label>
<br>
<p>Campo tipo E-Mail: Permite capturar una direccin de e-mail vlida.</p>
<label>E-Mail: <input type="email" name="miemail" id="miemail"
required></label>
<br>
<p>Campo tipo Search: Este campo no controla la entrada, es solo
una indicacin para los navegadores.</p>
<label>B&uacute;squeda: <input type="search" name="busqueda" id="busqueda"
placeholder="Escribe tu busqueda"></label>
<br>
<p>Campo tipo Url: Permite capturar una direccin URL vlida.</p>
<label>URL: <input type="url" name="miurl" id="miurl"></label>

<br>
<datalist id="informacion">
<option value="7112233" label="Telfono 1">
<option value="7889900" label="Telfono 2">
</datalist>
<p>Campo tipo Tel&eacute;fono: Este campo es para nmeros telefnicos.
Este campo no controla la entrada, es solo una indicacin para los
navegadores.</p>
<label>Tel&eacute;fono: <input type="tel" name="telefono" id="telefono"
list="informacion"></label>
<br>
<p>Campo tipo N&uacute;mero: Este campo solo es vlido cuando recibe una
entrada numrica.</p>
<label>N&uacute;mero: <input type="number" name="numero" id="numero" min="0"
max="10" step="5"></label>
<br>
<p>Campo tipo Range o Rango: Este nuevo control le permite al usuario
seleccionar un valor a partir de una serie de valores o rango.</p>
<label>N&uacute;mero: <input type="range" name="rango" id="rango" min="0"
max="10" step="5"></label>
<br>
<p>Campo tipo Fecha</p>
<label>Fecha: <input type="date" name="fecha" id="fecha"></label>
<br>
<p>Campo tipo Week</p>
<label>Semana: <input type="week" name="semana" id="semana"></label>
<br>
<p>Campo tipo Month</p>
<label>Mes: <input type="month" name="mes" id="mes"></label>
<br>
<p>Campo tipo Time</p>
<label>Hora: <input type="time" name="hora" id="hora"></label>
<br>
<p>Campo tipo Campo DateTime</p>
<label>Fecha - Hora: <input type="datetime" name="fechahora"
id="fechahora"></label>
<br>
<p>Campo tipo Campo DateTime-Local</p>
<label>Fecha - Hora Local: <input type="datetime-local" name="tiempolocal"
id="tiempolocal"></label>
<br>
<p>Campo tipo Color: Campo que permite elegir un color.</p>
<label>Color: <input type="color" name="color" id="color"></label>
<input type="reset" value="Limpiar Campos"> <input type="submit"
value="Enviar">
</form>
</section>
</body>
</html>