Formularios

Introduccion

HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web. Sin embargo, HTML también incluye elementos para crear aplicaciones web. El estándar HTML permite crear formularios para que los usuarios interactúen con las aplicaciones web.

Los formularios nos permiten solicitar información a los usuarios para procesarla y almacenarla. Un formulario actúa como un contenedor donde se encuentran sus componentes que permiten la entrada de datos. Toda la información obtenida por un formulario puede ser procesada por un lenguaje de programación como PHP, entregarla a un servidor Web como Apache y almacenarla en una base de datos como MySQL.

Objetivos

1. Conocer como se insertan formularios a las paginas Web.
2. Conocer como insertar cajas de texto.
3. Conocer como insertar cajas de contrasena.
4. Conocer como insertar areas de texto.
5. Conocer como insertar listas desplegables.
6. Conocer como insertar casillas de verificacion.
7. Conocer como insertar botones de seleccion.
8. Conocer como insertar botones de comando.
9. Conocer como insertar botones de reseteo.
10. Conocer como insertar botones de envio.

Insertar formularios

Para implementar los formularios haremos uso de la etiqueta <form>. La etiqueta <form> encierra todos los elementos del formulario (botones, cuadros de texto, listas desplegables, etc).

Ejemplo:

<form method="GET/POST" action="pagina_destino.extension">
     <!--Aqui se colocan los elementos del formulario-->
</form>

La mayoría de formularios utilizan sólo los atributos "action" y "method". El atributo "action" indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios.

El atributo "method" establece la forma en la que se envian los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method="get" o el atributo method="post".

Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más información que el método GET. En general, el método GET admite como máximo el envío de unos 500 bytes de información. La otra gran limitación del método GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras que los datos enviados mediante POST no se pueden ver tan fácilmente.

Si no sabes que método elegir para un formulario, existe una regla general que dice que el método GET se debe utilizar en los formularios que no modifican la información (por ejemplo en un formulario de búsqueda). Por su parte, el método POST se debería utilizar cuando el formulario modifica la información original (insertar, modificar o borrar alguna información).


Caja de texto

Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier texto.

Ejemplo:

<form method="post" action="">
     Nombre: <input type="text" name="" value="" size="" maxlength="">
</form>

El atributo "type" diferencia a cada uno de los diez controles que se pueden crear con la etiqueta <input>. Para las cajas de texto, su valor es "text".

El atributo "name" es el más importante en los campos del formulario. De hecho, si un campo no incluye el atributo "name", sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario.

Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor para que procese la información y genere una respuesta adecuada. En el servidor, la aplicación que procesa los datos debe obtener en primer lugar toda la información introducida por el usuario. Para ello, utiliza el valor del atributo "name" para obtener los datos de cada control del formulario.

Como el valor del atributo "name" se utiliza en aplicaciones programadas, es esencial ponerse de acuerdo con el programador de la aplicación, no se deben utilizar caracteres problemáticos en programación (espacios en blanco, acentos y caracteres como ñ o ç).

El atributo "size" permite establecer el tamaño, en caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible en muchos formularios, en los que algunos campos como la dirección deben mostrar más caracteres de lo normal (<input size="100" ...) y otros campos como el código postal deben mostrar menos caracteres de lo normal (<input size="5"...). Si no se especifica un tamaño, el navegador muestra el cuadro de texto con un tamaño predeterminado.

El atributo "maxlength" permite establecer el máximo número de caracteres que el usuario puede introducir en un cuadro de texto. Su uso es imprescindible para campos como el código postal, el número de la Seguridad Social y cualquier otro dato con formato predefinido y limitado.

El atributo "readonly" permite que el usuario pueda ver los contenidos del cuadro de texto pero no pueda modificarlos.

El atributo "disabled" deshabilita un cuadro de texto de forma que el usuario no pueda modificarlo y además, el navegador no envía sus datos al servidor.

Caja de password

La única diferencia entre este control y la caja de texto, es que el texto que el usuario escribe en una caja de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.

Ejemplo:

<form method="post" action="">
     Contraseña: <input type="password" name="" value="" size="" maxlength="">
</form>

Cambiando el valor del atributo "type" por "password" se transforma la caja de texto en un cuadro de contraseña. Los demas atributos son iguales a los de la caja de texto y se utilizan de la misma forma.

Area de texto

Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que es mucho más cómodo de introducir que en un campo de texto.

Ejemplo:

<form method="post" action="">
     Descripcion:
     <br/>
     <textarea name="" cols="" rows=""></textarea>
</form>

Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura y altura. La anchura del área de texto se controla mediante el atributo "cols", que indica las columnas o número de caracteres que se podrán escribir como máximo en cada fila. La altura del área de texto se controla mediante "rows", que indica directamente las filas de texto que serán visibles.

El principal inconveniente de los elementos <textarea> es que el lenguaje HTML no permite limitar el número máximo de caracteres que se pueden introducir. Mientras los elementos <input type="text"> disponen del atributo "maxlength", las áreas de texto no disponen de un atributo equivalente, por lo que sólo es posible limitar el número de caracteres mediante su programación con JavaScript.

Lista desplegable

Las listas desplegables son un conjunto de opciones de las cuales se puede seleccionar una o varias a la vez. Para ello usaremos las etiquetas <select> y <option>.

Ejemplo:

<form method="post" action="">
     <select name="">
          <option value="S" selected="selected"> SI </option>
          <option value="N"> NO </option>
     </select>
</form>

Donde:

select - Es la que define que es una lista.
option - Es la que indica las opiciones de la lista.

El atributo "name" es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo del formulario.

El atributo "size" indica el número de opciones visibles. Si le asignamos 1, la selección se presentará como un menú desplegable. Si le asignamos un valor mayor se presentará como una lista con barra de desplazamiento.

El atributo "multiple" indica si se pueden realizar varias opciones a la vez.

El atributo "value" de cada opción es obligatorio, ya que es el dato que se envía al servidor cuando el usuario envía el formulario.

Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo "selected" a la opción deseada.

Casillas de verificacion

Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar una o varias opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes.

Ejemplo:

<form method="post" action="">
     Temas de interes: <br/>
     <input type="checkbox" name="deportes" /> Desportes <br/>
     <input type="checkbox" name="musica" checked="checked" /> Musica <br/>
     <input type="checkbox" name="teatro" /> Teatro <br/>
</form>

El valor del atributo "type" para estos controles de formulario es "checkbox". Como se muestra en el ejemplo anterior, el texto que se encuentra al lado de cada checkbox no se puede establecer mediante ningún atributo, por lo que es necesario añadirlo manualmente fuera del control del formulario. Si no se añade un texto al lado de la etiqueta <input /> del checkbox, el usuario sólo ve un pequeño cuadrado sin ninguna información relativa a la finalidad de ese checkbox.

Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo "checked". En cualquier otro caso, el checkbox permanece sin seleccionar.

Radio botones

Estos controles son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante. Se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la opción que estaba seleccionaba.

Ejemplo:

<form method="post" action="">
     Sexo: <br/>
     <input type="radio" name="sexo" value="hombre" checked="checked"/> Hombre
     <input type="radio" name="sexo" value="mujer"/> Mujer
</form>

El valor del atributo "type" para estos controles de formulario es "radio".

El atributo "name" se emplea para indicar que los controles están relacionados. Por lo tanto, cuando varios controles tienen el mismo nombre, el navegador sabe que están relacionados y puede deseleccionar una opción del grupo cuando se seleccione otra opción.

El atributo "value" indica el valor que almacena el control que esta seleccionado. Observe que el control esta relacionado con varios por su nombre, esto quiere decir que los controles seran reconocidos como uno solo por el servidor, la diferencia sera el valor que almacenan los controles del grupo y el que recibira el servidor sera el control seleccionado.

Si se quiere mostrar un radio boton seleccionado por defecto, se utiliza el atributo "checked". En cualquier otro caso, el radio boton permanece sin seleccionar.

Boton de comando

Los botones de comando permiten que el usuario al hacer clic en el boton, se desencadene cierta acción como pueden ser eventos, procesos o validaciones de datos.

Ejemplo:

<form method="post" action="">
     Nombre:
     <input type="text" name="nombre" value="" size="30" maxlength="20">
     <input type="button" value="Imprimir" onclick="">
</form>

El valor del atributo "type" para este control de formulario es "button".

El atributo "value" es el texto del boton que sera visible para el usuario en pantalla.

Si pruebas a pulsar un botón de este tipo, verás que el navegador no hace nada: no envía los datos al servidor y no borra los datos introducidos. Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación JavaScript. Si la página incluye código JavaScript, los botones de este tipo se pueden programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos. Para ejecutar estas tareas al hacer clic en el boton haremos uso del atributo "onclick".

Boton de reseteo

Se trata de un botón especial que borra todos los datos introducidos por el usuario y devuelve el formulario a su estado original.

Ejemplo:

<form method="post" action="">
     Nombre:
     <input type="text" name="nombre" value="Juan Perez" size="30" maxlength="20">
     <input type="reset" value="Resetear">
</form>

El valor del atributo "type" para este control de formulario es "reset". Cuando el usuario pulsa este botón, el navegador borra toda la información introducida y muestra el formulario en su estado original. Si el formulario no contenía originalmente ningún valor, el botón de reset lo vuelve a mostrar vacío. si el formulario contenía información, el botón reset vuelve a mostrar la misma información original.

El atributo "value" es el texto del boton que sera visible para el usuario en pantalla.

Boton de envio

Los formularios disponen de un botón para enviar al servidor los datos introducidos por el usuario.

Ejemplo:

<form method="post" action="">
     Nombre:
     <input type="text" name="nombre" value="" size="30" maxlength="20">
     <input type="submit" value="Enviar">
</form>

El valor del atributo "type" para este control de formulario es "submit". El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón.

El atributo "value" es el texto del boton que sera visible para el usuario en pantalla.

Para recibir los datos en el servidor, es necesario que en el atributo "action" del formulario, se indique la pagina que manipulara los datos.

Actividad

Escriba el siguiente codigo en un BLOC DE NOTAS, guardelo como pagina Web y verifique que se muestre correctamente el formulario:

<html>
     <head>
           <title> Uso de Formularios </title>
     </head>
     <body>

<form method="post" action="">
    
     Nombre: <br/>
     <input type="text" name="control1" size="40" maxlength="30" /> <br/>
    
     Apellidos: <br/>
     <input type="text" name="control2" size="40" maxlength="40" /> <br/>
    
     Sexo:
     <input type="radio" name="control3" value="hombre" checked="checked"> Hombre
     <input type="radio" name="control3" value="mujer"> Mujer <br/><br/>

     Usuario: <br/>
     <input type="text" name="control4" size="40" maxlength="40" /> <br/>

     Contraseña: <br/>
     <input type="password" name="control5" size="40" maxlength="20" /> <br/></br>
     <input type="reset" value="Resetear">
     <input type="submit" value="Guardar">

</form>
   
     </body>
</html>

Vea que el atributo "action" de la etiqueta <form> no contiene ningun valor, ya que hasta esta etapa no hemos usado algun servidor Web como APACHE y un lenguaje de programacion como PHP.

Esto quiere decir, que al presionar el boton ENVIAR no pasara nada y seguiremos observando la misma pagina HTML.