Un elemento muy interesante para la elaboración de documentos HTML es el formulario. Consiste en un conjunto de elementos que vamos a utilizar para recabar información al usuario, y procesarla posteriormente.  En este campo, html5 ha profundizado añadiendo nuevos campos e incorporando atributos para la validación de ellos, pero eso lo veremos en la segunda parte del apartado.

Para crear un formulario tenemos las etiquetas <form>....</form>. Entre las cuales colocaremos los distintos elementos que comprenden nuestro formulario. Además de los elementos específicos del formulario, también podemos poner cualquier elemento HTML.

Vamos a ver ahora las distintas etiquetas y sus atributos:

Los principales atributos de la etiqueta <form> son:

• action: Es el atributo más importante de la etiqueta <form>, y a través de él, indicamos la url de la aplicación CGI o un archivo php,asp, o jsp. En este atributo indicamos la acción que se realizara cuando se envie el formulario.
• method: Con este atributo indicamos el método de envio de los datos del formulario. Puede ser de dos clases:
  • Get: Utiliza la url del navegador para enviar los datos, siendo visibles para el usuario. Como cuando hacemos una consulta en google y aparece esa dirección tan larga en el navegador.  Nos muestra la información de la busqueda que estamos haciendo.
  • Post: Es el más utilizado y seguro. Se envian los datos sin necesidad de mostrarlos.
• name: Establece un nombre al formulario con el cual poder referirnos a él desde lenguajes tanto de script como del lado del servidor.

En HTML tenemos varios elementos para el formulario dependiendo de la información que queremos obtener del usuario. Los principales son: 

• <input />
• <textarea>.......</textarea>
• <select>.......</select>

Todas estas etiquetas tienen un atributo fundamental y obligatorio, name, que es el identificador del campo, y debe ser único.

Después tenemos la etiqueta <label>.....</label>, que nos permite colocar la descripción del campo. De tal forma que si pinchamos en el texto que contiene esta etiqueta, nos llevara al elemento input al que hace referencia. Por ejemplo:

<label for="nombre">Nombre</label>

<input type="text" name="nombre" id="nombre" value=" " />

Una etiqueta muy importante para la creación de formularios, es <input>. Esta nos permite crear varios campos que mencionaremos seguidamente. Esta etiqueta variara dependiendo del atributo type que establece el tipo de campo que será:

Los diferentes tipos de input son:

• text: Nos permite crear una caja de texto de una sola línea, donde el usuario podrá poner lo que desee.  A su vez tiene una serie de atributos como:
  • size="numero": Indica el tamaño de la caja.
  • maxlegth="numero": Especifica el número máximo de caracteres que se podrá introducir en la caja de texto.
  • value="texto": Valor del campo.
  • readonly: Para visualizar el campo de texto, pero que el usuario no lo pueda modificar.

<input type="text" name="nombre" size="20" maxlenght="50" />

• password: Se suele utilizar para introducir contraseñas. Es una caja de texto, en la que los caracteres introducidos se cambian por "*", para que no se vea su contenido. Tiene los mismos atributos que el campo tipo text.

<input type="password" name="clave" size="10" maxlenght="16" />

• checkbox: Para crear casillas de verificación de forma cuadrada. Ofrece la posibilidad de que el usuario pueda elegir uno o varias posibilidades de las que le ofrecemos. Tiene dos atributos principales:
  • Value="text": Valor que enviara si se selecciona el campo.
  • checked: Indica que la casilla aparecera marcada por defecto.

<input type="checkbox" name="españa" value="andalucia" />Andalucia

<input type="checkbox" name="españa" value="madrid" />Madrid 

• radio: Para crear botones de opción. La diferencia con los anteriores es que además de ser redondos, solo nos permite elegir una opción por grupo. Los grupos se crean colocando el mismo valor al atributo name de los campos. Posee los mismos atributos que el atributo "checkbox".

<input type="radio" name="españa" value="andalucia" />Andalucia

<input type="radio" name="españa" value="madrid" />Madrid 

• hidden: Este tipo de campos no aparecen en la página web, y suele utilizarse para enviar parámetros de configuración.

 <input type="hidden" name="remitente" value="www.infogranada.tk" />

• submit: Con él creamos un botón para poder enviar todos los datos que contiene nuestro formullario a un servidor. Estos datos se enviarán a la página o CGI especificado en el atributo action, o en el archivo que hacemos referencia en el atributo action.
  • value="text": Texto que aparecera en el botón.
  • name="Nombre del elemento para las llamadas de lenguajes tipo Script".

<input type="submit" name="enviar" value="enviar" />

• reset: Botón cuyo efecto es devolver todos los campos del formulario a su  valor por defecto. Dispone de los mismos atributos que el tipo "submit".

<input type="reset" name"Borrar" value="restaurar" />

• button: Es también un botón, solo que su efecto no esta definido, como en los tipos submit y reset. El efecto de este botón habrá que definirlo en otro lenguaje distinto al html, como por ejemplo javascript, jQuery.

<input type="button" name="ocultar" value="ocultar div" onclick="ocultar();" />

si analizamos esta etiqueta, podemos apreciar como el evento de este botón esta definido en el atributo onclick. Este dice que si se pulsa el botón se ejecute la funcion ocultar(), que debe estar definida antes. Con value como en los tipos submit y reset, indicamos el texto que queremos que aparezca en el botón.

Para terminar, os dejo un pequeño resumen para que intentar dejarlo todo lo más organizado posible.

Los atributos opcionales

Atributos estandar

• accesskey: Especifica un atajo de teclado apra acceder a un elemento.
• class: Especifica un nombre de clase de un elemento.
• dir: Especifica la dirección del texto para el contenido de un elemento.
• id: Especifica un identificador único para un elemento.
• lang: Especifica un código de idioma para el contenido en un elemento.
• style: Especifica un estilo en línea de un elemento.
• tabindex: Especifica el orden de tabulación de un elemento.
• xml:lang: Especifica un código de idioma para el contenido de un elemento en los documentos xhtml.

Los atributos de eventos

Las listas son compatibles con los siguientes atributos de eventos:

• onblur: Secuencia de comandos para ser ejecutado cuando un elemento pierde el foco
• onclick: Secuencia de comandos para ser ejecutado cuando se pulsa sobre el enlace
• ondbclick: Secuencia de comandos para ser ejecutado cuando se hace doble click en el enlace.
• OnFocus: Secuencia de comandos para ser ejecutado cuando un elemento obtiene el foco.
• onmousedown: Script que se ejecuta cuando se pulsa sobre el enlace.
• onmousemove: Script que se ejecuta cuando el puntero del ratón se mueve.
• onmouseout: Script que se ejecutará cuando el puntero del ratón se mueve fuera de un enlace.
• onmouseover: Script que se ejecutará cuando el puntero del ratón se mueve sobre un enlace.
• onmouseup: Script que se ejecutará cuando el botón del ratón es liberado.
• onkeydown: Script que se ejecuta cuando se pulsa una tecla.
• onkeypress: Script que se ejecuta cuando se pulsa una tecla y se suelta.
• onkeyup: Script que se ejecuta cuando se suelta una tecla.

Ya en el próximo tema veremos los elementos que ha introducido html5 en el campo de los formularios y hare una pequeña introduccion para ver que aspectos trataremos en temas siguientes de html5.