Formularios HTML

Estructura Básica

<form></form>

Dentro de esta etiqueta van los elementos del formulario: Ingreso de texto, casillas de verificación, botones de radio, listas de selección, botones de envío, etc.

Atributos de Formulario

<form action="transferencia.php"
      method="post"
      autocomplete="off">
  Aquí van los elementos del formulario
</form>

action

Al hacer “Submit”, la información levantada se envía a la página especificada en el atributo “action” y así se llevan a cabo los procesos en ella definida.

method

En method se indica el método de transferencia de datos:

• post - como transacción HTTP POST (transferencia segura, no se puede “marcar”)
• get - como variables de URL (url limitada en caracteres, visible, cadenas de consulta)

autocomplete

Especifica si un formulario debe tener autocompletar encendido o apagado.

Cuando autocompletado está activado, el navegador completa automáticamente los valores basándose en valores que el usuario ha introducido antes. Por defecto está activado.

Etiqueta <label>

<label for="id_elemento">
  Texto identificatorio
</label>

Sirve para poner texto al lado de los elementos de formulario y asociar el texto al propio elemento.

• El atributo FOR identifica al campo que se está asociando.
• El resultado es que el texto colocado dentro de LABEL es un elemento interactivo.
• Al hacer clic en el texto, sería como si hiciéramos clic en el propio campo asociado al LABEL.

Etiqueta <input>

La etiqueta <input> se utiliza para el ingreso de datos por parte del usuario. El campo del input dependerá del tipo de control que le asignemos al atributo type.

type=“text”

<label for="primerNombre">
  Texto
</label>

<input type="text" id="primerNombre">

Indica que el campo a introducir será texto (corto).

type=“password”

<label for="contrasena">
  Contraseña
</label>

<input type="password" id="contrasena">

Crea una zona de texto donde los caracteres, al introducirlos por el usuario, se reemplazan por asteriscos, debido a motivos de seguridad.

type=“email”

<label for="correoElectronico">
  E-mail
</label>

<input type="email" id="correoElectronico">

Tiene la capacidad de aceptar únicamente direcciones de correo electrónico. Además, se pueden enviar varios email separados por comas, si tiene especificado el atributo multiple.

type=“number”

<label for="contacto">
  Número de contacto
</label>

<input type="number" id="contacto">

Sirve para escribir sólo números. En algunos navegadores, cuando se ejecuta el evento onSubmit no se hace el envío en caso que el campo number esté lleno de caracteres que no sean numéricos.

type=“radio”

<input type="radio" id="hombre" name="sexo" value="hombre" checked="checked">
<label for="hombre">
  Hombre
</label>

<input type="radio" id="mujer" name="sexo" value="mujer">
<label for="mujer">Mujer</label>

Es un campo multivalor excluyente. Permite escoger una y sólo una opción de un conjunto de valores.

type=“checkbox”

<input type="checkbox" id="mailings">
<label for="mailings">
  Deseo recibir mailings
</label>

<input type="checkbox" id="noticias"
       checked="checked">
<label for="noticias">
  Deseo recibir noticias
</label>

Define las casillas de verificación que tendrá nuestro formulario.

Este tipo de elementos pueden ser activados o desactivados por el usuario al pulsar sobre la caja.

A diferencia con el componente anterior radio, este elemento no es auto excluyente.

type=“submit”

Crea un botón para enviar el formulario.

type=“reset”

Crea un botón para reiniciar/limpiar los valores del formulario.

type=“button”

Crea un botón genérico que puede ser utilizado con JavaScript.