SlideShare una empresa de Scribd logo
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

Clase swing
Clase swingClase swing
Clase swing
Jean Tapuy
 
10 Herramientas Visual Basic
10 Herramientas Visual Basic 10 Herramientas Visual Basic
10 Herramientas Visual Basic
Andrea Lozano
 
Visual Basic 6.0
Visual Basic 6.0Visual Basic 6.0
Visual Basic 6.0
Elixa Sheppard Flores
 
Visual basic
Visual basicVisual basic
Visual basic
Gaby Gonzalez
 
Visual basic ..!
Visual basic ..!Visual basic ..!
Visual basic ..!
angiegerladinalejandro
 
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
David Vaquero
 
CONTROLES COMUNES VISUAL BASIC
CONTROLES COMUNES VISUAL BASICCONTROLES COMUNES VISUAL BASIC
CONTROLES COMUNES VISUAL BASIC
luismy055
 
Visual Basic
Visual BasicVisual Basic
Visual Basic
PaolaMarilyn
 
Formularios de-excel-
Formularios de-excel-Formularios de-excel-
Formularios de-excel-
brylejo
 
App web cap4 (2)
App web cap4 (2)App web cap4 (2)
App web cap4 (2)
GermanVega32
 
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
 
DISEÑO MENU
DISEÑO MENUDISEÑO MENU
DISEÑO MENU
Lenin Jempets Kayap
 

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
 
Formularios de-excel-
Formularios de-excel-Formularios de-excel-
Formularios de-excel-
 
App web cap4 (2)
App web cap4 (2)App web cap4 (2)
App web cap4 (2)
 
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 (2)

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
 
Manual visual studio 2010
Manual visual studio 2010Manual visual studio 2010
Manual visual studio 2010
John Calixto Ayala
 
Trabajo de desarrollo
Trabajo de desarrolloTrabajo de desarrollo
Trabajo de desarrollo
cristhianarevalo6
 
manual visual_studio_2010_
manual visual_studio_2010_manual visual_studio_2010_
manual visual_studio_2010_
Juan Reynaldo Yarleque Sosa
 
visual basic
visual basicvisual basic
visual basic
alicia beatriz
 
IntroduccióN Bea
IntroduccióN BeaIntroduccióN Bea
IntroduccióN Bea
alicia beatriz
 
Visual Basic
Visual BasicVisual Basic
Visual Basic
Niltonusp
 
Visual basic
Visual basicVisual basic
Visual basic
casdilacol
 
Visual basic
Visual basicVisual basic
Visual basic
casdilacol
 
Visual basic
Visual basicVisual basic
Visual basic
Luis Orihuen
 
programacion. visual basic 6.0
programacion. visual basic 6.0programacion. visual basic 6.0
programacion. visual basic 6.0
dicnorimar cedeño
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
jcremiro
 
Herramientas y Desarrollo de Software
Herramientas y Desarrollo de SoftwareHerramientas y Desarrollo de Software
Herramientas y Desarrollo de Software
Cristina1139
 
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.
marybermudez12
 
Controles de formularios e informes
Controles de formularios e informesControles de formularios e informes
Controles de formularios e informes
Gata Stefania
 
Que es dreamweaver
Que es dreamweaverQue es dreamweaver
Que es dreamweaver
Saul Rz
 
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
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
AltivaSA
 

Similar a Diseño de formularios (2) (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 paulcuenca9

Informe grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuencaInforme grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuenca
paulcuenca9
 
Chatbot convertido compressed (1)-comprimido (3)-convertido
Chatbot convertido compressed (1)-comprimido (3)-convertidoChatbot convertido compressed (1)-comprimido (3)-convertido
Chatbot convertido compressed (1)-comprimido (3)-convertido
paulcuenca9
 
Chatbot convertido compressed (1)-comprimido (3)
Chatbot convertido compressed (1)-comprimido (3)Chatbot convertido compressed (1)-comprimido (3)
Chatbot convertido compressed (1)-comprimido (3)
paulcuenca9
 
18
1818
017
017017
016
016016
Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7
paulcuenca9
 
Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6
paulcuenca9
 
Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5
paulcuenca9
 
Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4
paulcuenca9
 
Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3
paulcuenca9
 
Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2
paulcuenca9
 
Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1
paulcuenca9
 
Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)
paulcuenca9
 
Vector
VectorVector
Vector
paulcuenca9
 
15
1515
14
1414
Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13
paulcuenca9
 
Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12
paulcuenca9
 
Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11
paulcuenca9
 

Más de paulcuenca9 (20)

Informe grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuencaInforme grupal f_arinango_ cuenca
Informe grupal f_arinango_ cuenca
 
Chatbot convertido compressed (1)-comprimido (3)-convertido
Chatbot convertido compressed (1)-comprimido (3)-convertidoChatbot convertido compressed (1)-comprimido (3)-convertido
Chatbot convertido compressed (1)-comprimido (3)-convertido
 
Chatbot convertido compressed (1)-comprimido (3)
Chatbot convertido compressed (1)-comprimido (3)Chatbot convertido compressed (1)-comprimido (3)
Chatbot convertido compressed (1)-comprimido (3)
 
18
1818
18
 
017
017017
017
 
016
016016
016
 
Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7Jefferson cuenca practica_b#7
Jefferson cuenca practica_b#7
 
Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6Jefferson cuenca practica_b#6
Jefferson cuenca practica_b#6
 
Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5Jefferson cuenca practica_b#5
Jefferson cuenca practica_b#5
 
Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4Jefferson cuenca practica_b#4
Jefferson cuenca practica_b#4
 
Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3Jefferson cuenca practica_b#3
Jefferson cuenca practica_b#3
 
Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2Jefferson cuenca practica_b#2
Jefferson cuenca practica_b#2
 
Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1Jefferson cuenca practica_b#1
Jefferson cuenca practica_b#1
 
Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)Base de datos_-_php_myadmin_(3)
Base de datos_-_php_myadmin_(3)
 
Vector
VectorVector
Vector
 
15
1515
15
 
14
1414
14
 
Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13Jefferson cuenca trabajos_individuales#13
Jefferson cuenca trabajos_individuales#13
 
Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12Jefferson cuenca trabajos_individuales#12
Jefferson cuenca trabajos_individuales#12
 
Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11Jefferson cuenca trabajos_individuales#11
Jefferson cuenca trabajos_individuales#11
 

Último

Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
LuisAlbertoCordovaBa
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
vicenteariana54
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
Kevin Aguilar Garcia
 
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
NoraRoberts5
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
ruthechepurizaca
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
jorgejhonatanaltamir1
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
al050121024
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
erick502105
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
EmilyEsmeraldaQuispe
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
cpadua713
 
PRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS YPRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS Y
WillyBernab
 

Último (11)

Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
 
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
 
PRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS YPRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS Y
 

Diseño de formularios (2)

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