Diseño de formularios HTML

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.