vagacode

Una de las técnicas más utilizadas para que una página web tenga cierto grado de interactividad con los usuarios es el uso de formularios que permiten que se trasmita o reciba información específica.

La etiqueta básica de los formularios es form que a su vez puede contener cualquier otra aunque las específicas son button, fieldset, input, label, legend, option, select y textarea que tienen un número muy amplio de atributos, algunos de ellos muy complejos.

En estos días, el envío y recepción de datos se suele hacer con Ajax lo cual simplifica las cosas y eso hace que los códigos sean menos escabrosos ya que si queremos, podemos evitar el uso de la etiqueta form y centrarnos en la etiqueta input que es la que se ha usado tradicionalmente para introducir textos comunes o con caracteres irreconocibles (los típicos asteriscos que aparecen cuando se nos pide ingresar una contraseña):

<input type="text" value="">
<input type="password">
<input type="submit">

Como se ve, la etiqueta es la misma y sólo cambia el atributo type que permite otros valores como button, checkbox, file, hidden, image, radio, reset y submit.

Desde la llegada del HTML5, los tipos disponibles se han ampliado para facilitar el filtrado de ingresos o seleccionar datos muy específicos pero no todos ellos han sido implementados en los distintos navegadores.

Por ejemplo, los tipos específicos para fechas no son reconocidas en Mozilla Firefox:

datetime se usa para ingresar fechas genéricas
datetime-local admite el ingreso de fecha y hora locales
month admite el ingreso de un mes y un año
time admite el ingreso de una hora
week admite el ingreso de una semana y un año

Otros tienen un uso muy limitado ya que las variantes particulares son múltiples:

search se usa para buscar textos
tel se usa para ingresar números telefónicos

Quizás, los más interesantes son:

En los tipos number y range podemos definir atributos extras:

max indica el valor mínimo aceptado
min indica el valor máximo aceptado
step indica el intervalo entre ambos valores

Ingrese un número par (entre 0 y 10) <input type="number" min="0" max="10" step="2" value="4">

Otra alternativa que se ha agregado en HTML5 es el atibuto list que nos permite asociar una serie de datos que son aquellos que esperamos que el usuario escriba. Esa lista la debemos incluir en una etiqueta datalist cuyo id será el valor a usar en list y cuyo contenido será una serie de etiquetas option.

<input list="continentes">
<datalist id="continentes">
	<option value="Asia">
	<option value="Europa">
	<option value="América">
	<option value="Oceanía">
	<option value="Africa">
</datalist>

Por ejemplo, si solicitamos que se ingrese el nombre de un continente apenas el usuario escribe una letra, se despliegan las opciones disponibles asociadas ya que funciona con auto-completado:

Otra etiqueta que en HTML5 se combina con input es keygen que se usa mostrar dos alternativas de encriptación que el usuario puede seleccionar antes de enviar un dato. Esta clave privada será guardada por el navegador y usando el atributo keytype se puede seleccionar el algoritmo a utilizar (rsa, dsa, ec) para generarla:

<form>
	nombre: <input type="text" name="usuario">
	seguridad: <keygen name="securidad">
	<input type="submit">
</form>

Por último, la etiqueta output se usa para mostrar el resultado de algún cálculo. No sé hasta que punto tiene alguna utilidad práctica porque si uno busca ejemplos en la web, siempre se topará con el mismo levemente modificado. De todas maneras, existe y seguiré la corriente:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
	<input id="a" value="50" type="number">
	+
	<input id="b" value="50" type="number">
	=
	<output name="x" for="a b" class="celda">101</output>
</form>