Formularios

Hasta ahora hemos visto la forma en la que HTML gestiona y muestra la información, esencialmente mediante el texto, imágenes y enlaces. Nos queda por ver de qué forma podemos intercambiar información con nuestro visitante. Desde luego, este nuevo aspecto resulta primordial para gran cantidad de acciones que se pueden llevar a cabo mediante la web: comprar un artículo, rellenar una encuesta, enviar un comentario al autor, etc.

Hemos visto anteriormente que podíamos, mediante los enlaces a direcciones de email, contactar directamente con un correo electrónico. Sin embargo, esta opción puede resultar en algunos casos poco versátil, si lo que deseamos es que el navegante nos envié una información bien precisa y además requiere que el visitante tenga instalado en su ordenador algún correo electrónico en un programa como Outlook Express.

Es por ello que el HTML propone otra solución mucho más amplia: los formularios.

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales, por ejemplo en sitios comerciales de electrónica. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente.

El formulario es la forma en que el visitante de la página web manda información a un administrador.

El formulario consta de unos mecanismos en donde el usuario responde a una serie de preguntas. Para ello puede escribir en una serie de cajas la información solicitada y/o también elegir entre una o varias opciones disponibles, las cuales pueden formar o no una lista.

El lenguaje HTML puede crear formularios con cajas de texto y botones que mandan información, si bien, mediante HTML solo podemos enviarlo a un correo electrónico. Si queremos recoger los datos para procesarlos debemos usar algún lenguaje de programación como ASP o PHP que nos permitirán, entre otras cosas, el tratamiento y manejo de formularios y su envío de bases de datos.

ELEMENTOS HTML

Un formulario debe ir siempre dentro de la etiqueta <form>…</form>. Tanto los elementos para mandar información como los adicionales (textos, imágenes, etc.) explicativos sobre la información que se debe mandar deben ir encerrados dentro de estas etiquetas.

Los elementos de formulario que recogen información como botones y cuadros de texto, se denominan campos de formulario o controles de formulario. La mayoría de controles se crean con la etiqueta <input>, esto lo veremos más adelante.

ATRIBUTOS PARA LA ETIQUETA <FORM>

Dentro de la etiqueta <form> debemos insertar algunos atributos:

ENVIO DEL FORMULARIO

Como se supone que no sabemos PHP, ni disponemos de un programa que procese la información, supondremos que enviamos un formulario por email.

<form action=’ejemplo@gmail.com’ method=’POST’ enctype=’text/plain’>

CAMPOS DE TEXTO

Llamamos campos de texto, dentro de un formulario, a los elementos que nos permiten recoger texto escrito por el usuario. En la pantalla se muestra una pequeña caja donde el usuario puede escribir el texto que pretende enviar.

Podemos crear varios tipos de campos de texto, bien sea para introducir un dato simple (nombre, edad, dirección, etc.), pero también podemos crear un campo de texto para un dato simple, pero con texto oculto, del tipo contraseña.

Delante o detrás de estos elementos debemos indicar, mediante el lenguaje HTML habitual para texto, el tipo de dato que queremos que el visitante proporcione, ya que los campos de texto son simples cajas, en las que escribir la información, la cual será enviada posteriormente.

Como se dijo anteriormente, todo el formulario debe ir dentro de las etiquetas <form>…</form>, las cuales forman una caja que lo engloba.

TEXTO OCULTO

Podemos crear una caja de texto oculto, que funcione igual que el anterior, pero en la cual los caracteres que escribamos permanecerán ocultos, en su lugar se muestran unos puntos gruesos que los sustituyen.

Este tipo de etiquetas son las que se emplean para introducir contraseñas, de manera que aporten una cierta confidencialidad. Este tipo de campos son análogos a los del texto con una simple diferencia, reemplazaremos el valor del atributo “type=’text/plain’” por “type=’password’”. Estos campos son ideales para la introducción de datos confidenciales, principalmente códigos de acceso o claves.

<input type=’password’ name=’clave’/></p>

Admite también los atributos “size”, “maxlength” y “value”, con los mismos efectos.

En muchos formularios de páginas web, se utiliza este campo para entrar en zonas restringidas. A veces pide confirmación de contraseña, teniendo que escribir esta dos veces. Todo esto está fuera del alcance de HTML, ya que suele hacerse mediante código JavaScript, PHP y otros programas.

TEXTO LARGO

Si deseamos poner a la disposición del usuario un campo de texto donde pueda escribir cómodamente sobre un espacio compuesto de líneas, hemos de insertar una nueva etiqueta, <textarea>…</textarea>.

Este tipo de campos son prácticos cuando el contenido a enviar no es un nombre, teléfono, edad o cualquier otro dato breve, sino más bien, un comentario, opinión, etc. en los que existe la posibilidad de que el visitante desee rellenar varias líneas.

Dentro de la etiqueta <textarea> debemos indicar, como en anteriores casos, el atributo “name” para asociar el contenido a un nombre que será asemejado a una variable en los programas de proceso. Además, esta etiqueta admite dos atributos para cambiar el ancho y el alto de la caja de texto. Estos son “rows” y “cols”.

Para que aparezca un texto predefinido, dentro de la etiqueta no usaremos el atributo “value”, sino que escribiremos el texto que queremos que aparezca entre las etiquetas.

<textarea name=’comentario’ rows=’10’ cols=’20’>Comentario</textarea>

LISTA DE OPCIONES

Para determinados casos, los textos libres son difícilmente adaptables a programas que puedan procesarlos debidamente. Es por ello que, en determinados casos, puede resultar más efectivo proponer una elección al navegante a partir del planteamiento de una serie de opciones disponibles y definidas por nosotros.

Este tipo de opciones predefinidas por nosotros pueden ser expresadas por medio de diferentes campos de formulario.

Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una o varias de las múltiples opciones que nos proponen. Para construirlas emplearemos la etiqueta <select>…</select>.

Como para los ejercicios ya vistos en formularios, dentro de esta etiqueta definiremos su nombre por medio del atributo “name”.

Cada opción o elemento, será incluida en una línea precedida de la etiqueta <option>…</option>.

Esta estructura puede verse modificada principalmente a partir de otros dos atributos.

La etiqueta <option> puede ser asimismo optimizada por medio de otros atributos.

LOS BOTONES

Además de poder enviar texto mediante un formulario, podemos hacer que el usuario elija entre varias opciones que le presentaremos en formato botón. Para ello se le presenta una serie de opciones o casilleros entre los cuales el usuario puede marcar los que le interesen.

En el caso de los botones “radio” se le presentan varias opciones de las que deberá marcarse solo una. Si se intentan elegir dos opciones, al elegir la segunda opción, se desactiva la primera.

Como puede verse, a cada una de las opciones se le atribuye una etiqueta <input> dentro de la cual, asignamos el mismo nombre, “name” para todas las opciones y un “value” distinto. Si el usuario elije en el ejemplo la opción de otoño, recibiremos en nuestro correo una línea que indicara “estación=3”.

Cabe señalar que es posible preseleccionar por defecto una de las opciones. Esto puede ser conseguido por medio del atributo “checked”.

CAJAS DE VALIDACION

También llamadas “checkbox”, son también botones de opciones, pero en este caso podemos marcar uno o varios a la vez, ya que al marcar uno, no se desactivan los otros, pues cada botón es independiente al resto.

Cada botón u opción consta de la etiqueta <input> seguida del atributo y valor “type=’checkbox’”. El atributo “name” es obligatorio y aquí indica la referencia al botón, por lo tanto debe ser distinto en cada uno de los botones, ya que en el correo o programa de procesamiento de datos recibiremos un mensaje del tipo “referencia=on/off”, dependiendo de si el botón ha sido activado o no.

Al igual que en los botones “radio”, debemos escribir delante o detrás de la etiqueta del botón, el texto que queremos que aparezca para que el usuario sepa a qué se refiere cada uno de los botones.

Al igual que en los botones “radio” se le puede dejar una o varias opciones ya marcadas al cargar la página mediante el atributo “checked”.

OTROS CAMPOS

Como podemos imaginarnos, en formularios no solamente habrá elementos o campos donde solicitar información del usuario, sino también hará que implementar otra serie de funciones. Concretamente, han de transmitirnos su envió mediante un botón. También puede resultar práctico poder poner un botón de borrado o bien acompañar el formulario de datos ocultos que puedan ayudarnos en su procesamiento.

El uso más frecuente de un botón es en la programación en el cliente. Utilizando lenguajes como JavaScript podemos decidir acciones a tomar cuando un visitante pulse el botón de una página web.

Los botones de contenido pueden ser usados como botones de envió de restablecimiento, o bien puede no tener ninguna acción prestablecida (dependiendo del valor de su atributo “type”). Su característica principal es que se puede insertar contenido HTML dentro de ellos y así dotarlo de un aspecto atractivo.

Los botones de contenido se insertan con el TAG HTML “button”, “submit” o “reset” en el atributo “type”. Un valor “button” supondrá que el botón no hará nada en respuesta a un click, a no ser que se especifique una acción de otra manera (por ejemplo, usando el lenguaje JavaScript). Un valor “submit” hará que el botón funcione como un botón de envió. Finalmente, un valor “reset”, hará que el botón funcione como un botón de restablecimiento de los valores predeterminados del formulario.

Como podemos observar en el ejemplo, hemos introducido contenido HTML dentro del propio botón; en concreto hemos usado la etiqueta <b> para poner parte del texto en negrita y la etiqueta <br> para introducir un salto de línea. Ten en cuenta que la apariencia varía según el navegador que utilices.

A su vez hemos escrito “<button type=’submit’>”, lo que supondrá que el botón funcione como un botón de envió. Si hubiéramos escrito “<button type=’reset’>”, el botón funciona como un botón de restablecimiento de valores por defecto, y si hubiéramos escrito “<button type=’button’>”, el botón daría lugar a ninguna acción. En caso de no especificarse el atributo “type” para el botón, normalmente el navegador consideraría que es un botón de envió.

Ejercicio-1

ejer59

Ejercicio-2

ejer27

Ejercicio-3

ejer27

Ejercicio-4

ejer27

Ejercicio-5

ejer27

Ejercicio-6

ejer27

Ejercicio-7

ejer27

Ejercicio-8

ejer27

Ejercicio-9

ejer27

Ejercicio-10

imagen

Ejercicio-11

imagen

Ejercicio-12

imagen

Ejercicio-13

imagen

Ejercicio-14

imagen

Ejercicio-15

imagen

Ejercicio-16

imagen

Ejercicio-17

imagen