Fabian Guerrero Medina

Formulario

Los formularios nos permiten solicitar

informacin al visitante y procesarla.

En un formulario podremos solicitar diferentes

datos (campos) cada uno de los cuales quedar
asociado a una variable (nombre).

Una vez se hayan introducido los valores en los

campos, el contenido de estos sern enviados a
la direccin (URL) donde tengamos el programa
que pueda procesar las variables.

Ing CIP Fabian Guerrero Medina , Mg.

fabiangm@hotmail.com
Formulario

Etiqueta <FORM>: Definicin de formularios

Tiene la siguiente estructura:

< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET >
...
Aqu elementos que forman el formulario
...
< /FORM>
Formulario

La Etiqueta <input>

Define la introduccin de variables (datos), permite crear la

mayora de los campos de un formulario.

Campos que se pueden definir con INPUT:

Text
Password
Checkbox
Radio
Image
Hidden
Submit
Reset
Formulario
La Etiqueta <input type=text>

Text: Indica que el campo a introducir ser un texto.

Formulario
La Etiqueta <input type=text>
Sus atributos:
* maxlenght="" Seguido de un valor que limitar el
nmero mximo de carcteres a
introducir en ese campo.

* size="" Seguido de un valor que limitar el

numero de carcteres a mostrar en
pantalla.

value="" Indica que no hay valor inicial del campo.

* name="" Nombre del Campo.

Formulario
La Etiqueta <input type=password>
Password: Indica que el campo a introducir ser una
palabra de paso. Mostrar asteriscos en lugar de letras
escritas. Sus atributos sern los mismos que para text.
Formulario

La Etiqueta <input type=checkbox>

Checkbox: El campo se elegir marcando de entre varias

opciones una casilla cuadrada.

Atributos:

* value="" Entre comillas se indicar el valor de la

casilla.
* checked La casilla aparecer marcada por defecto.
Formulario

La Etiqueta <input type=checkbox>

Ejemplo

Pasatiempos
<INPUT TYPE="CheckBox" NAME="Hobbies" VALUE="TV"> TV
<INPUT TYPE="CheckBox" NAME="Hobbies" VALUE="Cine"> Cine
<INPUT TYPE="CheckBox" NAME="Hobbies" VALUE="Viajar"> Viajar
Formulario
La Etiqueta <input type=radio>
Radio: El campo se elegir marcando de entre varias
opciones una casilla circular.
Formulario
La Etiqueta <input type=radio>

Ejemplo

Cul es tu Sistema Operativo preferido?

<INPUT TYPE="radio" NAME="SistOper" VALUE="PC" CHECKED> PC

<INPUT TYPE="radio" NAME="SistOper " VALUE="Mac"> Mac
<INPUT TYPE="radio NAME="SistOper " VALUE="Unix"> Unix
Formulario

La Etiqueta <input type=image>

Image El campo contendr el valor en coordenadas del
punto de la imagen que haya pinchado. Atributo
obligatorio:
* src="" Entre comillas escribiremos el nombre del
archivo de imagen.
Formulario
La Etiqueta <input type=hidden>
Hidden El visitante no puede modificar su valor ya que no
est visible. Se manda siempre junto al atributo value=
seguido de su valor entre comillas.

La Etiqueta <input type=submit>

La Etiqueta <input type=reset>

Formulario
Formulario
La Etiqueta <input type= name=>
Name: Indica el nombre que se asigna a un determinado campo.

<FORM ACTION="" METHOD="POST">

Texto: <INPUT TYPE="text" NAME="txtnombre"><BR>

Password: <INPUT TYPE="password" NAME ="txtcontra"><BR>

Sexo:
<INPUT TYPE ="radio" NAME ="rdsexo" VALUE="1"> Hombre
<INPUT TYPE ="radio" NAME ="rdsexo" VALUE="2">Mujer <BR>
Vehiculo: <INPUT TYPE ="checkbox" NAME ="Moto" VALUE="Si">
Moto <INPUT TYPE ="checkbox" NAME ="Coche" VALUE="" CHECKED>Coche

<BR><BR>

<INPUT TYPE ="submit"> <INPUT TYPE ="Reset">

</FORM>
Formulario

La Etiqueta <input type=button>

Permite definir un Botn Genrico es decir, que

no tiene ninguna funcin definida, sino la que
nosotros queramos darle, para que ejecute una
determinada accin.
Formulario

Las acciones que debe llevar a cabo este botn al ser

pulsado slo pueden indicarse con lenguajes de script
como JavaScript o VBScript y no con HTML estndar.
Para insertar el cdigo de estos lenguajes se usa el
atributo ONCLICK:

<INPUT TYPE="button VALUE=mensaje botn ONCLICK="cdigo script">

Formulario

Ejemplo Cerrar la Ventana del Navegador

<FORM>

<INPUT TYPE="button" VALUE="Cerrar ventana" onClick="window.close();">

</FORM>

Cargar Otra Ventana

<FORM>

<INPUT TYPE="button" VALUE="Cargar otra ventana

onClick="window.location.replace (pag2.html');">
</FORM>