FORMULARIOS HTML
TIPOS DE ELEMENTOS DE
FORMULARIO
Campos de entrada de datos.
 Campos de datos de varias líneas.
 Listas.
 Botones.
 Textos descriptivos.

ACCIÓN DE UN FORMULARIO
Carga del formulario.
 Relleno de campos y respuestas
del formulario.
 Envío del formulario al servidor.

LA ETIQUETA <FORM>.
Empiezan con <form>.
 Finaliza con </form>.
 En <form>se indica:

– Destino de los datos del formulario
– Forma de envío de los datos
ACTION= “URL”
Indica el destino del formulario.
 Siendo el URL:

– El tipo de protocolo
– HTTP:// , MAILTO:// ,otros...
– El nombre de ordenador , la ruta de
acceso absoluta
– “...am/request/forms/buscar.cgi?”
– El nombre del archivo al que se hace
referencia para mandar.
METHOD =
“tipo de transmisión”
GET > es el método general de envío.
 POST > para grandes cantidades de
datos.

– GET se envía en una variable de
entorno que el servidor evalúa y lo
procesa.
– POST se trata como un dato introducido
por línea de comando , y lo carga en
otra variable para procesarlo.
DEFINICIÓN DEL
FORMULARIO
<FORM
ACTION=“mailto:[email protected]
ENCTYPE=“text/plain”
METHOD=post>
...
</FORM>
INTRODUCCIÓN DE DATOS

Usaremos los campos de entrada
de datos.
– Nos sirven para introducir
informaciones estructuradas.
– Tenemos dos tipos de campos de
entrada de datos:
– Campos de una sola línea.
– Campos de varias líneas.
CAMPOS DE ENTRADA DE
DATOS DE UNA SOLA LÍNEA

Se crean con el tag INPUT.
<INPUT NAME=Nombre del campo
SIZE=Valor MAXLENGTH=Valor>

Sirven para introducir datos
numéricos y/o un reducido número
de palabras.
CARACTERÍSTICAS

Deben tener un nombre asignado.

Necesitan datos sobre la longitud
interna del campo; hay dos atributos
que nos aportan esta información:
– SIZE: Indica el tamaño del campo.
– MAXLENGTH: Indica el máximo número de
caracteres que podemos introducir en el
campo.
TIPOS DE CAMPOS DE ENTRADA
DE DATOS DE UNA SOLA LÍNEA
A tributo
Descripción
TYPE =Int
TYPE =F loat
TYPE = Date
TYPE = Url
TYPE = Passw ord
Sólo se pueden introducir núm eros enteros.
Sólo se pueden introducir núm eros reales
Sólo se puede introducir una fecha de calendario
Permite la entrada de una dirección de Internet
Las entradas a los campos se realizan de forma oculta.
<HTML>
<BODY BGCOLOR=Yellow>
<H3>Mi formulario</H3>
<FORM ACTION="http://www.marcombo.es"METHOD=GET><P>
El primer campo de entrada de una sola línea tiene un tamaño de 4 caracteres
y se puedenintroducir en él hasta 9 caracteres:<BR>
<INPUT NAME="Campo1" SIZE=4 MAXLENGTH=9><BR>
El segundo campo de entrada tiene un tamaño de 8 caracteres y se pueden introducir
en él exactamente ese número de caracteres:<BR>
<INPUT NAME="Campo2" SIZE=8 MAXLENGTH=8><BR>
El tercer campo de entrada tiene un tamaño de 8 caracteres, pero sólo se pueden
introducir en él 5 caracteres:<BR>
<INPUT NAME="Campo3" SIZE=8 MAXLENGTH=5><BR>
</FORM>
</BODY>
</HTML>
CAMPOS DE ENTRADA DE
DATOS DE VARIAS LÍNEAS
Se crean con el tag TEXTAREA.
 Sirven para introducir comentarios
largos, anotaciones...
 Se cierran con el tag final
</TEXTAREA>

<TEXTAREA NAME=Nombre del
campo>Texto</TEXTAREA>
CARACTERÍSTICAS

Deben tener un nombre asignado.

Tenemos que definir el tamaño del
campo a través de filas y columnas,
mediante los siguientes atributos:
– ROWS: Para definir el número de filas.
– COLS: Para definir el número de columnas.
<HTML>
<BODY BGCOLOR=White>
<CENTER>
<H5>Diferentes campos de varias líneas</H5>
<FORM ACTION="http://www.marcombo.es" METHOD=POST><P>
Un campo de entrada de datos con texto predeterminado:
<TEXTAREA NAME=Campo1 COLS=40 ROWS=5>Este texto es el
predeterminado y sólo se sobreescribirá al introducir nuevos datos</TEXTAREA><P>
Un campo de entrada de datos sin texto predeterminado:
<TEXTAREA NAME=Campo2 COLS=60 ROWS=3></TEXTAREA><P>
</FORM>
</CENTER>
</BODY>
</HTML>
LISTAS DE SELECCIÓN

Facilitan al usuario la selección.

Se crean con el tag <select>

Permiten selecciones multiples.

Pueden ir con o sin el atributo size.
DENOMINACIÓN DE LAS
LISTAS DE SELECCIÓN
Tienen un nombre unívoco.
 Es valido en todo el formulario.
 Su aspecto es:

<select name:nombre de la lista > ...</select>
LISTAS DE SELECCIÓN SIN
EL ATRIBUTO SIZE

En forma de cuadro de lista
despegable.

En el cuadro se ve una sola línea .
<html>
<body bgcolor=white>
<center>
<h2>una lista de selección con un cuadro de lista
de una sola línea</h2>
</center>
<form action ="http://www.marcombo.es”
method=get><p>indicación del sexo:<p>
<select name=listal>
<option>hombre</option>
<option>mujer</option>
</select>
</form>
</html>
LISTAS DE SELECCIÓN CON
EL ATRIBUTO SIZE
Con cuadro de lista de varias
líneas.
 Todas las entradas están visibles.

<html>
<body bgcolor=white >
<center>
<h3>lista de selección con cuadro de lista de varias líneas</h3>
</center>
<form action="http://www.marcombo.es"method =get><p>
especificación del tag:<p>
<select name=listal size=4>
<option>Lunes</option>
<option>martes</option>
<option>miércoles</option>
<option>jueves</option>
<option>viernes</option>
<option>sábado</option>
<option>domingo</option>
</select>
</form>
</body>
</html>
SELECCIÓN MÚLTIPLE
Se especifica con el atributo
múltiple en el tag select.
 Todas las entradas están visibles
en el cuadro.
 La selección se hace mediante:

– La tecla <mayús> activada luego
seleccionar las entradas.
– La tecla <ctrl> activada y pulsar con el
ratón.
<html>
<body bgcolor=white>
<center>
<h3>lista de selección con cuadro de lista de varias líneas</h3>
<h4>se permiten nombres repetidos</h4>
</center>
<form action="http://www.marcombo.es"method=get><p>
¿qué días desea tener libre?<p>
<select -name=listal size=7 multiple>
<option>Lunes</option>
<option>martes</option>
<option>miércoles</option>
<option>jueves</option>
<option>viernes</option>
<option>sábado</option>
<option>domingo</option></select>
</form>
</body>
</html>
BOTONES EN LOS
FORMULARIOS

De opción.

De verificación.

De comando.
BOTÓN DE OPCIÓN

Da la posibilidad de elegir entre
una de las opciones.

Debe haber, al menos, una opción
elegida.
LA SINTAXIS ES:
<INPUT TYPE=Radio
Name= “nombre del campo”
Value=“Indicador interno”>
Nombre del botón
<HTML>
<BODY BGCOLOR=white>
<H3>Botones de opción</H3>
<INPUT TYPE=Radio NAME="sexo" VALUE="Hombre">Don
<INPUT TYPE=Radio NAME="sexo" VALUE="Mujer">Doña
</FORM>
</BODY>
</HTML>
BOTÓN DE VERIFICACIÓN

Permite elegir entre una o varias
de las opciones.

Debe haber, al menos, una opción
elegida.
LA SINTAXIS ES:
<INPUT TYPE=Checkbox
Name= “nombre del campo”
Value=“indicador interno”>
Nombre del botón.
<HTML>
<BODY BGCOLOR=white TEXT=Blue>
<H3>Botones de verificación</H3>
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Peces">Peces
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Aves">Aves
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Reptiles">Reptiles
</FORM>
</BODY>
</HTML>
La opción CHECKED
Da la posibilidad de no tener que
seleccionar ninguna de las
opciones.
 La sintaxis es:

...Value=“Indicador interno”
CHECKED>Nombre del botón.
BOTONES DE COMANDO

Permiten enviar el formulario una
vez se halla acabado.

Podemos enviar el formulario o
cancelarlo.
LA SINTAXIS ES:

Para enviar el formulario:
<INPUT TYPE=Reset Value=Indicador>

Para cancelarlo:
<INPUT TYPE=Submit Value=Indicador>
<HTML>
<BODY BGCOLOR=white Text=Red>
<H3>Botones de envío de formularios</H3>
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Peces">Peces
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Aves">Aves
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Reptiles">Reptiles
<P>
<INPUT TYPE=submit VALUE="Enviar formulario">
<INPUT TYPE=reset VALUE="Cancelar">
</FORM>
</BODY>
</HTML>
UTILIZAR UN GRÁFICO
COMO BOTÓN DE ENVÍO
<INPUT TYPE=IMAGE SRC
nombre del gráfico>
<HTML>
<BODY BGCOLOR=white Text=green>
<H3>Botones de envío de formularios</H3>
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Peces">Peces
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Aves">Aves
<INPUT TYPE=Checkbox NAME=”Animales"
VALUE="Reptiles">Reptiles
<P>
<INPUT TYPE=Image src="b. de envio.bmp">
<INPUT TYPE=reset VALUE="Cancelar">
</FORM>
</BODY>
</HTML>
FIN
Descargar

Botones en los formularios: