F o r m u l a r i o s. Introducción. En los sistemas informáticos basados en la Web es muy común encontrar formularios para recopilar información. HTML.

Presentación del tema: "F o r m u l a r i o s. Introducción. En los sistemas informáticos basados en la Web es muy común encontrar formularios para recopilar información. HTML."— Transcripción de la presentación:

1 F o r m u l a r i o s

2 Introducción. En los sistemas informáticos basados en la Web es muy común encontrar formularios para recopilar información. HTML provee etiquetas para generar todos los objetos de formulario, a continuación se muestra la lista de los elementos de formulario que podemos generar con HTML. 1.Campos de texto 2.Campos de contraseña 3.Botones 4.Botones de opción 5.Casillas de verificación. 6.Combos 7.Etiquetas Los formularios permiten a los usuarios interaccionar con programas que se encuentran en los servidores remotos. En otras palabras los formularios proveen un medio por el cual se puede solicitar información, así como la manera de llevar a cabo el procesamiento de datos enviados por el usuario.

3 Generando formularios. Para crear un formulario, en HTML, se utiliza la etiqueta para delimitar inicio y fin del formulario. Sintaxis. Elementos del formulario. Atributos. AtributoOperaciónValores. actionIndica la URL del script relacionado con este formulario * Documento web, script dinamico, operación protocolo-aplicacion methodDetermina como deben ser procesados los formularios. * get, post * En el curso no se enfatiza en estos atributos, pues en cursos posteriores se hace una revisión muy exhaustiva.

4 Agregar Elementos al formulario Para agregar elementos a un formulario se utiliza la etiqueta, esta etiqueta determina que tipo de elemento será agregado al formulario, mediante el valor de un atributo. Sintaxis. El tipo de elemento es determinado por el atributo type Notas: Por cada elemento que se desee agregar al formulario debemos agreagr una etiqueta.

5 Atributos de la etiqueta AtributoOperaciónValores typeDetermina el tipo de elementotext, textarea, password, radio,checkbox valueIndica el valor inicial de los elementos del formularioSegún elemento NameIdentifica valores recolectados por un formulario (variable) Según elemento idIdentificador del elementoIdentificador sizeIndica la longitud grafica de un campo de texto o password Tamaño en caracteres maxlengDetermina la longitud maxima de caracteres en un campo de texto o password Numero entero que denota el numero de caracteres srcIndica la URL de una imagenRuta checkedIndica si un radio o checkbox esta seleccionadoSi e indica este atributo el elemento esta seleccionado, su ausencia implica no seleccionado disabledDetermina si el elemento esta deshabilitado.Similar a checked. readonlyElementos de solo lecturaSimilar a checked. eventoIndica que se lanzara un evento.Evento Javascript

6 Agregando campos de texto Para agregar un campo de texto se configuran los atributos de la etiqueta de la siguiente manera. sintaxis Indica que el elemento es un campo de texto. Longitud del campo de texto, por default es de 20 Variable en la que se almacenan los datos del campo texto

7 Campos de texto. Ejemplo Inserción de un campo de texto en un formulario. Campo de texto de tamaño 15

8 Agregando Campo de Contraseña. Para agregar un campos de contraseña se configuran los atributos de la etiqueta de la siguiente manera. Sintaxis. Indica que el elemento es un campo de Contraseña. Longitud del campo de Contraseña, por default es de 20 Variable en la que se almacenan los datos del campo Contraseña

9 Campos de Contraseña. Ejemplo

10 Agregando Botones. Para agregar un BOTON se configuran los atributos de la etiqueta de la siguiente manera. Sintaxis. Indica que el elemento es un Boton Valor inicial del boton Variable en la que se almacenan los datos del campo Contraseña Importante: Los botones creados con el valor “button” del atributo type, generalmente son utilizados para ejecutar eventos JavaScript.

11 Botones en formularios. Ejemplos Para los botones mediante la etiqueta, aplican los siguientes atributos: type, value, name, disabled, evento. En el caso de los botones, el valor del atributo value, indica el texto sobre el boton al mismo tiempo que el valor de la variable del boton.

12 Agregar optionButton Para agregar un OptionButton se configuran los atributos de la etiqueta de la siguiente manera. Sintaxis. Indica que el elemento es un boton de opción Valor inicial del boton Nombre del objeto Opcional, indica si esta seleccionado por default

13 optionButton. Ejemplo. La regla en los optionbutton, es que solo uno de un conjunto se pueda seleccionar. Para logra un conjunto cada uno de los optionbutton deben tener el mismo nombre (atributo name) Conjunto de optionbutton

14 Botones “submit” y “reset” Para enviar datos se requiere de un botón Submit en el formulario. La sintaxis de dicho botón es la siguiente: El atributo value fija el texto sobre el botón, por omisión el texto es “Submit”. Otro botón útil es Reset, el cual limpia el formulario por completo. La sintaxis de dicho botón es la siguiente: El atributo value fija el texto sobre el botón, por omisión el texto es “Reset”.

15 Botones “submit” y “reset” (Ejemplo)

16 Agregar checkBotton Para agregar un CheckBox se configuran los atributos de la etiqueta de la siguiente manera. Sintaxis. Indica que el elemento es un Casilla de verificación (checkbox) Valor inicial del objeto Nombre del objeto Opcional, indica si esta seleccionado por default

17 CheckBotton. Ejemplo Casilla de verificación deshabilitada. A diferencia de los optionbutton, las casillas de verificación no están restringidas a un solo elemento seleccionado.

18 Agregar Combos La etiqueta permite agregar combos en un formulario. Cada alternativa del combo es representada por la etiqueta. La sintaxis general de esta etiqueta es la siguiente: Sintaxis. Etiqueta1 Etiqueta2... EtiquetaN

19 Combos. Ejemplo Por default el elemento “Mexico”, esta seleccionado El combo muestra solo un elemento de la lista.

20 Combos. Ejemplo Mostrando 1 solo elemento del combo Mostrando 2 elementos del combo

21 Agregar Área de texto. Las áreas permiten al usuario poner más de una línea de texto en un solo elemento. La sintaxis general de la etiqueta es la siguiente: Sintaxis. TEXTO INICIAL Nota. Los atributos COLS y ROWS indican el número de columnas y renglones del TEXTAREA respectivamente

22 Área de texto. Ejemplo