Saltar a contenido

1.5 Formularios

Un formulario recoge datos del usuario. Se compone de un <form> con controles (<input>, <select>, <textarea>…), cada uno con su <label>.

Los tipos de <input> más usados

type Qué recoge
text Texto corto
email, url, tel Correo, dirección web, teléfono (el móvil muestra el teclado adecuado)
password Texto oculto
number Número (admite min, max, step)
date, time Fecha, hora
radio Una opción entre varias (mismo name)
checkbox Casilla marcable
range, color Deslizador, selector de color
file Subir un archivo
submit Botón de envío

Validación incorporada

Sin JavaScript, el navegador ya valida con atributos:

Atributo Efecto
required Obligatorio
minlength / maxlength Longitud mínima / máxima
min / max Rango de un número o fecha
pattern="..." Expresión regular que debe cumplir
<input type="text" name="dni" pattern="[0-9]{8}[A-Za-z]" title="8 números y una letra" required>

Siempre label

Cada control debe tener su <label for="id">: mejora la accesibilidad y permite hacer clic en el texto. El valor de for es el id del control. El name es el nombre con el que viajará el dato al enviarlo.