Los elementos del formulario HTML5

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

<FORM ACTION="url" METHOD="método de envío">
    <INPUT> | <SELECT> | <TEXTAREA> | <BUTTON> | <DATALIST> | <OUTPUT>
</FORM>

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
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
...
  • <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.
<div class="inputs">
    <input type="email" id="email" name="email" required size="80"></input>	
</div>

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies ACEPTAR

Aviso de cookies