Unidad 8. Formularios (I)

Un formulario es un elemento que permite recoger datos introducidos por el usuario. Los datos serán procesados por el programa que indiquemos. Los formularios se utilizan para obtener distintos tipos de información, por ejemplo, los datos de una compra, inscribirse en páginas, dar opiniones en sitios web, etc.

Los formularios son una excelente herramienta para comunicarse con los usuarios pero implican unos riesgos en seguridad que hay que tener en cuenta ya que son el camino más usado para ataques maliciosos.

En este vídeo puedes ver una introducción a los formularios:

En este vídeo puedes ver cómo recibir datos de un formulario:

En este vídeo puedes ver diferentes tipos de entradas en los formularios:

8.1. La etiqueta <form>

Aunque un formulario utiliza la etiqueta form como parte central, necesita de otras etiquetas para poder funcionar, normalmente incluye las etiquetas input y label, y opcionalmente otras más. Es decir, un formulario es un componente de una página web que está formado por varios elementos, como campos de texto, casillas de verificación, opciones desplegables, botones y otras etiquetas para darle formato.

Todos los elementos del formulario están dentro de las etiquetas <form> y </form>.

Por ejemplo, el siguiente código muestra un formulario básico:

<form action="#" method="post" >
   <p>Escribe aquí tu petición <input type="text" name="mensaje"></p>
   <p><input type="submit" value="Enviar"></p>
</form>

Produce este resultado:

Escribe aquí tu petición

Como vemos, la estructura de un formulario es la siguiente:

El formulario empieza con la etiqueta <form> y acaba con la etiqueta </form>. Entre estas dos etiquetas podemos escribir las etiquetas que queramos para declarar los campos de entrada o controles del formulario mediante la etiqueta <input>, también podemos escribir etiquetas de html para describir cada campo del formulario, en este caso hemos utilizado etiquetas <p> aunque es más apropiado utilizar etiquetas label, como veremos más adelante.

Dentro de la etiqueta <form> ponemos los atributos que necesitemos, normalmente el atributo action para indicar el archivo que tratará los datos y el atributo method con el método para enviar los datos.

También hay que poner un botón para enviar el formulario.

Una vez vista la estructura general, a continuación vamos a ir explicando todos estos elementos con más detalle.