FORMULARIOS HTML

Los formularios son una caracterstica del estndar HTML (lenguaje de marcas hipertextual) que permite a los autores colectar informacin provista por los visitantes. Estos formularios pueden ser tiles para recolectar informacin personal, informacin de contacto, preferencias u opiniones, o cualquier tipo de entrada por parte del visitante que el autor pueda necesitarUn formulario puede ser insertado en un documento HTML mediante el tag HTML form el cual acta como contenedor para todos los elementos de entrada (input). Toda la informacin recolectada por un formulario puede ser entregada a un agente procesador que es usualmente especificado en el atributo "action". Lo que el agente procesador hace con la informacin y cmo la maneja es un tema que ser tratado con los temas o script de php. Para manejar datos de un formulario debe usar un script del lado servidor(en nuestro caso PHP).Tambin puedes necesitar especificar cmo la informacin ser enviada en el valor del atributo "method": "post" (los datos son adjuntados al cuerpo del formulario) o "get" (los datos son adjuntados a la URL (localizador uniforme de recursos)). Se supone que el agente procesador conoce y maneja el mtodo de envo del formulario.Un formulario simple puede tener la siguiente declaracin:

...Controles...

ETIQUETAS USADAS CON FORMULARIOS Cinco son solamente las etiquetas que el cdigo HTML posee para definir todos los elementos interactivos que un formulario puede presentar: , , , y . Estas etiquetas, junto a un nmero de modificadores o atributos, son suficientes para indicarle al navegador cliente cmo debe recolectar la informacin, cmo debe manejarla una vez recolectada y cmo debe interactuar con el servidor.

Todo formulario debe estar encerrado entre el par de etiquetas y , y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas y . Comando Descripcin ACTION el valor de este parmetro es la URL del programa o guin en el Servidor Web utilizado para procesar la informacin recolectada. METHOD puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.Esos dos atributos son de uso obligatorio para cualquier formulario que generemos, ya que establecen dnde enviar la informacin y cmo enviarla.ELEMENTOS DE ENTRADA La mayora de los elementos de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de control y tambin del tipo de informacin que pueden recolectar. Los elementos de entrada de un formulario pueden ser definidos usando cuatro tags: el tag HTML input, el tag HTML button, el tag HTML select y el tag HTML textarea, dividiremos los controles de acuerdo con su funcionalidad.Tener en cuenta que el atributo "name" de cada control ser el nombre utilizado para identificar los datos por el agente procesador, y el valor depender de la naturaleza del control (algunas veces, como en las casillas de verificacin o botones radio, ser el contenido del atributo "value").La etiqueta es la segunda etiqueta ms importante de los formularios. Se la puede definir como una etiqueta multifuncin, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto. Posee ocho posibles parmetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parmetros porque normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda etiqueta son NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE, and HIDDEN; De acuerdo al tipo de elemento que queramos representar.

ENTRADA DE TEXTO Este control recopila informacin textual en una sola lnea, lo que significa que el usuario no podr utilizar la tecla "enter" para ir a la siguiente lnea. Este control es insertado en documentos HTML usando el tag HTML input con el valor "text" para el atributo "type".

EJEMPLO INPUT TEXT

Ingresa texto:

El valor pasado al agente procesador ser el texto ingresado por el usuario, o sea el contenido dentro de la caja de texto.ENTRADA DE TEXTO CONTRASEA (PASSWORD)Este control acta exactamente como la entrada de texto de lnea, con la excepcin de que este control "esconde" los caracteres mostrndolos como puntos o asteriscos para evitar que los usuarios vean el texto ingresado. Es comnmente usado para el ingreso de contraseas.

EJEMPLO INPUT PASSWORD

Ingresa contrasea:

El valor pasado al agente procesador ser el texto ingresado por el usuario, o sea el contenido dentro de la caja de texto.ENTRADA DE TEXTO DE MLTIPLES LNEASEste control permite a los usuarios ingresar texto en una o ms lneas. Es insertado utilizando el tag HTML textarea y puede ser usado para recolectar prrafos, comentarios, cartas, etc. En este tag, el contenido ser el valor inicial del texto.

EJEMPLO UNO TEXTAREA

Ingrese sus comentarios:
...comentario aqu;...

Nota que los atributos "rows" y "cols" establecen las dimensiones de la caja de texto y son requeridos por algunos DTDs (declaracin de tipo de documento). El valor pasado al agente procesador ser el texto ingresado por el usuario, o sea el contenido dentro de la caja de texto.Atributos del textareacols: representa el nmero de caracteres que puede contener un lnea rows: representa el nmero de lneas name: representa el nombre asociado con el cuadro de texto, que permite su identificacin en el par nombre/valor. readonly: impide que el usuario modifique el texto predeterminado en el campo value: representa el valor predeterminado que se enviar al script si el usuario no ha escrito nada en el cuadro de texto.

EJEMPLO DOS TEXTAREA

Ingrese su nombre:
Contrato:

Por la presente ..............................

OPCIONESLos autores tambin pueden permitir a sus visitantes escoger opciones preestablecidas de una lista. Esto puede ser logrado usando uno de los tres controles siguientes, que pueden construir diferentes tipos de listas de opciones.Casillas de verificacinLa casilla de verificacin es una opcin simple que puede tomar uno de dos valores: "marcado" o "desmarcado". Las casillas de verificacin pueden ser visualmente agrupadas como una lista de opciones, pero cada una de ellas es tratada individualmente. Este control es insertado mediante el tag HTML input con el valor "checkbox" para el atributo "type".

Prueba de checkbox

Seleccione sus equipos :
Colombia
Argentina
Venezuela
Barcelona

Con el parmetro CHECKED le indicamos al navegador cual de todas las opciones debe aparecer marcada por defecto.

Prueba dos de checkbox

Seleccione sus equipos :

Quines son malos?

San Lorenzo
River PLate
Boca Juniors
Independiente

Botones radioLos botones radio funcionan en la misma forma que las casillas de verificacin con pequeas diferencias: los botones radio que comparten un mismo nombre conforman un grupo de opciones donde los usuarios no pueden seleccionar ms de una opcin a la vez. Esto significa que cuando el usuario selecciona una opcin, el resto es automticamente deseleccionado.

Prueba de radio

Seleccione un equipo

San Lorenzo
River Plate
Boca Juniors

Para los botones radio el valor pasado al agente procesador es el contenido del atributo "value", lo que significa que una lista de opciones con varias opciones slo pasar un valor.

Prueba de radio

Quin ser el campen del torneo argentino?

San Lorenzo
River Plate
Boca Juniors
Independiente
Racing Club
Vlez Sarsfield

ListasEstas lista pueden ser insertadas usando tres tags: el tag HTML select (contenedor principal), el tag HTML option (declaracin de opcin) y el tag HTML optgroup (grupo de opciones). Este tipo de lista puede ser usado como una lista de botones radio o como una lista de casillas de verificacin, dependiendo de la presencia del atributo "multiple".Para la creacin de listas de elementos utilizamos la etiqueta en lugar de la utilizada anteriormente , y a diferencia de esta ltima debe ser cerrada con su para . Es decir:

Elementos de la lista

Prueba de select

San Lorenzo River Plate Boca JuniorsIndependiente Racing Club

La opcin por defecto de una lista de este tipo es la primera declarada. Si quisiramos marcar otra opcin por defecto lo hacemos con el parmetro SELECTED de esta manera:

Prueba dos select

San Lorenzo River Plate Boca JuniorsIndependiente Racing Club

Listas Desplegadas

La construccin de una lista desplegada es bastante similar a la de una lista desplegable, solo difieren en algunos parmetros. Para convertir la lista desplegable de equipos en una lista ya desplegada utilizamos el parmetro SIZE.

Prueba dos select

San Lorenzo River Plate Boca JuniorsIndependiente Racing Club

El valor del parmetro SIZE indica exactamente cuntos elementos desplegar simultneamente. Si el valor del SIZE es menor al nmero total de elementos de la lista, automticamente aparecer una barra de desplazamiento sobre el lado derecho de la misma. Para verlo mejor indiquemos un SIZE=3 para la lista de equipos:

Prueba dos select

San Lorenzo River Plate Boca JuniorsIndependiente Racing Club

Mltiples

Prueba dos select

Selecciona una sola opcin, como en los botones radio:

De una sola lneaContraseaMultilnea

Casillas de verificacinBotones radioListas select

Selecciona tantas opciones como desees, como en las casillas de verificacin (manteniendo presionada la tecla "Ctrl"):

De una sola lneaContraseaMultilnea

Casillas de verificacinBotones radioListas select

Para la primera lista sin el atributo "multiple", el valor pasado al agente procesador ser la opcin seleccionada, pero para el segundo ejemplo el valor pasado ser una lista (array) conteniendo las opciones seleccionadas. Es por ello, que para las listas con el atributo "multiple" presente, debes agregar al nombre del control "select" los corchetes ("[ ]"). El valor individual pasado en ambos casos es el contenido del atributo "value" si es que se encuentra presente, y en su defecto el contenido del tag.Tarea: crear cada uno de los formularios necesarios para ingresar la informacin en la base de datos de sus proyectos.Ejemplo completo de formularios

FORMULARIOS

Nombre:

Email:

Motivo:

Mensaje: