7.1 Formularios
Como se mencionó previamente, los formularios son elementos muy importantes en la programación mediante HTML5 tanto para páginas Web como para aplicaciones móviles. En los siguientes párrafos conocerás, de menor a mayor complejidad, los elementos básicos de los formularios, empezando con la creación de un campo de búsqueda.
Supón que deseas presentar un usuario con un campo de formulario de búsqueda, para ello puedes usar el elemento de entrada con el valor de búsqueda de tipo HTML5. La solucion se presenta enseguida:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form>
<p><label>Búsqueda <input type="search" name="query"/></label></p>
<p><button type="Enviar">Submit</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Puedes usar algún editor de texto y guardar el código anterior y luego abrir el archivo con algún navegador de Internet, el resultado es el siguiente:
El tipo de entrada "search" muestra un campo de entrada de texto que puede diferir visualmente del de un campo de texto normal, según las convenciones estilísticas de la plataforma.
¿Qué debes realizar si deseas presentarle a un usuario un formulario para proporcionar información de contacto? Esto se puede lograr a través del siguiente código:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contacto</title>
</head>
<body>
<form>
<fieldset>
<legend>Información de contacto</legend>
<p><label>Dirección de correo electrónico<input type="email" name="email"/></label></p>
<p><label>Sitio Web <input type="url" name="website"/></label></p>
<p><label>Número de teléfono <input type="tel" name="phone"/></label></p>
</fieldset>
<p><button type="submit">Enviar</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Los tipos de entrada de correo electrónico y URL no implican la escritura de código para validar la entrada. Las entradas restringen el valor a una dirección de correo electrónico válida o URL absoluta. Si el usuario ingresa un valor que no es válido, entonces el agente de usuario advierte al usuario y los datos del formulario no son enviados.
El tipo de entrada “tel” no impone ninguna sintaxis particular, debido a la variedad de formatos de números de teléfono utilizados en todo el mundo. Sin embargo, el nuevo atributo de patrón se puede usar para aplicar una sintaxis particular. Los agentes de usuario varían en términos de los comentarios proporcionados al usuario a medida que completan el formulario.
Ahora bien, cuando el usuario ingresa información errónea puedes programar un mensaje predeterminado que se lo haga saber:
Sitio Web <input type="url" title="Esto no parece una dirección Web válida." name="website"/>
Campos de entrada de fecha y hora
Otra forma de estructurar tu página es pensando en que podrías brindar una fecha y hora al usuario, suponiendo que, por ejemplo, éste desee agendar una cita para algún servicio. Enseguida puedes ver líneas de código que utilizan el elemento de entrada con el valor de tipo HTML5 de “datetime”, para mostrar tanto un widget de selector de fecha como un control de tiempo.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fecha y hora</title>
</head>
<body>
<form>
<p><label>Ingrese fecha y hora <input type="datetime" name="dateAndTime"/></label></p>
<p><button type="submit">Enviar</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Existen dos atributos de elemento de entrada: los atributos mínimo y máximo. Estos pueden limitar el rango de fechas y horas que los usuarios pueden seleccionar. Son útiles en casos en los que no deseas que los usuarios seleccionen fechas u horas de citas en el pasado o seleccionen fechas de nacimiento en el futuro, como se muestra a continuación:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form>
<fieldset>
<legend>Ingrese fecha y hora</legend>
<p><label>Fecha <input type="date" name="date" min="2011-03-15" max="2018-03-14"/></label></p>
<p><label>Hora <input type="time" name="time" min="08:00" max="18:00"/></label></p>
</fieldset>
<p><button type="submit">Submit</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Entradas de número
Ahora, si deseas presentar a un usuario un formulario para ingresar un número, por ejemplo, para ingresar la cantidad de un artículo en un formulario de pedido, puedes utilizar el elemento de entrada con el valor de tipo de número.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form>
<p><label>Cantidad <input type="number" name="quantity"/></label></p>
<p><button type="submit">Submit</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Aquí el tipo de entrada numérica restringe el valor a un número válido, un número de punto flotante para ser específico. Si el usuario ingresa un valor inválido, los datos del formulario no se enviarían.
Al igual que con la entrada de fecha, también se pueden limitar los valores de cantidad con mínimos y máximos. Además, puede usar el atributo “step” para especificar la cantidad por la cual el valor debe incrementarse. En este ejemplo, un cliente debe ordenar en pares, por lo que la cantidad mínima es 2, la máxima 20 y el incremento por unidades es de 2:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form>
<p><label>Cantidad (debe ordenar en múltimos de 2 )</label>
<input type="number" name="quantity" min="2"step="2" max="20" /></p>
<p><button type="submit">Submit</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Selección de un rango de números
Cuando quieres presentarle a un usuario un formulario para seleccionar el número de un rango, debes usar el valor “range”. Esto te puede ser útil, por ejemplo, cuando quieres que el usuario seleccione el volumen de un video.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form>
<p><label>Volumen <input type="range" name="volume" min="0" max="10" step=".5" value="5"></label></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
El tipo de entrada de rango es similar al número porque restringe el valor, pero tiene la peculiaridad adicional de que el monto exacto no es importante. Los valores exactos son importantes en los formularios de pedido de productos, para valores como la cantidad, por lo que se debe usar el “number” en esos casos. El tipo de entrada de rango es útil en casos de entrada relativa o subjetiva, como la asignación de una calificación a un evento o producto.
Al igual que el tipo de entrada de número “number”, puedes especificar valores mínimos y máximos usando los atributos “min” y “max” y un valor de incremento usando el atributo de paso “step”. Estos podrían usarse con el rango para reemplazar los botones de radio comúnmente utilizados para clasificaciones escaladas, como la clasificación de satisfacción.
Seleccionar colores
Continuando con la personalización de formularios, supón que deseas presentar a un usuario un formulario para seleccionar un color; por ejemplo, para personalizar el aspecto de una página Web. Para lograr esto puedes usar el valor “color”.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form>
<p><label>Color de resaltado <input type="color" name="bg"></label></p>
<p><label>Color de fuente <input type="color" name="fg"></label></p>
<p><button type="submit">Submit</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
El tipo de entrada “color” restringe a un valor RGB válido en formato hexadecimal incluyendo el signo de número, "#", mostrado antes de los seis dígitos.
Creación de un menú desplegable editable
Ahora, ¿qué puedes hacer si quieres que el usuario tenga la posibilidad de ingresar texto, pero también pueda elegir entre varias alternativas? Esto se conoce como un desplegable editable o un “combo box”. Puedes utilizar “datalist” para crear una lista de sugerencias utilizando el elemento “option”, el cual asocia la lista con una entrada mediante “list”:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form>
<p><label>Cantidad de donación <input type="text" name="donation" list="donations"></label></p>
<datalist id="donations">
<option value="10.00">10.00</option>
<option value="25.00">25.00</option>
<option value="50.00">50.00</option>
</datalist>
<p><button type="submit">Enviar</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
El elemento “datalist” se usa para definir una lista de valores sugeridos para otros controles de entrada; no se trata de una entrada de formulario o control en sí. Los valores sugeridos se especifican utilizando elementos “option”, tal como lo serían para un elemento “select”, pero nada se representa en la pantalla hasta que el “datalist” esté asociado con un elemento de entrada.
La vinculación de un “datalist” a un campo de entrada se realiza especificando un “id” en el “datalist” y usando esto como el valor del atributo “list” en el elemento de entrada “input”. El resultado es un control que acepta la entrada del usuario y presenta una lista de opciones para que el usuario pueda elegir. Esto no difiere de la funcionalidad de autocompletar o de escritura anticipada implementada en muchos navegadores o en la mayoría de los sitios Web de búsqueda.
Requerimiento de un campo de formulario
Supón que deseas que se complete el campo de un formulario antes de enviarlo. Aplica el atributo “required” en cualquier campo de formulario que deba completarse para enviarlo.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form>
<fieldset>
<legend>Login</legend>
<p><label>Usuario <input type="text" name="username" required></label></p>
<p><label>Clave <input type="password" name="pwd" required></label></p>
</fieldset>
<p><button type="submit">Enviar</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Enfoque automático de un campo de formulario
Para enfocar un campo particular del formulario al cargar una página se aplica el atributo “autofocus“ a un solo campo de formulario:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form>
<p><label>Búsqueda <input type="search" name="query" autofocus></label></p>
<p><button type="submit">Enviar</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Al implementar el atributo de enfoque automático, recuerda que puede especificarse sólo una vez por documento, no por formulario. Para mantener la accesibilidad, un agente de usuario puede respetar una configuración o acción del usuario que anularía la acción de enfoque.
Mostrando el texto del marcador de posición
Supón que deseas mostrar alguna sugerencia o texto de ayuda dentro de un campo de formulario. El atributo de marcador de posición se usa para especificar texto de instrucción cuando el usuario no está enfocado en el campo de la forma.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form>
<fieldset>
<legend>Información de contacto</legend>
<p><label>Dirección de correo electrónico: <input type="email" name="email" placeholder="user@domain.com"></label></<p>
<label>Sitio Web: <input type="url" name="website" placeholder="http://www.domain.com/"></label></<p>
<label>Número de teléfono: <input type="tel" name="phone" placeholder="123-123-1234"></label></p>
</fieldset>
<p><button type="submit">Enviar</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
Cuando se especifica un atributo marcador de posición en un elemento de entrada, un agente de usuario mostrará el valor del atributo marcador de posición en el campo de formulario procesado.
Deshabilitar autocompletar
Supón que deseas evitar que las herramientas de autocompletado llenen un campo de formulario. Establece el atributo de autocompletar “autocomplete“ en "apagado" para cualquier campo de entrada individual, como un campo de contraseña.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form>
<fieldset>
<legend>Login</legend>
<p><label>Usuario <input type="text" name="username"></label></p>
<p><label>Clave <input type="password" name="pwd" autocomplete="off"></label></p>
</fieldset>
<p><button type="submit">Enviar</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
De forma predeterminada, la función autocompletar está habilitada (“on”) para todos los campos de formulario. En la actualidad, puedes confiar en la capacidad de tu navegador para recordar tus contraseñas y la funcionalidad de autocompletar para iniciar sesión en muchos de los sitios Web que visitas. Sin embargo, si especificas un valor de desactivado (“off”) para este atributo, deshabilitará esta funcionalidad.
Restricción de valores
¿Qué hacer si quieres restringir el valor de un campo de entrada según un conjunto de reglas? Usa el atributo “pattern” para especificar una expresión regular que se usará para validar la entrada del usuario.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form>
<p><label>Número de teléfono <input type="tel" name="phone" pattern="[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}" /></label></p>
<p><button type="submit">Enviar</button></p>
</form>
</body>
</html>
Haz clic aquí para observar el resultado.
El atributo de patrón HTML5 te permite especificar una expresión regular para un campo de entrada. En desenfoque del campo de entrada o al enviar el formulario (las implementaciones del navegador varían), la entrada del usuario se validará contra el patrón y si no coincide, se mostrará un error y el formulario no se enviará.
