Introducción a la creación de formularios con HTML5

Explicamos las etiquetas fundamentales que introduce HTML5 a la creación de formularios, tales como nuevos inputs, validación de campos o elementos complejos como deslizadores.

Los Formularios de HTML5 cuentan con nuevas funciones, lo que hace que ciertos problemas del lenguaje sean ahora más fáciles de resolver. Hay muchas novedades en cuanto al proceso de creación de formularios. HTML5 ofrece mejores formas para trabajar al momento de crear los formularios, agregando necesarias funciones, para las cuales JavaScript muchas veces ya no es necesario.

Novedades de los formularios con HTML5

Placeholder

Placeholder de HTML5 es una marca de posición, normalmente un texto de ejemplo que aparece ya escrito en el campo del formulario, y que desaparece cuando hacemos click en él. Suele mostrarse de un color más claro en el formulario. Antes de este nuevo atributo de HTML5 era necesario usar JavaScript, pero ahora esto es mucho más fácil y se realiza con apenas unas simples instrucciones. Pruébalo:

  <label for="buscador">Buscar:</label>
  <input id="buscador" name="buscador" type="text" placeholder="Ingresa el texto a buscar" />

No debes olvidar que existen algunos navegadores que aún no logran soportar este nuevo atributo, placeholder y, por lo mismo, continúan usando JavaScript. Pero si lo que se quiere es poder brindar la misma solución a todos los usuarios que deseen experimentarla (incluídas las antiguas versiones de Internet Explorer, cosa que en la mayoría de proyectos no es ni necesario), lo que se debe hacer es comprobar si tu navegador soporta esta nueva opción que brinda HTML5, de la siguiente manera:

function soportaElem(elem, atrib) {
  var indicador = document.createElement(elem);
  if (atrib in indicador) {
  return true;
  } else {
  return false;
  }
  }

Se puede utilizar la función anterior para determinar si el navegador soporta o no el elemento placeholder, así como cualquier otro. El código devolverá un “true” o “false”, y lo utilizaremos de la siguiente manera:

If (!soportaElem('input', 'placeholder')) {
	***incluir aquí el procedimiento JavaScript apropiado en caso de que no soporte HTML5***
}

Autofocus

Autofocus de HTML5 sirve para poner por defecto el foco en un campo al cargar la página. Es una importante mejora de la usabilidad, sobre todo en páginas de registroÇ/login o búsqueda, puesto que el usuario puede empezar a rellenar el formulario sin necesidad de posicionarse en el campo.

Aunque hasta la página más conocida, Google, es un claro ejemplo de esta novedad, no podemos obviar que el autofocus trae consigo un problema. En muchas ocasiones, si deseamos utilizar el espacio para avanzar en el formulario y ver la información inferior, el autofocus lo impide y presenta un formato lleno de espacios. Twitter eliminó el autofocus por este motivo, cuestión de examinar el proyecto y ver pros y contras. Aquí un ejemplo:

  <label for="texto_a_buscar">Ingresa el texto</label>
  <input id="texto_a_buscar" name="texto_a_buscar" type="text" autofocus />

Esta opción también se puede implementar con JavaScript para aquellos navegadores que no lo soportan en HTML5, al igual que hicimos con placeholder:

if (!soportaElem('input', 'autofocus')) {
  document.getElementById('texto_a_buscar').focus();
  }

Autocomplete

Actualmente los navegadores pueden completar en forma automática ciertos campos de formularios. Esto último puede sonar muy útil, salvo en el caso en que se pierda el dispositivo donde están guardados esos datos.

Autocomplete de HTML5 nos ayuda a solucionar este problema, ya que la característica de autocompletado se puede definir como “on” u “off”, y de esta manera se evitan algunos problemas, o bien se facilita el completado del formulario. Incluso se puede desactivar el autocomplete de una zona del formulario o -si se requiere- del formulario completo. Aquí un ejemplo:

<form>
  Nombre: <input type="text" name="nombre" autocomplete />
  Contraseña: <input type="password" name="contraseña" autocomplete="off" />
  <input type="submit" value="enviar" />
</form>

En el ejemplo anterior, al enfocar (ubicar el cursor) en el espacio del nombre, mostrará un desplegable con los textos que hayas ingresado antes; en cambio, para la contraseña, no desearás que, por descuido, alguien intente ingresar y se autocomplete tu palabra secreta, por lo cual utilizamos autocomplete=”off”.

Required

Siempre ha sido necesaria la validación de formularios, tanto por parte de cliente como de servidor. La validación cliente es muy útil, porque evita que un formulario se envíe si no ha sido validado antes, y en todo caso, es posible avisar al usuario si algún campo no ha sido completado o no cumple con los requisitos correctos.

Required de HTML5, incluye una indicación donde se señala si algún campo del formulario es obligatorio o no.

  <label for="usuario">Ingrese su nombre:</label>
  <input id="usuario" name="usuario" type="text" required />

Hay ciertos navegadores que no soportan esta opción aunque, como en los demás casos, se puede seguir usando JavaScript.

Datalist y List

Es esta oportunidad se muestra un nuevo elemento llamado “datalist”, que no es más que una combinación de los elementos input y select.

<label for="mesdelanio">Ingresa el mes</label>
<input type="text" name="mesdelanio" id="mesdelanio" list="meses"/>
<datalist id="meses">
  <option value="Enero" />
  <option value="Febrero" />
  <option value="Marzo" />
  <option value="Abril" />
  <option value="Mayo" />
  <option value="Junio" />
  <option value="Julio" />
  <option value="Agosto" />
  <option value="Septiembre" />
  <option value="Octubre" />
  <option value="Noviembre" />
  <option value="Diciembre" />
</datalist>

El tradicional select presentaba una lista de opciones a elegir, en forma de lista desplegable. La nueva etiqueta datalist cumple las mismas funciones, aunque simplifica el proceso. Al comenzar a escribir el texto, despliega las opciones que coinciden con el comienzo del texto ingresado, dando al usuario la posibilidad de elegir un contenido diferente.

Nuevas Clases de ” input”

Esta es una forma de saber si nuestro navegador puede soportar los nuevos tipos de input de HTML5, mediante una función que nos entregará el resultado verdadero o falso:

function soportaInput(tipo_entrada) {
  var entrada = document.createElement('input');
  input.setAttribute('type', tipo_entrada);
  if (input.type == 'text') {
  return false;
  } else {
  return true;
  }
  }

Input type search: campos de búsqueda

La función de búsqueda incluida en HTML es un elemento de texto, aunque con un aspecto exterior más adecuado a su función, la búsqueda de un argumento ingresado por el usuario. Se puede utilizar la búsqueda sencilla o un tipo de búsqueda que incluye la historia de los elementos buscados.

  <label for="mibusqueda">Ingrese el argumento de búsqueda: </label>
  <input id="busqueda" type="search" placeholder="texto a buscar">

Como es notorio en este ejemplo, la inclusión del atributo placeholder mostrará la frase “texto a buscar” dentro del casillero de búsqueda, la cual desaparecerá en cuanto el usuario comience a ingresar el argumento.

Input type email, type url y type tel: Información de Contacto

Entre las novedades de HTML5, se han agregado tres clases de contactos: número de teléfono, correo electrónico y dirección de sitio web.

  <label for="correo_e">Tu correo-e</label>
  <input id="correo_e" name="correo_e" type="email" />
  <label for="sitioweb">Tu página web</label>
  <input id="sitioweb" name="sitioweb" type="url" />
  <label for="telefono">Tu número de teléfono</label>
  <input id="telefono" name="telefono" type="tel" />

Según en qué navegador estés usando el elemento, las opciones pueden cambiar. Por ejemplo, si usas un navegador normal, todo aparecerá como un simple texto, pero si navegas desde un smartphone el teclado cambiará, aunque debes tener en cuenta que tu SmartPhone debe soportar HTML5.

Sliders

HTML5 también incluye sliders, esos elementos que se deslizan entre dos valores previamente definidos y especifican un rango. Digamos que el ejemplo típico es el slider del volumen de audio. Los rangos pueden determinarse, aunque este nuevo elemento asume una extensión 0-100, si no se especifica otra.

<input type="range" min="0" max="80" value="0" />

Si ingresamos la codificación anterior en nuestra página, podremos ver una línea horizontal con un elemento deslizante sobre ella, que podremos mover a izquierda o derecha con ayuda del ratón. En este caso, podrás seleccionar un valor en el rango 0-80, aunque la página presentará inicialmente el valor 0.

Sin embargo, aquí falta algo, porque aun cuando podamos deslizar el indicador, no tenemos idea del valor que éste asume. Esto lo solucionamos combinando unas líneas en Java Script que nos mostrarán el valor cada vez que movamos el elemento deslizante.

<input type="range" min="0" max="80" value="0"onchange="mostrarValor(this.value)" />
  <span id="range">0</span>
  <script type="text/javascript">
  function mostrarValor(nuevoValor)
  {
  document.getElementById("range").innerHTML=nuevoValor;
  }
  </script>

Spinners

El control denominado spinner permite reducir o incrementar un valor mediante unos controles con forma de flecha que se ubican a la derecha del casillero que almacena el número. En el ejemplo siguiente se puede hacer click sobre las flechas para pasar gradualmente desde 0 a 100.

<label for="numero">Aumenta o disminuye el valor</label>
<input id="numero" name="numero" type="number" min="0" max="100" />

Calendarios, Fecha, Hora

Los populares calendarios de JavaScript han sido incluidos en HTML5, ahora con variadas nuevas formas de selección:

• date : selecciona la fecha completa, día-mes-año.
• datetime: selecciona la hora completa más el día, mes, año y zona horaria (timezone).
• datetime- local: incluye la hora actual, día, mes y año (no incluye zona horaria).
• time: selecciona la hora actual en horas y minutos.
• month: selecciona el mes y el año.
• week : indica la semana (un número de 1 a 52) y el año.

Aquí va un ejemplo:

<input type="date" name="fecha_actual" />

Estas son las novedades en cuanto a formularios con HTML5, los cuales ayudan a una mejor funcionalidad de los navegadores y a un avance en cuanto a la usabilidad y la reducción de la necesidad de usar javascript, lo cual es sin duda un progreso indiscutible hacia la sencillez y eficiencia de la programación web.