SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
C
Qué es?
• Son plantillas que contienen controles
destinados a que el usuario introduzca
datos que serán enviados. Es un punto
de interacción entre el usuario y la web,
un formulario puede contener texto,
controles y etiquetas.
Para que sirve?
• La principal utilidad de los formularios es la posibilidad recolectar
información mediante la creación de cuestionarios, encuestas,
páginas de comentarios o cualquier documento en la que se
desee una interacción por parte del usuario, esta será enviada
nuevamente al servidor.
Tipos de Etiquetas:
• Form: Es el que contiene todos los elementos del
formulario.
• INPUT: es esencial ya que se usa para crear elementos
interactivos.
• TEXTAREA: Se utiliza para escribir comentarios mas largos.
• SELECT: Sirve para crear una lista desplegable de
elementos .
• LABEL: Se utiliza par definir el nombre visible a cada uno
de los campos.
TIPOS DE CONTROLES
Botones de envío (submit buttons):
Cuando se activa, un botón de envío.
Un formulario puede contener más de
un botón de envío.
Botones de reinicialización
(reset buttons): Cuando se activa,
un botón de reinicialización
reinicializa todos los controles a
sus valores iniciales.
Botones pulsadores (push buttons): Los
botones pulsadores no tienen un
comportamiento por defecto. Cada botón
pulsador puede tener asociados scripts a
través del atributo event del elemento.
Cuando ocurre un evento (p.ej., el usuario
aprieta el botón, lo suelta, etc.), se acciona
el script asociado.
BOTONES
Casillas de verificación (checkboxes)
Las casillas de verificación son interruptores de encendido/apagado
que pueden ser conmutados por el usuario. Una casilla de
verificación está "marcada" cuando se establece el atributo checked
del elemento de control. Cuando se envía un formulario, solamente
pueden tener éxito los controles de casillas de verificación que estén
marcadas.
Radiobotones (radio buttons)
Los radiobotones son como las casillas de verificación, excepto en
que cuando varios comparten el mismo nombre de control, son
mutuamente exclusivos: cuando uno está "encendido", todos los
demás con el mismo nombre se "apagan". Para crear un control de
radiobotón se usa el elemento INPUT.
Menúes (menus)
Los menúes ofrecen al usuario opciones entre las cuales
elegir. El elemento SELECT crea un menú, en
combinación con los elementos OPTGROUP y OPTION.
Entrada de texto (text input)
Hay dos tipos de controles que permiten a los usuarios
introducir textos. El elemento INPUT crea un control de
entrada de una sola línea, y el elemento TEXTAREA
crea una control de entrada de varias líneas. En ambos
casos, el texto introducido se convierte en el valor actual
del control.
Selección de ficheros (file select)
Este tipo de control permite al usuario elegir ficheros de
modo que sus contenidos puedan ser enviados con un
formulario. Se usa el elemento INPUT para crear un
control de selección de ficheros.
C
ATRIBUTOS DE ETIQUETAS
Una etiqueta se emplea para incluir un
enlace en una página. Utilizando sólo la
etiqueta no es posible establecer la
dirección a la que apunta cada enlace.
Como no es viable crear una etiqueta por
cada enlace diferente, la solución consiste
en personalizar las etiquetas HTML
mediante cierta información adicional
llamada atributos.
De esta forma, se utiliza una
misma etiqueta para todos los
enlaces de la página y se utilizan
los atributos para indicar la
dirección a la que apunta cada
enlace.
De esta forma, es habitual explicar por separado los atributos comunes de las etiquetas para no tener que
volver a hacerlo cada vez que se explica una nueva etiqueta. Los atributos comunes se dividen en cuatro
grupos según su funcionalidad
Atributos básicos: se pueden utilizar prácticamente en
todas las etiquetas HTML.
Atributos para internacionalización: los utilizan
las páginas que muestran sus contenidos en varios
idiomas y para aquellas que quieren indicar de
forma explícita el idioma de sus contenidos
Atributos de eventos: sólo se utilizan
en las páginas web dinámicas creadas
con JavaScript para realizar acciones
dinámicas sobre los elementos de la
página. Cada vez que el usuario pulsar
una tecla, mueve su ratón o pulsa
cualquier botón del ratón, se produce
un evento dentro del navegador.
Atributos de foco: relacionados principalmente con la
accesibilidad de los sitios web, Los elementos de las
páginas web también pueden obtener el foco de la
aplicación (en este caso, el foco del navegador) y HTML
define algunos atributos específicos para controlar cómo
se seleccionan los elementos.

Más contenido relacionado

La actualidad más candente

Formularios de-excel-
Formularios de-excel-Formularios de-excel-
Formularios de-excel-
brylejo
 
DESARROLLA APLICACIONES DE ESCRITORIO CON BASES DE DATOS
DESARROLLA  APLICACIONES DE ESCRITORIO CON BASES DE DATOS DESARROLLA  APLICACIONES DE ESCRITORIO CON BASES DE DATOS
DESARROLLA APLICACIONES DE ESCRITORIO CON BASES DE DATOS
mariavaargas
 
empleo de los controles de las herramientas de visual basic
empleo de los controles de las herramientas de visual basicempleo de los controles de las herramientas de visual basic
empleo de los controles de las herramientas de visual basic
Diana Peragallo
 

La actualidad más candente (13)

Clase swing
Clase swingClase swing
Clase swing
 
10 Herramientas Visual Basic
10 Herramientas Visual Basic 10 Herramientas Visual Basic
10 Herramientas Visual Basic
 
Visual Basic 6.0
Visual Basic 6.0Visual Basic 6.0
Visual Basic 6.0
 
Visual basic
Visual basicVisual basic
Visual basic
 
Visual basic ..!
Visual basic ..!Visual basic ..!
Visual basic ..!
 
Curso de Android 4.x: Unidad 05 Manejo de Formularios
Curso de Android 4.x: Unidad 05 Manejo de FormulariosCurso de Android 4.x: Unidad 05 Manejo de Formularios
Curso de Android 4.x: Unidad 05 Manejo de Formularios
 
CONTROLES COMUNES VISUAL BASIC
CONTROLES COMUNES VISUAL BASICCONTROLES COMUNES VISUAL BASIC
CONTROLES COMUNES VISUAL BASIC
 
Visual Basic
Visual BasicVisual Basic
Visual Basic
 
App web cap4 (2)
App web cap4 (2)App web cap4 (2)
App web cap4 (2)
 
Formularios de-excel-
Formularios de-excel-Formularios de-excel-
Formularios de-excel-
 
DESARROLLA APLICACIONES DE ESCRITORIO CON BASES DE DATOS
DESARROLLA  APLICACIONES DE ESCRITORIO CON BASES DE DATOS DESARROLLA  APLICACIONES DE ESCRITORIO CON BASES DE DATOS
DESARROLLA APLICACIONES DE ESCRITORIO CON BASES DE DATOS
 
empleo de los controles de las herramientas de visual basic
empleo de los controles de las herramientas de visual basicempleo de los controles de las herramientas de visual basic
empleo de los controles de las herramientas de visual basic
 
DISEÑO MENU
DISEÑO MENUDISEÑO MENU
DISEÑO MENU
 

Similar a Diseño de formularios (1)

Curso De Microsoft Visual Fox Pro For Windows
Curso De Microsoft Visual Fox Pro  For WindowsCurso De Microsoft Visual Fox Pro  For Windows
Curso De Microsoft Visual Fox Pro For Windows
rtinoco89
 
Aplica los fundamentos de programacion web
Aplica los fundamentos de programacion webAplica los fundamentos de programacion web
Aplica los fundamentos de programacion web
miguel9728
 
Controles de formularios e informes
Controles de formularios e informesControles de formularios e informes
Controles de formularios e informes
Gata Stefania
 
Controles de formularios e informes
Controles de formularios e informesControles de formularios e informes
Controles de formularios e informes
Gata Stefania
 
Controles formulario e informe (3) tics
Controles formulario e informe (3) ticsControles formulario e informe (3) tics
Controles formulario e informe (3) tics
Gata Stefania
 

Similar a Diseño de formularios (1) (20)

Curso De Microsoft Visual Fox Pro For Windows
Curso De Microsoft Visual Fox Pro  For WindowsCurso De Microsoft Visual Fox Pro  For Windows
Curso De Microsoft Visual Fox Pro For Windows
 
Aplica los fundamentos de programacion web
Aplica los fundamentos de programacion webAplica los fundamentos de programacion web
Aplica los fundamentos de programacion web
 
Manual visual studio 2010
Manual visual studio 2010Manual visual studio 2010
Manual visual studio 2010
 
Trabajo de desarrollo
Trabajo de desarrolloTrabajo de desarrollo
Trabajo de desarrollo
 
manual visual_studio_2010_
manual visual_studio_2010_manual visual_studio_2010_
manual visual_studio_2010_
 
visual basic
visual basicvisual basic
visual basic
 
IntroduccióN Bea
IntroduccióN BeaIntroduccióN Bea
IntroduccióN Bea
 
Visual Basic
Visual BasicVisual Basic
Visual Basic
 
Visual basic
Visual basicVisual basic
Visual basic
 
Visual basic
Visual basicVisual basic
Visual basic
 
Visual basic
Visual basicVisual basic
Visual basic
 
programacion. visual basic 6.0
programacion. visual basic 6.0programacion. visual basic 6.0
programacion. visual basic 6.0
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
 
Herramientas y Desarrollo de Software
Herramientas y Desarrollo de SoftwareHerramientas y Desarrollo de Software
Herramientas y Desarrollo de Software
 
Paso a paso para crear un formulario en dreamweaver.
Paso a paso para crear un formulario en dreamweaver.Paso a paso para crear un formulario en dreamweaver.
Paso a paso para crear un formulario en dreamweaver.
 
Controles de formularios e informes
Controles de formularios e informesControles de formularios e informes
Controles de formularios e informes
 
Que es dreamweaver
Que es dreamweaverQue es dreamweaver
Que es dreamweaver
 
Controles de formularios e informes
Controles de formularios e informesControles de formularios e informes
Controles de formularios e informes
 
Controles formulario e informe (3) tics
Controles formulario e informe (3) ticsControles formulario e informe (3) tics
Controles formulario e informe (3) tics
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
 

Más de LENINMATEO1 (20)

Examen
ExamenExamen
Examen
 
Chatbot
ChatbotChatbot
Chatbot
 
Cheque
ChequeCheque
Cheque
 
Ejercicios basicos php lenin quishpe
Ejercicios basicos php lenin quishpeEjercicios basicos php lenin quishpe
Ejercicios basicos php lenin quishpe
 
Tabla de multiplicar con for y while
Tabla de multiplicar con for y whileTabla de multiplicar con for y while
Tabla de multiplicar con for y while
 
Tabla de multiplicar con for
Tabla de multiplicar con forTabla de multiplicar con for
Tabla de multiplicar con for
 
Tabla de multiplicar con while
Tabla de multiplicar con whileTabla de multiplicar con while
Tabla de multiplicar con while
 
Tarea con switch
Tarea con switchTarea con switch
Tarea con switch
 
Uso de variables en php
Uso de variables en phpUso de variables en php
Uso de variables en php
 
In 29
In 29In 29
In 29
 
In 28
In 28In 28
In 28
 
In 27
In 27In 27
In 27
 
In 26
In 26In 26
In 26
 
In 25
In 25In 25
In 25
 
In 24
In 24In 24
In 24
 
In 23
In 23In 23
In 23
 
In 22
In 22In 22
In 22
 
In 21
In 21In 21
In 21
 
In 20
In 20In 20
In 20
 
In 18
In 18In 18
In 18
 

Último

2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
RigoTito
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
pvtablets2023
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
NadiaMartnez11
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
patriciaines1993
 

Último (20)

Sesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdfSesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdf
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfPlan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnn
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 

Diseño de formularios (1)

  • 1. C
  • 2. Qué es? • Son plantillas que contienen controles destinados a que el usuario introduzca datos que serán enviados. Es un punto de interacción entre el usuario y la web, un formulario puede contener texto, controles y etiquetas.
  • 3. Para que sirve? • La principal utilidad de los formularios es la posibilidad recolectar información mediante la creación de cuestionarios, encuestas, páginas de comentarios o cualquier documento en la que se desee una interacción por parte del usuario, esta será enviada nuevamente al servidor.
  • 4. Tipos de Etiquetas: • Form: Es el que contiene todos los elementos del formulario. • INPUT: es esencial ya que se usa para crear elementos interactivos. • TEXTAREA: Se utiliza para escribir comentarios mas largos. • SELECT: Sirve para crear una lista desplegable de elementos . • LABEL: Se utiliza par definir el nombre visible a cada uno de los campos.
  • 5. TIPOS DE CONTROLES Botones de envío (submit buttons): Cuando se activa, un botón de envío. Un formulario puede contener más de un botón de envío. Botones de reinicialización (reset buttons): Cuando se activa, un botón de reinicialización reinicializa todos los controles a sus valores iniciales. Botones pulsadores (push buttons): Los botones pulsadores no tienen un comportamiento por defecto. Cada botón pulsador puede tener asociados scripts a través del atributo event del elemento. Cuando ocurre un evento (p.ej., el usuario aprieta el botón, lo suelta, etc.), se acciona el script asociado. BOTONES
  • 6. Casillas de verificación (checkboxes) Las casillas de verificación son interruptores de encendido/apagado que pueden ser conmutados por el usuario. Una casilla de verificación está "marcada" cuando se establece el atributo checked del elemento de control. Cuando se envía un formulario, solamente pueden tener éxito los controles de casillas de verificación que estén marcadas. Radiobotones (radio buttons) Los radiobotones son como las casillas de verificación, excepto en que cuando varios comparten el mismo nombre de control, son mutuamente exclusivos: cuando uno está "encendido", todos los demás con el mismo nombre se "apagan". Para crear un control de radiobotón se usa el elemento INPUT.
  • 7. Menúes (menus) Los menúes ofrecen al usuario opciones entre las cuales elegir. El elemento SELECT crea un menú, en combinación con los elementos OPTGROUP y OPTION. Entrada de texto (text input) Hay dos tipos de controles que permiten a los usuarios introducir textos. El elemento INPUT crea un control de entrada de una sola línea, y el elemento TEXTAREA crea una control de entrada de varias líneas. En ambos casos, el texto introducido se convierte en el valor actual del control.
  • 8. Selección de ficheros (file select) Este tipo de control permite al usuario elegir ficheros de modo que sus contenidos puedan ser enviados con un formulario. Se usa el elemento INPUT para crear un control de selección de ficheros.
  • 9. C ATRIBUTOS DE ETIQUETAS Una etiqueta se emplea para incluir un enlace en una página. Utilizando sólo la etiqueta no es posible establecer la dirección a la que apunta cada enlace. Como no es viable crear una etiqueta por cada enlace diferente, la solución consiste en personalizar las etiquetas HTML mediante cierta información adicional llamada atributos. De esta forma, se utiliza una misma etiqueta para todos los enlaces de la página y se utilizan los atributos para indicar la dirección a la que apunta cada enlace. De esta forma, es habitual explicar por separado los atributos comunes de las etiquetas para no tener que volver a hacerlo cada vez que se explica una nueva etiqueta. Los atributos comunes se dividen en cuatro grupos según su funcionalidad
  • 10. Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas HTML.
  • 11. Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en varios idiomas y para aquellas que quieren indicar de forma explícita el idioma de sus contenidos
  • 12. Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con JavaScript para realizar acciones dinámicas sobre los elementos de la página. Cada vez que el usuario pulsar una tecla, mueve su ratón o pulsa cualquier botón del ratón, se produce un evento dentro del navegador.
  • 13. Atributos de foco: relacionados principalmente con la accesibilidad de los sitios web, Los elementos de las páginas web también pueden obtener el foco de la aplicación (en este caso, el foco del navegador) y HTML define algunos atributos específicos para controlar cómo se seleccionan los elementos.