JMOlmos EcoTec 

Professor Tecnologia

Centre: IES Joan Puig i Ferreter 

Població: La Selva del Camp Província: Tarragona

www.xtec.cat/sesjoanpuigiferreter

e-mail: jolmos@xtec.cat

FORMULARIOS

26 abril de 2007, per JMOlmos

Los formularios son los principales elementos que permiten que el visitante interactúe con nuestra pagina.

Los formularios son programas que están escritos en lenguajes de programación como: C, Perl, Java, Visual Basic, a este tipo de programas se les suele denominar como CGI (Common Gateway Interface). Los formularios son plantillas en las cuales el usuario introduce los datos o selecciona una opción y la envía a un servidor o a nuestra dirección de correo electrónico, (la cual utiliza lo que en programación se conoce con el nombre de "Código Transportable"). Un formulario trabaja básicamente así: el visitante selecciona diferentes datos (campos) cada uno de los cuales quedará asociado a una variable. La principal aplicabilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, páginas de comentarios o cualquier documento en la que se desee una interacción por parte del usuario.

La etiqueta utilizada para crear un formulario es &ltFORM&gt...&ltFORM&gt.

Para que esta etiqueta pueda funcionar debe tener unos atributos.

Cajas de texto

Existen tres formas de insertar un texto en un formulario.

La primera es &LTINPUT TYPE="TEXT" name=nombre>

EJEMPLO:



El valor TYPE="TEXT" indica que el tipo de dato que se va a introducir es un texto.

La segunda forma de insertar un texto es una variacion de la primera en vez de colocar TYPE=TEXT se coloca TYPE=PASSWORD.

EJEMPLO:



El valor TYPE="PASSWORD" indica que lo que se va a introducir es una clave o una contraseña.

A simple vista no se puede diferenciar la una de la otra, la variacion se da a el momento que la persona introduce los datos. En el primero aparece el texto normal, en el segundo aparecen una estrellitas(esto es por razones de seguridad).

El tamaño de la caja tambien se puede variar esto se hace a traves del valor SIZE. Su valor por defecto es de 20.

Existe otro atributo que es MAXLENGTH el cual define el número máximo de caracteres que puede introducir el usuario.

Por ultimo esta VALUE que indica el texto por defecto que contendrá la caja.

EJEMPLO

Por favor, introduce tu nombre:&ltbr>
&ltform>
&ltinput type="password" name="Nombre" size="10" maxlength="10">
</form>

El cual se veria asi:

Por favor, introduce tu nombre:

La tercera forma de introducir un texto es a traves de la etiqueta &ltTEXTAREA> ...</TEXTAREA>

EJEMPLO:



Al igual que el anterior tambien se puede modificar su tamaño:

ROWS define el numero de filas que ocupará la caja de texto.

COLS Columnas que ocupará la caja de texto

EJEMPLO:

&ltform>
Introduce la opinión que se merece este tutorial:&ltbr>
&lttextarea name="comentario" rows="8" cols="60">
</textarea>
</form>

El cual se veria asi:

Introduce la opinión que se merece este tutorial:


Elementos de Menú

Estos elementos le permitirán a nuestro visitante elegir entre varias opciones, que han sido predeterminadas por nosotros. Esto lo podemos hacer de dos maneras. La primera es:

&ltINPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"&gtmal
&ltINPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"&gtbien
&ltINPUT NAME="Respuesta" TYPE=RADIO VALUE="nada"&gtnada

El cual se veria asi:

mal
bien
nada


Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME. Aparte de esto acepta los siguientes parámetros:

VALUE Este es el valor que asignará a la variable.

CHECKED Si lo indicamos en una de las opciones esta será la que se active por defecto.

La segunda forma es por medio de listas de selección. Para emplearlas deberemos utilizar dos etiquetas, SELECT y OPTION. Veamos un ejemplo:

&ltSELECT NAME="Colores">
&ltOPTION&gtRojo
&ltOPTION&gtAzul
&ltOPTION&gtVerde
&ltOPTION&gtOtros
</SELECT>

El cual se veria asi:



Explicacion:

&ltselect name="Colores"> Aquí definimos el nombre de la variable que contendrá la información.

option Con esta etiqueta definimos cuantas opciones consideremos necesarias.

</select> Esta cierra la definición de este elemento del formulario.

Atributos de SELECT

SIZE Indica el número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección y, si no, veremos una lista desplegable.

MULTIPLE Si lo indicamos podremos elegir más de una opción.

Atributos de OPTION

VALUE Este es el valor que asignará a la variable

SELECTED Si lo indicamos en una de las opciones esta será la seleccionada por defécto.Este atributo es utilizado cuando no queremos que aparezca la primera opción selecionada.

Elementos de confirmación

Puede que yo solamente necesito que el usuario sencillamente me confirme o niegue algo. Lo podremos conseguir por medio de controles de confirmación:

&ltinput type="checkbox" name="nombre-variable">

Ejemplo:

&ltinput type="checkbox" name="feo"&eres feo

El Cual se veria asi:

eres feo

Por defecto esa casilla siempre va a aparecer desactiva si queremos activarla desde el principio utilizamos el valor checked

Ejemplo:

&ltinput type="checkbox" name="feo" checked&gteres feo

El Cual se veria asi:

eres feo

Botones

Existen dos tipos de botones : uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario en caso tal de que se equivoque.

Ejemplo:

&ltINPUT TYPE=SUBMIT>
&ltINPUT TYPE=RESET>

El cual se veria asi:



Estos botones por si solo no cumplen ninguna funcion, habria que especificarles la URL a la cual queremos que lleguen esos datos. Supongamos que seria para nuestro correo electronico. Seria asi:

Desea usted recibir información sobre:

&ltform action="mailto:dirección de correo" method="post" enctype="text/plain">
&ltinput type="radio" name="Información" value="sexo"&gtsexo.
&ltinput type="radio" name="Información" value=""&gtciencia
&ltinput type="radio" name="Información" value="humor"&gthumor
&ltinput type="submit" value="Enviar">
&ltinput type="reset" value="Borrar">

El cual se veria asi:

Desea usted recibir información sobre:

sexo.
Internet.
humor


Explicacion:

ACTION=URL
Contiene la URL del programa CGI encargado de interpretar la entrada del suario y generar los resultados oportunos.

METHOD= GET / POST Tiene un significado. En principio puede tomar como valor cualquiera de los métodos de transferencia de datos reconocidos por HTTP, pero en la práctica sólo se emplean 2:

GET. Añande los argumento del formulario al URL que se especifica en ACTION (usando como separador el símbolo ?), lo que da lugar a que el programa los reciba como párametros de entrada.

POST. Envía los datos como parte de la entrada estándar.

Otros elementos

TYPE=“hidden”

Es simplemente un almacenamiento interno de datos. El visualizador no muestra el contenido, recogido en el atributo VALUE, pero sí se lo pasa al programa CGI. Resulta un componente muy adecuado para guardar información que se mantiene estable en la página (como un determinado valor que nos indica que los datos que provienen de esta página son los correctos y no otros de otra página distinta). Por ejemplo, si en un documento dado ha leido el nombre de usuarios, éste puede pasar de una página a otra a través de ete tipo de entrada, en vez de agrandar la lista de parámetros añadidos al URL.

&ltINPUT TYPE=“hidden” NAME=“browser” VALUE=“Arena”>

Este ejemplo, toma un valor oculto (hidden) en la variable browser, como valor “Arena”, que es un tipo de navegador que reconoce el HTML 3.0.

TYPE=“image”

Hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formulario envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros .x=n .y=n donde n son los números de las coordenas x y del punto en el que estaba el ratón en el momento del envío. Para presentar la imagen se utiliza el atributo SRC del elemento IMG. Este sería un ejemplo de respuesta:

imagen.x=99&imagen.y=15

Se escribe:

&ltFORM METHOD="POST" ACTION="cgi-bin/mail.pl">
&gtINPUT TYPE=IMAGE NAME="imagen" SRC="mail.gif">
</FORM>

Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.

 

Formulari de contacte amb JMOlmos

26 setembre de 2007, per JMOlmos

 

Amb aquest formulari em pots enviar un missatge

El teu nom
El teu e-mail
Tema
Missatge
Image Verification
Please enter the text from the image
[ Refresh Image ] [ What's This? ]