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.

Presentación del tema: "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."— Transcripción de la presentación:

1

2 FORMULARIOS HTML

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

4 ACCIÓN DE UN FORMULARIO n Carga del formulario. n Relleno de campos y respuestas del formulario. n Envío del formulario al servidor.

5 LA ETIQUETA. n Empiezan con. n Finaliza con. n En se indica: – Destino de los datos del formulario – Forma de envío de los datos

6 ACTION= “URL” n Indica el destino del formulario. n 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.

7 METHOD = “tipo de transmisión” n GET > es el método general de envío. n 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.

8 <FORM <FORM ACTION=“ mailto:nombre@depart.upv.es ” ACTION=“ mailto:nombre@depart.upv.es ” ENCTYPE=“text/plain” ENCTYPE=“text/plain” METHOD=post> METHOD=post>...... DEFINICIÓN DEL FORMULARIO

9 INTRODUCCIÓN DE DATOS n 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.

10 CAMPOS DE ENTRADA DE DATOS DE UNA SOLA LÍNEA n Se crean con el tag INPUT. n Sirven para introducir datos numéricos y/o un reducido número de palabras.

11 CARACTERÍSTICAS n Deben tener un nombre asignado. n 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.

12 TIPOS DE CAMPOS DE ENTRADA DE DATOS DE UNA SOLA LÍNEA

13 Mi formulario 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: El segundo campo de entrada tiene un tamaño de 8 caracteres y se pueden introducir en él exactamente ese número de caracteres: El tercer campo de entrada tiene un tamaño de 8 caracteres, pero sólo se pueden introducir en él 5 caracteres:

14 CAMPOS DE ENTRADA DE DATOS DE VARIAS LÍNEAS n Se crean con el tag TEXTAREA. n Sirven para introducir comentarios largos, anotaciones... n Se cierran con el tag final n Se cierran con el tag final Texto Texto

15 CARACTERÍSTICAS n Deben tener un nombre asignado. n 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.

16 Diferentes campos de varias líneas Un campo de entrada de datos con texto predeterminado: Este texto es el predeterminado y sólo se sobreescribirá al introducir nuevos datos Un campo de entrada de datos sin texto predeterminado:

17 LISTAS DE SELECCIÓN n Facilitan al usuario la selección. n Se crean con el tag n Se crean con el tag n Permiten selecciones multiples. n Pueden ir con o sin el atributo size.

18 DENOMINACIÓN DE LAS LISTAS DE SELECCIÓN n Tienen un nombre unívoco. n Es valido en todo el formulario. n Su aspecto es:......

19 LISTAS DE SELECCIÓN SIN EL ATRIBUTO SIZE n En forma de cuadro de lista despegable. n En el cuadro se ve una sola línea.

20 una lista de selección con un cuadro de lista de una sola línea <form action ="http://www.marcombo.es” method=get> indicación del sexo: hombre mujer

21 LISTAS DE SELECCIÓN CON EL ATRIBUTO SIZE n Con cuadro de lista de varias líneas. n Todas las entradas están visibles.

22 lista de selección con cuadro de lista de varias líneas especificación del tag: Lunes martes miércoles jueves viernes sábado domingo

23 SELECCIÓN MÚLTIPLE n Se especifica con el atributo múltiple en el tag select. n Todas las entradas están visibles en el cuadro. n La selección se hace mediante: –La tecla activada luego seleccionar las entradas. –La tecla activada y pulsar con el ratón.

24 lista de selección con cuadro de lista de varias líneas se permiten nombres repetidos ¿qué días desea tener libre? Lunes martes miércoles jueves viernes sábado domingo

25 BOTONES EN LOS FORMULARIOS n De opción. n De verificación. n De comando.

26 BOTÓN DE OPCIÓN n Da la posibilidad de elegir entre una de las opciones. n Debe haber, al menos, una opción elegida.

27 LA SINTAXIS ES: Nombre del botón Nombre del botón

28 Botones de opción Don Doña

29 BOTÓN DE VERIFICACIÓN n Permite elegir entre una o varias de las opciones. n Debe haber, al menos, una opción elegida.

30 LA SINTAXIS ES: Nombre del botón. Nombre del botón.

31 Botones de verificación Peces Aves Reptiles

32 n Da la posibilidad de no tener que seleccionar ninguna de las opciones. n La sintaxis es:...Value=“Indicador interno” CHECKED>Nombre del botón. La opción CHECKED

33 n Permiten enviar el formulario una vez se halla acabado. n Podemos enviar el formulario o cancelarlo. BOTONES DE COMANDO

34 LA SINTAXIS ES: n Para enviar el formulario: n Para cancelarlo:

35 Botones de envío de formularios Peces Aves Reptiles

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

37 Botones de envío de formularios Peces Aves Reptiles

38 FIN