formularios html tipos de elementos de formulario n campos de entrada de datos. n campos de datos de...

FORMULARIOS HTMLFORMULARIOS HTML

TIPOS DE ELEMENTOS DE TIPOS DE ELEMENTOS DE FORMULARIOFORMULARIO

Campos de entrada de datos.Campos de entrada de datos. Campos de datos de varias Campos de datos de varias

líneas.líneas. Listas.Listas. Botones. Botones. Textos descriptivos.Textos descriptivos.

ACCIÓN DE UN ACCIÓN DE UN FORMULARIOFORMULARIO

Carga del formulario.Carga del formulario. Relleno de campos y Relleno de campos y

respuestas del formulario.respuestas del formulario. Envío del formulario al Envío del formulario al

servidor.servidor.

LA ETIQUETA <FORM>.LA ETIQUETA <FORM>.

Empiezan con <form>.Empiezan con <form>. Finaliza con </form>.Finaliza con </form>. En <form>se indica:En <form>se indica:

– Destino de los datos del Destino de los datos del formulario formulario

– Forma de envío de los datosForma de envío de los datos

ACTION= “URL”ACTION= “URL”

Indica el destino del formulario.Indica el destino del formulario. Siendo el URL:Siendo el URL:

– El tipo de protocolo El tipo de protocolo – HTTP:// , MAILTO:// ,otros...HTTP:// , MAILTO:// ,otros...

– El nombre de ordenador , la ruta de El nombre de ordenador , la ruta de acceso absoluta acceso absoluta

– ““...am/request/forms/buscar.cgi?”...am/request/forms/buscar.cgi?”

– El nombre del archivo al que se hace El nombre del archivo al que se hace referencia para mandar.referencia para mandar.

METHOD =METHOD =“tipo de transmisión”“tipo de transmisión”

GET > es el método general de GET > es el método general de envío. envío.

POST > para grandes cantidades de POST > para grandes cantidades de datos.datos.– GET se envía en una variable de GET se envía en una variable de

entorno que el servidor evalúa y lo entorno que el servidor evalúa y lo procesa.procesa.

– POST se trata como un dato introducido POST se trata como un dato introducido por línea de comando , y lo carga en por línea de comando , y lo carga en otra variable para procesarlo. otra variable para procesarlo.

<FORM <FORM

ACTION=“ACTION=“mailto:nombre@depart.upv.esmailto:nombre@depart.upv.es” ”

ENCTYPE=“text/plain”ENCTYPE=“text/plain”

METHOD=post>METHOD=post>

... ...

</FORM></FORM>

DEFINICIÓN DEL DEFINICIÓN DEL FORMULARIOFORMULARIO

INTRODUCCIÓN DE DATOSINTRODUCCIÓN DE DATOS

Usaremos los campos de Usaremos los campos de entrada de datos.entrada de datos.– Nos sirven para introducir Nos sirven para introducir

informaciones estructuradas.informaciones estructuradas.– Tenemos dos tipos de campos de Tenemos dos tipos de campos de

entrada de datos:entrada de datos:– Campos de una sola línea.Campos de una sola línea.– Campos de varias líneas.Campos de varias líneas.

CAMPOS DE ENTRADA DE CAMPOS DE ENTRADA DE DATOS DE UNA SOLA DATOS DE UNA SOLA

LÍNEALÍNEA

Se crean con el tag INPUT.Se crean con el tag INPUT. <INPUT NAME=Nombre del campo <INPUT NAME=Nombre del campo

SIZE=Valor MAXLENGTH=Valor>SIZE=Valor MAXLENGTH=Valor>

Sirven para introducir datos Sirven para introducir datos numéricos y/o un reducido numéricos y/o un reducido número de palabras.número de palabras.

CARACTERÍSTICASCARACTERÍSTICAS

Deben tener un nombre asignado. Deben tener un nombre asignado.

Necesitan datos sobre la longitud Necesitan datos sobre la longitud interna del campo; hay dos atributos interna del campo; hay dos atributos que nos aportan esta información:que nos aportan esta información:

– SIZE: Indica el tamaño del campo.SIZE: Indica el tamaño del campo.– MAXLENGTH: Indica el máximo número de MAXLENGTH: Indica el máximo número de

caracteres que podemos introducir en el caracteres que podemos introducir en el campo.campo.

Atributo DescripciónTYPE=Int Sólo se pueden introducir números enteros.TYPE=Float Sólo se pueden introducir números realesTYPE=Date Sólo se puede introducir una fecha de calendarioTYPE=Url Permite la entrada de una dirección de InternetTYPE=Password Las entradas a los campos se realizan de forma oculta.

TIPOS DE CAMPOS DE TIPOS DE CAMPOS DE ENTRADA DE DATOS DE UNA ENTRADA DE DATOS DE UNA

SOLA LÍNEASOLA LÍNEA

<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 CAMPOS DE ENTRADA DE DATOS DE VARIAS LÍNEASDATOS DE VARIAS LÍNEAS

Se crean con el tag TEXTAREA.Se crean con el tag TEXTAREA. Sirven para introducir comentarios Sirven para introducir comentarios

largos, anotaciones...largos, anotaciones... Se cierran con el tag final Se cierran con el tag final

</TEXTAREA></TEXTAREA>

<TEXTAREA NAME=Nombre del <TEXTAREA NAME=Nombre del campo>Texto</TEXTAREA>campo>Texto</TEXTAREA>

CARACTERÍSTICAS CARACTERÍSTICAS

Deben tener un nombre asignado.Deben tener un nombre asignado.

Tenemos que definir el tamaño Tenemos que definir el tamaño del campo a través de filas y del campo a través de filas y columnas, mediante los columnas, mediante los siguientes atributos:siguientes atributos:

– ROWS: Para definir el número de filas.ROWS: Para definir el número de filas.– COLS: Para definir el número de columnas.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ÓNLISTAS DE SELECCIÓN

Facilitan al usuario la selección.Facilitan al usuario la selección.

Se crean con el tag <select>Se crean con el tag <select>

Permiten selecciones multiples.Permiten selecciones multiples.

Pueden ir con o sin el atributo Pueden ir con o sin el atributo

size.size.

DENOMINACIÓN DE LAS DENOMINACIÓN DE LAS LISTAS DE SELECCIÓN LISTAS DE SELECCIÓN

Tienen un nombre unívoco.Tienen un nombre unívoco. Es valido en todo el formulario.Es valido en todo el formulario. Su aspecto es:Su aspecto es:

<select name:nombre de la lista > <select name:nombre de la lista > ...</select>...</select>

LISTAS DE SELECCIÓN SIN LISTAS DE SELECCIÓN SIN EL ATRIBUTO SIZEEL ATRIBUTO SIZE

En forma de cuadro de lista En forma de cuadro de lista despegable.despegable.

En el cuadro se ve una sola En el cuadro se ve una sola línea .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 LISTAS DE SELECCIÓN CON EL ATRIBUTO SIZECON EL ATRIBUTO SIZE

Con cuadro de lista de varias Con cuadro de lista de varias líneas.líneas.

Todas las entradas están Todas las entradas están visibles.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ÚLTIPLESELECCIÓN MÚLTIPLE

Se especifica con el atributo Se especifica con el atributo múltiple en el tag select.múltiple en el tag select.

Todas las entradas están Todas las entradas están visibles en el cuadro.visibles en el cuadro.

La selección se hace mediante:La selección se hace mediante:– La tecla <mayús> activada luego La tecla <mayús> activada luego

seleccionar las entradas.seleccionar las entradas.– La tecla <ctrl> activada y pulsar con el La tecla <ctrl> activada y pulsar con el

ratón.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 BOTONES EN LOS FORMULARIOSFORMULARIOS

De opción.De opción.

De verificación.De verificación.

De comando.De comando.

BOTÓN DE OPCIÓNBOTÓN DE OPCIÓN

Da la posibilidad de elegir Da la posibilidad de elegir entre una de las opciones.entre una de las opciones.

Debe haber, al menos, una Debe haber, al menos, una opción elegida.opción elegida.

LA SINTAXIS ES:LA SINTAXIS ES:

<INPUT TYPE=Radio <INPUT TYPE=Radio Name= “nombre del Name= “nombre del campo” Value=“Indicador campo” Value=“Indicador interno”> Nombre del interno”> Nombre del botónbotó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ÓNBOTÓN DE VERIFICACIÓN

Permite elegir entre una o Permite elegir entre una o varias de las opciones.varias de las opciones.

Debe haber, al menos, una Debe haber, al menos, una opción elegida. opción elegida.

LA SINTAXIS ES:LA SINTAXIS ES:

<INPUT TYPE=Checkbox <INPUT TYPE=Checkbox Name= “nombre del campo” Name= “nombre del campo” Value=“indicador interno”> Value=“indicador interno”> Nombre del botón.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>

Da la posibilidad de no tener Da la posibilidad de no tener que seleccionar ninguna de las que seleccionar ninguna de las opciones.opciones.

La sintaxis es:La sintaxis es:...Value=“Indicador interno” ...Value=“Indicador interno” CHECKED>Nombre del botón.CHECKED>Nombre del botón.

La opción CHECKEDLa opción CHECKED

Permiten enviar el formulario Permiten enviar el formulario una vez se halla acabado.una vez se halla acabado.

Podemos enviar el formulario o Podemos enviar el formulario o cancelarlo.cancelarlo.

BOTONES DE COMANDOBOTONES DE COMANDO

LA SINTAXIS ES:LA SINTAXIS ES:

Para enviar el formulario:Para enviar el formulario:<INPUT TYPE=Reset <INPUT TYPE=Reset

Value=Indicador>Value=Indicador>

Para cancelarlo:Para cancelarlo:<INPUT TYPE=Submit <INPUT TYPE=Submit

Value=Indicador>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>

<INPUT TYPE=IMAGE SRC <INPUT TYPE=IMAGE SRC nombre del gráfico>nombre del gráfico>

UTILIZAR UN GRÁFICO UTILIZAR UN GRÁFICO COMO BOTÓN DE ENVÍOCOMO BOTÓN DE ENVÍO

<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>

FINFIN