formularios

FORMULARIOS (FORM).

Introduccin

Los formularios son plantillas que permiten la creacin de documentos HTML con peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, pginas de comentarios o cualquier documento en la que se desee una interaccin por parte del usuario.

Se podrn definir distintos tipos de recuadros de dialogo, botones de seleccin, mens de mltiples opciones, ... Para permitir obtener los datos de una manera ms intuitiva.

Definicin de formularios

Existe una instruccin HTML para la creacin de formularios esta es FORM, que tiene la siguiente estructura:

< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >...Elementos que forman el formulario...< /FORM>Dentro de la etiqueta de formulario se definirn los distintos elementos de peticin de datos. Estas instrucciones que se explicarn a continuacin definirn los tipos de botones, cajas de dialogo y ventanas para la introduccin de datos. Y definirn las variables que almacenarn los datos introducidos por el usuario. Estas etiquetas se incluirn entre la de definicin del formulario y la etiqueta de final de formulario.

Los atributos que presenta la etiquetaFORMson los siguientes:

ACTION:Indica el programa que se encargar de tratar los datos del formulario. Este programa debe encontrarse en el servidor y estar escrito en algn lenguaje de programacin. A este programa se pasar como parmetros los datos introducidos en el formulario y retornar un cdigo HTML que se mostrar tras procesar el formulario. A este tipo de programas se les llama cgi-bin, y se explican en el ltimo apartado de este manual:(CGI-BIN).

METHOD:Indica el protocolo usado para el envo de los datos. Con POST enva los datos en la entrada estndar del programa que trata el formulario y con GET los datos se pasan por parmetro, en la lnea de comandos, al programa. El usar uno o otro mtodo vendr determinado por como son tratados los parmetros en el formulario en el(CGI-BIN). El mtodo de uso ms normal ser POST.

Una vez definidas las caractersticas globales del formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen. Dentro de la instruccin del formulario podrn incluirse cualquier texto o instruccin HTML, siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario. Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas, tablas, etc ...

Entrada bsica de datos

La etiquetaINPUTse utiliza para definir gran variedad de tipos de campos de entrada de datos. Por lo general sern entradas de texto corto (a lo sumo una frase) o opciones. El formato bsico es el siguiente:

< INPUT TYPE = (TEXT|PASSWORD|CHECKBOX|RADIO|HIDDEN|SUBMIT|IMAGE|RESET) NAME = "Variable que toma el valor" VALUE = "Valor de Inicializacin" >El atributoTYPEse usa para determinar el tipo de recuadro de dialogo de entrada que se est definiendo, a continuacin se explicarn por separado cada una de las opciones. El atributoNAMEespecifica el nombre de la variable que se define. Este nombre ser pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario. El atributoVALUEsuele especificar el valor de inicializacin, que ser el valor por defecto.

A continuacin se relatan los distintos tipos de instrucciones de entrada.

Texto corto

Se utiliza para la entrada de cadenas de texto corto, como por ejemplo nombre de personas, nmeros, fechas o diversos datos que se puedan expresar en una lnea de texto.

Se mostrar un recuadro que ocupa una lnea y la que ser posible especificar este texto. El formato de la instruccin es el siguiente:

< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamao" MAXLENGTH="longitud mxima" >El tamao de la ventana de introduccin de texto se fija con el atributoSIZE, que indica el tamao de la ventana en caracteres. Aqu solo se define la parte visible, pero el usuario podr introducir ms texto si lo desea. Para indicar el mximo nmero de caracteres que se permiten en la entrada usaremos:MAXLENGTH. El atributoNAMEindica el nombre de la variable que toma el valor de la entrada yVALUEespecifica el valor de inicializacin del campo. De todos los atributos solo ser obligatorioNAME, siendo el resto opcionales. En la entrada se podrn usar cualquier tipo de caracteres incluso los acentuados, en su formato normal.

Ejemplos

Inst.HTMLNombre:

ResultadoPrincipio del formulario

Nombre:

Final del formulario

ExplicacinSer una introduccin de texto bsica.

Inst.HTMLNombre:


Nombre:


ExplicacinEn este caso introduciremos un texto de inicializacin que ser el texto por defecto y es editable por el usuario.

Inst.HTMLNombre:


Nombre:


ExplicacinAhora definimos con SIZE un mayor tamao del recuadro y con MAXLENGHT definimos el nmero mximo de caracteres que se pueden introducir.

Palabras secretas

Es similar al anterior pero en este caso no se imprimen los caracteres segn se van introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el nmero de caracteres, pero no valor. Se usa para la introduccin de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos. El formato es:

< INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial" SIZE="tamao" MAXLENGTH="li>longitud mxima" >Ejemplo

Inst.HTMLPassword:


Password:


ExplicacinEl texto introducido no puede ser visto, pero si es posible saber el nmero de caracteres que se introducen.

Botones de seleccin

El checkbox es un botn que puede presentar dos estados activado o desactivado. El formato es el siguiente:

< INPUT TYPE=CHECKBOX NAME="variable" CHECKED>Se requiere el atributoNAME. Los valores que tomar la variable sernonoff, dependiendo de su estado. Si el botn estaba activado cuando se envan los datos del formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributoCHECKEDel botn se encontrar activado en la inicializacin.Si se indica el atributoVALUE,cuando se envan los datos con el botn activado se mandar la variable con el valor indicado y en caso contrario no se mandar ningn valor.

Ejemplo

Inst.HTML Opcin


Opcin


ExplicacinEn este caso esta desactivado por defecto y su utilizar en caso de los valores on y off para definir su estado.

Inst.HTML Opcin


Opcin


ExplicacinAhora se especifica CHECKED para indicar que por defecto debe estar activado.

Seleccin entre mltiples opciones

Se usa cuando la opcin puede tomar un valor simple de una serie de alternativas. En este caso se presentan unos valores opcionales de los que solo puede tomar un valor. Para especificar cada uno de estos valores se incluir una etiqueta RADIO por cada una de las posibles alternativas, su estructura general ser:

< INPUT TYPE=RADIO NAME="variable" VALUE="valor 1" CHECKED >< INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" > . . .< INPUT TYPE=RADIO NAME="variable" VALUE="valor n" >Cada una de las etiquetasRADIOtendr el mismos atributoNAME, y con un distinto atributoVALUEque ser el valor que tome si se selecciona esta opcin. Para inicializarlo se usa el atributoCHECKEDque se indicar solo en la opcin que se quiera especificar por defecto.

Ejemplo

Inst.HTMLOpcin 1
Opcin 2
Opcin 3
Opcin 4


Opcin 1Opcin 2Opcin 3Opcin 4


ExplicacinEn este caso solo es posible seleccionar uno de los posibles valores, la opcin CHECKED indica cual es la opcin activa por defecto.

Parmetros ocultos

En este caso no se muestra ningn campo para la entrada de datos al usuario, pero el par variable valor especificado es enviado junto con el formulario. Se suele usar para transmitir informacin de estado control para enviar algn tipo de informacin que no debe ser variada en el formulario, pero s debe ser enviada junto a este. El formato es:

< INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" >Deber incluir tanto la variable como el valor.

Enviar Datos

Este botn se usa para enviar los datos del formulario, al pulsar el usuario este botn, se acaba la introduccin del formulario y pasa el control al programa indicado enACTION. En todo formulario debe existir al menos un botn deSUBMIT, si solo incluye un recuadro del tipoTEXTno ser necesario incluirlo. El formato es:

< INPUT TYPE=SUBMIT VALUE="mensaje a mostrar" >El atributoVALUEespecifica una etiqueta no editable que se mostrar en el botn de envo. Lo normal es que este botn no enve datos, pero si se indica el atributoNAMEcon un nombre de variable ser enviada la variable con el valor deVALUE. Esto puede ser til si se incluyen distintos botones deSUBMITpara distinguir cual fue pulsado.

Ejemplo

Inst.HTML< INPUT TYPE=SUBMIT VALUE="Enviar Datos" >



ExplicacinEl texto indicado en VALUE es el que etiqueta el botn, al pulsar sobre l se enviarn los datos del formulario

Botn de Envo grfico

Su funcionalidad es similar al botn deSUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botn. Igualmente al pulsar sobre el botn se enviar el formulario. El formato es el siguiente:

< INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" >El punto de la imagen en el que pulsa el usuario tambin es pasado al programa interprete del formulario, de forma que la imagen igualmente podra ser un mapa sensible. Se pasarn dos parmetrosxeycon las coordenadas del punto donde pulso, siendo el programa interprete el encargado de determinar la zona donde se puls, si se desea.

Ejemplo

Inst.HTML



ExplicacinSe muestra la imagen como botn de envo, sustituyendo al botn de SUBMIT.

Borrar los datos

Este botn se usa para volver a los valores por defecto todos los elementos del formulario, borrando todos los datos introducidos por el usuario. Su formato es el siguiente:

< INPUT TYPE=RESET VALUE="Etiqueta a mostrar" >El atributoVALUEespecifica la etiqueta que tendr el botn.

Texto en mltiples lneas

Permite la introduccin de un texto que puede abarcar varias lneas, introduciendo este en forma de prrafo. El formato general ser:

Texto de Inicializaci& oacute;n que puede incluir varias lneas.En este caso se presenta una ventana del tamao especificado con los atributosROWS, filas, yCOLS, columnas. El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto aparecer inicialmente en la ventana, en este texto se podrn incluir las marcas del lenguaje HTML, pero solo se tendrn en cuenta para incluir acentos y otro tipo de efectos. Los atributosROWSyCOLSdeterminan el tamao de la ventana visible, el texto se podr extender ms all de estos limites.

Ejemplo

Inst.HTML Texto de Inicializacin que puede incluir varias lneas.



ExplicacinSe puede especificar el tamao de la ventana para introducir datos e indicar un texto de inicializacin, aunque este ser opcional.

Eleccin entre mltiples opciones

Se usa para mens simple o mltiples. Define mens de tipo pop-up (men de barras) y ofrece una alternativa ms compacta al uso de botonesRADIOoCHECKBOX. Su formato es el siguiente:

< OPTION SELECTED VALUE=valor1>Opcin Primera< OPTION VALUE=valor2>Opcin Segunda . . .< OPTION VALUE=valorn>Opcin EnsimaSi se desea que sea un men mltiple se deber incluir el atributoMULTIPLEen la etiqueta deSELECT, en este caso se mostrarn todas las opciones en forma de tabla, en el otro caso se mostrar la opcin activa y un botn para poder modificar esta opcin. En ambos casos solo podr seleccionarse una de las opciones. Cuando se enva el resultado del formulario la variables NAME tomar el valor de la opcin que este activa.

La etiquetaOPTIONque contenga el atributoSELECTEDser considerada la opcin por defecto, caso de no especificarse ninguna se considerar la primera de las opciones.

Ejemplos

Inst.HTML Opcin Primera Opcin Segunda Opcin Tercera



ExplicacinSe muestra la opcin activa que puede ser cambiada, por defecto esta activada la segunda opcin.

Inst.HTML Opcin Primera Opcin Segunda Opcin Tercera



ExplicacinEn este caso al ser mltiple se muestran todas las opciones posibles, de las que solo es posible seleccionar una.

_1490351251.unknown

_1490351253.unknown

_1490351254.unknown

_1490351252.unknown

_1490351247.unknown

_1490351249.unknown

_1490351250.unknown

_1490351248.unknown

_1490351245.unknown

_1490351246.unknown

_1490351243.unknown

_1490351244.unknown

_1490351241.unknown

_1490351242.unknown

_1490351240.unknown

formularios

Documents