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

37
FORMULARIOS HTML FORMULARIOS HTML

Upload: guillermo-chica

Post on 22-Jan-2016

220 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

FORMULARIOS HTMLFORMULARIOS HTML

Page 2: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 3: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n 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.

Page 4: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 5: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 6: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 7: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

<FORM <FORM

ACTION=“ACTION=“mailto:[email protected]:[email protected]” ”

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

METHOD=post>METHOD=post>

... ...

</FORM></FORM>

DEFINICIÓN DEL DEFINICIÓN DEL FORMULARIOFORMULARIO

Page 8: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 9: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 10: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 11: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 12: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 13: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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>

Page 14: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 15: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 16: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 17: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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>

Page 18: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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 .

Page 19: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 20: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 21: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 22: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 23: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 24: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

BOTONES EN LOS BOTONES EN LOS FORMULARIOSFORMULARIOS

De opción.De opción.

De verificación.De verificación.

De comando.De comando.

Page 25: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 26: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 27: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 28: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 29: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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.

Page 30: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 31: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 32: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 33: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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>

Page 34: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 35: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

<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

Page 36: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

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

Page 37: FORMULARIOS HTML TIPOS DE ELEMENTOS DE FORMULARIO n Campos de entrada de datos. n Campos de datos de varias líneas. n Listas. n Botones. n Textos descriptivos

FINFIN