for="nombre">Nombre: 

type="text" name="nombre" id="nombre">

for="apellido">Apellido: 

type="text" name="apellido" id="apellido">

for="email">Email: 

type="text" name="email" id="email">

type="radio" name="sexo" id="varon" value="Varón">

for="varon">Varón: 

type="radio" name="sexo" id="mujer" value="Mujer">

for="mujer">Mujer: 

type="submit" value="Enviar">

type="reset">

La visualización que debes obtener es algo parecido a la siguiente imagen.

Supón que hemos rellenado los datos de este formulario. Cuando pulsamos en “Enviar”, la información se envía al servidor y se utiliza para algo. ¿Qué utilidad se le puede dar a esta información? En general, un formulario html nos sirve para acceder a otra URL(dirección web) que recibe la información. Cuando la nueva URL recibe la información pueden ocurrir varias cosas: que se muestre en pantalla, que se escriba en una base de datos, que nos muestre una imagen distinta según la información que hayamos enviado…  Algunas de las cosas que hemos citado no se pueden hacer usando HTML. Por ejemplo, no podemos escribir en una base de datos usando HTML. Sin embargo, sí podemos recoger la información en un formulario o página web HTML y luego acceder a una dirección web de tipo php, asp, jsp… que son tipos de páginas web que permiten realizar otro tipo de funciones más avanzadas relacionadas con la programación, como es la escritura en bases de datos para almacenar la información.

CONTROLES

Los usuarios interaccionan con los formularios a través de los llamados controles. Un control vamos a definirlo, de forma simplificada, como un objeto que aparece en la pantalla y que es modificable por el usuario. Ejemplos de controles serían los que vamos a mostrar a continuación.

Checkbox o casilla de verificación: control que puede ser marcado o desmarcado por el usuario. Es muy típico cuando se requiere aceptar unas condiciones para realizar una compra en una página web, o cuando se requiere aceptar la licencia para instalar un programa.

Option Button o botón circular seleccionable (“radio”): control que puede ser marcado o desmarcado por el usuario, de forma que normalmente cuando se marca una opción se desmarca la que estuviera seleccionada previamente. Es muy típico cuando se requiere elegir entre varias opciones.

ComboBox o lista desplegable: control que muestra una opción seleccionada de entre varias posibles, y que al pulsar sobre él despliega una lista de opciones.

Atributos básicos de un control:

1.- name: identifica un control dentro de un formulario. Este atributo nos va a resultar necesario para poder rescatar la información.

2.- value: cada control tiene un valor inicial y un valor actual. Normalmente, el valor inicial de un control puede especificarse con el atributo value. El valor actual del control se hace en primer lugar igual al valor inicial. A partir de ese momento, el valor actual del control puede ser modificado mediante la acción del usuario. El valor inicial de un control no cambia. Así, cuando se carga el formulario, el valor actual de cada control se restablece a su valor inicial. Si el control no tiene un valor inicial, el efecto de una reinicialización o carga del formulario sobre ese control es indefinido. Indefinido significa que no sabemos exactamente lo que va a pasar. Para que no ocurra esto, es preferible establecer siempre un valor inicial.

3.- id: el valor de estre atributo permite relacionar un control con una etiqueta. Por ejemplo, si un control tiene por id el valor id=”email”, esto significa que ese control está relacionado con la etiqueta (label) cuyo atributo for es for=”email”.

Normalmente, cuando se envía un formulario para su procesamiento, para cada control se procede al envío de dos datos: su nombre (atributo name) y su valor actual, y esta información se envía a la dirección web de destino.

Ejemplo: si introducimos en el formulario que nuestro nombre es Juan, nuestros apellidos Suárez Guerra, nuestro email juan@gmail.comy nuestro sexo Varón, la información que se envía a la siguiente dirección web donde se reciben los datos es:

· nombre=Juan

· apellido=Suárez Guerra

· email=juan@gmail.com

· sexo=Varón

Introduce esta información y envía el formulario cuyo código vimos anteriormente. Fíjate en la URL que aparecerá en tu navegador. Será algo así: https://www.aprenderaprogramar.com/?nombre=Juan&apellido=Su%E1rez+Guerra&email=juan%40gmail.com&sexo=Var%F3n

Lo que puedes comprobar aquí es que la información que hemos escrito en el formulario está apareciendo ahora de alguna manera en la nueva dirección web. No se muestra exactamente igual porque las direcciones web no admiten tildes, que son sustituidas por un código equivalente a la letra con tilde. Tampoco las direcciones web admiten el símbolo @, que también es sustituido.

Label o etiqueta: podría considerarse que no es un control en sentido estricto, puesto que es algo que no es modificable por el usuario. Un label o etiqueta es un texto que va asociado a un control con el que puede interactuar un usuario. Un label contiene habitualmente dos informaciones importantes: el nombre del control con el que va asociado, y el texto a mostrar.

Por ejemplo el código: for="nombre">Introduzca su nombre: 

Nos indica que el label tiene el atributo for establecido como igual a nombre. Eso signfica que el label va asociado a un control dentro del formulario cuyo atributo será nombre. Por otro lado, el texto que mostrará este label será “Introduzca su nombre:”.

En realidad un label puede considerarse una parte “poco importante” en un formulario, puesto que se limita a mostrar un texto y esto también se puede hacer de otras maneras. De hecho, podríamos prescindir de su uso. En vez de tener el texto entre etiquetas y podríamos tenerlo entre etiquetas

y

LA ETIQUETA FORM. POSIBILIDAD DE TENER VARIOS FORMULARIOS EN UNA WEB.

Cuando creamos un formulario en HTML, todo el contenido que lleva lo incluimos entre las etiquetas de apertura