Los elementos del formulario HTML5

El elemento HTML para definir un formulario Web se especifica con la etiqueta <FORM> y tiene este aspecto:

Estos son los atributos que encontramos en la etiqueta FORM:

ACTION: la URL de un programa que procesa la petición en el lado servidor.

METHOD: el método HTTP que el navegador utiliza para mandar los datos del formulario del cliente al servidor. Hay dos opciones:

  • post: corresponde al método POST HTTP, por el cual los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor. Los más habitual es elegir este método.
  • get: corresponde al método GET HTTP, por el cual los datos del formulario son adjuntados a la URI del atributo action con un ‘?’ como separador, y la URI resultante es enviada al servidor.

Los elementos del formulario

Los elementos que se pueden tener en un formulario son:

  • <INPUT>: entrada o campo del formulario. Los tipos de input más utilizados son:
    • text: cuadro de texto.
    • password: cuadro de texto para introducir contraseña (no se ve contenido).
    • hidden: texto oculto, el navegador no lo visualiza en el documento Web, sin embargo si vemos su código podemos ver su contenido.
    • checkbox: casilla de verificación.
    • radio: casilla de selección.
    • submit: botón de envío del contenido del formulatio al servidor.
    • reset: botón que facilita el borrado de los datos completados en el formulario.
    • color
    • date
    • datetime-local
    • email
    • month
    • number
    • range
    • search
    • tel
    • time
    • url
    • week
  • <SELECT>: lista de selección con múltiples valores.
  • <TEXTAREA>: campo de texto multilínea.
  • <BUTTON>: botón de acción.
  • <DATALIST>: facilita un listado de opciones predeterminadas para un cuadro de texto.
  • <OUTPUT>: facilita mostrar la salida a un calculo realizado en el formulario.

Al igual que la etiqueta FORM, cada uno de los elementos del formulario tiene sus propios atributos. A modo de ejemplo, estos son los más habituales del elemento <INPUT> cuadro de texto (text):

  • id: identificador del elemento.
  • name: nombre del elemento. Lo habitual es que tenga el mismo valor que el atributo “id”.
  • type: para indicar el tipo (text, password, hidden, etc).
  • required: indica si es imprescindible poner información en el campo, se pone en el campo sólo la palabra “required” (tambien es posible escribiendo required=”true”).
  • placeholder: da información del dato que se espera introduzca el usuario (aparece en el cuadro de texto hasta que el usuario hace click en él).
  • size: tamaño del cuadro de texto.
  • maxlength: longitud máxima del texto.
  • value: para inicializar con dicho valor el cuadro de texto.
 

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *