[HTML] Formularios

En esta última entrega del apartado de HTML, vamos a tratar el uso de los formularios como elementos en el diseño web. Un formulario es una sección del documento que puede contener elementos especiales llamados controles, radiobotones, etc en esos controles. Los usuarios suelen completar dicho formulario usando sus campos disponibles: un cuadro de texto, una lista de seleccionables, cuadros para marcar, etc. En un formulario se solicitan diferentes tipos de datos, cada uno de los cuales quedará asociado a una variable. Una vez introducido estos datos, el contenido será enviado una dirección de correo indicada en mailto o a una dirección URL.

Las etiquetas para definir un formulario son <form> y </form>. Los atributos posibles son:

  • Action | Se refiere a la acción a realizar cuando se pulsa el botón de envío del formulario. Puede haber dos opciones:
    • El formulario se envía a una dirección de correo electrónico (<form action=”mailto:prueba@todobytes.es”>…</form>).
    • El formulario se envía a un programa o script que procesa su contenido (<form action=”URL”>…</action>).
  • Method | El  método que el protocolo http usa para enviar los datos. Dos variantes:
    • GET > envía los datos agregándolos a la dirección URL, separándolos de la dirección con una interrogación (?).
    • POST > envía los datos almacenándolos en el cuerpo del formulario.
  • Enctype | (Opcional). Especifica como se codifican los datos del formulario. Para envíos por mail, se hace obligatorio y es “text/plain”.

TIPOS DE CONTROLES

 Como hemos mencionado anteriormente, en un formulario podemos incluir todo tipo de elementos HTML, siendo los interactivos los más interesantes. Estos son:

  • INPUT | Todos los botones y casillas de texto (una línea).
  • TEXTAREA | cuadros de texto (varías líneas).
  • SELECT | una lista de opciones múltiples.

ETIQUETA INPUT

 El atributo name define cada campo de un formulario y es necesario para identificar los valores asignados al mismo a la hora de procesar la información devuelta. Está asociado con un par nombre/valor, lo que significa que el nombre del campo estará seguido de un signo igual (=) y el de un valor que el usuario introdujo o bien, si no introdujo ninguno, por el predeterminado de la etiqueta value.

El atributo type se usa para especificar que tipo de elemento se representa con la etiqueta INPUT. Estos son los valores posibles:

Cuadros de texto

  • text | Campos de texto para una única línea. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto que podemos introducir con el atributo maxlength.
  • password | Indica que el campo será una clave, por tanto los caracteres tecleados por el usuario en pantalla se verán como asteriscos. Sus atributos opcionales son los mismos que para text.
  • hidden | En este campo no aparece ningún valor rellenable por el usuario. Se suele usar para transmitir información de estado o de control o para enviar algún tipo de información que no debe ser variada en el formulario, pero si debe ser enviada junto a este.

Aquí tenéis un ejemplo en CodePen. Es interesante comprobar las diferencias entre los campos text y password, así como los atributos de extensión que hemos usado.

Selección de opciones

  • checkbox | Permiten seleccionar uno o más botones de una lista. Tiene dos estados: checked (seleccionado) o unchecked (no seleccionado). Cada caja de elemento de la lista es independiente del resto y, por lo tanto, el nombre del atributo NAME debe ser diferente en cada una.
  • radio | Parecido al anterior, pero solo permite elegir un elemento de la lista y, por tanto, el nombre del atributo NAME debe ser igual para todas. Al aplicar el atributo checked, se definirá como predeterminado.

Aquí el ejemplo en CodePen. Hay que prestar atención a la opción “checked”, la cual marca la opción por defecto, así como que en los elementos checkbox el NAME es distinto y en los radio es igual. Además, hay que definir el valor que el usuario lee en pantalla con un párrafo (<p>…</p>), el cual encierra el contenido de los elementos.

Los botones

  • submit | Es un botón para enviar la información del formulario una vez que se pulsa. El texto que muestra el botón se puede definir a través del atributo value.
  • reset | Un botón de reseteo para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.
  • image | Su función es similar a la del botón submit, pero mostrando una imagen en su lugar.

Veremos un ejemplo en CodePen al final del tema con todos los elementos explicados.

ETIQUETA TEXTAREA

Se usa para definir un cuadro de texto más grande que la línea propuesta por input. Son útiles cuando se debe introducir una gran cantidad de texto, ya que es mucho más cómodo de introducir que en un campo de texto normal. Su sintaxis:

Los atributos de este elemento son:

  • cols | Representa el nº de caracteres que puede contener una línea.
  • rows | Representa el nº de líneas.
  • name | Representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre/valor.
  • readonly | impide que el usuario modifique el texto predeterminado en el campo.

Aqui tenéis el ejemplo en CodePen.

ETIQUETA SELECT

Este tipo de campos despliegan una lista de opciones, entre las que el usuario debe elegir una o varias.

Sus atributos son:

  • name | Nombre de la variable.
  • size | El elemento select es presentado como un cuadro que lista las opciones definidas, el cual permite desplazamientos con un scroll. Este atributo define el número de líneas que se visualizarán al mismo tiempo.
  • multiple | Permite seleccionar más de un valor para el campo.
  • selected | Especifica la opción que saldrá marcada por defecto.

Su ejemplo en CodePen.

ESTRUCTURA DEL DOCUMENTO

Existen tres elementos que nos permitirán estructurar lógicamente los elementos incluidos en el formulario de manera que el usuario capte de forma intuitiva su información. Podemos usar:

  • fieldset | Permite agrupar temáticamente los controles y etiquetas relacionadas.
  • legend | Asigna un encabezado al fieldset.

 

Como resumen general de todo el tema de formularios, puedes ver uno en CodePen, donde se recogen todos los ejemplos vistos.

 

28 años | Entrenador de fútbol | Informático&Web Design | Linuxero | Componente de @chirigotaninos | Creador de http://todobytes.es & http://sudosu.es | Apasionado de la historia

Facebook Twitter Google+ YouTube 

Related posts

Leave a Comment