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

10 Herramientas Visual Basic
10 Herramientas Visual Basic 10 Herramientas Visual Basic
10 Herramientas Visual Basic Andrea Lozano
 
CONTROLES COMUNES VISUAL BASIC
CONTROLES COMUNES VISUAL BASICCONTROLES COMUNES VISUAL BASIC
CONTROLES COMUNES VISUAL BASICluismy055
 
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 basicDiana Peragallo
 
Formularios de excel
Formularios de excelFormularios de excel
Formularios de excel96_mavg
 

La actualidad más candente (11)

10 Herramientas Visual Basic
10 Herramientas Visual Basic 10 Herramientas Visual Basic
10 Herramientas Visual Basic
 
Clase swing
Clase swingClase swing
Clase swing
 
Visual basic
Visual basicVisual basic
Visual basic
 
CONTROLES COMUNES VISUAL BASIC
CONTROLES COMUNES VISUAL BASICCONTROLES COMUNES VISUAL BASIC
CONTROLES COMUNES VISUAL BASIC
 
Visual Basic 6.0
Visual Basic 6.0Visual Basic 6.0
Visual Basic 6.0
 
Formularios de-excel-
Formularios de-excel-Formularios de-excel-
Formularios de-excel-
 
Visual Basic
Visual BasicVisual Basic
Visual Basic
 
Visual basic ..!
Visual basic ..!Visual basic ..!
Visual basic ..!
 
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
 
Formularios de excel
Formularios de excelFormularios de excel
Formularios de excel
 

Similar a Diseno de formularios

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 Windowsrtinoco89
 
Aplica los fundamentos de programacion web
Aplica los fundamentos de programacion webAplica los fundamentos de programacion web
Aplica los fundamentos de programacion webmiguel9728
 
Visual Basic
Visual BasicVisual Basic
Visual BasicNiltonusp
 
programacion. visual basic 6.0
programacion. visual basic 6.0programacion. visual basic 6.0
programacion. visual basic 6.0dicnorimar cedeño
 
Herramientas y Desarrollo de Software
Herramientas y Desarrollo de SoftwareHerramientas y Desarrollo de Software
Herramientas y Desarrollo de SoftwareCristina1139
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formulariosjcremiro
 
Controles de formularios e informes
Controles de formularios e informesControles de formularios e informes
Controles de formularios e informesGata Stefania
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTMLAltivaSA
 
Controles de formularios e informes
Controles de formularios e informesControles de formularios e informes
Controles de formularios e informesGata Stefania
 
Controles formulario e informe (3) tics
Controles formulario e informe (3) ticsControles formulario e informe (3) tics
Controles formulario e informe (3) ticsGata Stefania
 
Que es dreamweaver
Que es dreamweaverQue es dreamweaver
Que es dreamweaverSaul Rz
 

Similar a Diseno de formularios (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
 
Herramientas y Desarrollo de Software
Herramientas y Desarrollo de SoftwareHerramientas y Desarrollo de Software
Herramientas y Desarrollo de Software
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
 
Controles de formularios e informes
Controles de formularios e informesControles de formularios e informes
Controles de formularios e informes
 
Microsoft access
Microsoft accessMicrosoft access
Microsoft access
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
 
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
 
Que es dreamweaver
Que es dreamweaverQue es dreamweaver
Que es dreamweaver
 

Más de BelenRosales12 (20)

3 s. programacion orientado objetos
3 s. programacion orientado objetos3 s. programacion orientado objetos
3 s. programacion orientado objetos
 
Final
FinalFinal
Final
 
Ingreso y consulta de datos
Ingreso y consulta de datosIngreso y consulta de datos
Ingreso y consulta de datos
 
Conexion base-de-datos-php
Conexion base-de-datos-phpConexion base-de-datos-php
Conexion base-de-datos-php
 
Base de datos php myadmin
Base de datos   php myadminBase de datos   php myadmin
Base de datos php myadmin
 
Ingreso y consulta de datos
Ingreso y consulta de datosIngreso y consulta de datos
Ingreso y consulta de datos
 
Capítulo 18
Capítulo 18Capítulo 18
Capítulo 18
 
Capítulo 17
Capítulo 17Capítulo 17
Capítulo 17
 
Vectores
VectoresVectores
Vectores
 
Informe15
Informe15Informe15
Informe15
 
Bucle foreach
Bucle foreachBucle foreach
Bucle foreach
 
Bucle for
Bucle forBucle for
Bucle for
 
Bucle while
Bucle whileBucle while
Bucle while
 
Chatbox
ChatboxChatbox
Chatbox
 
Informe15
Informe15Informe15
Informe15
 
Bucle while
Bucle whileBucle while
Bucle while
 
Informe14
Informe14Informe14
Informe14
 
Sentencias de decision
Sentencias de decisionSentencias de decision
Sentencias de decision
 
Informe13
Informe13Informe13
Informe13
 
Informe12
Informe12Informe12
Informe12
 

Diseno de formularios

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