Formularios y entradas
25 pasos en 6 series de HTML.
Los formularios son la parte más capaz y más desaprovechada de HTML. Construir uno, etiquetar los campos para que de verdad funcionen, las opciones, y luego las entradas especializadas para números, fechas y archivos.
La validación y el envío lo cierran. Veinticinco pasos, y el argumento de fondo es que el navegador hará más de esto por ti de lo que crees, y de forma accesible, si lo dejas.
Un formulario
- Un formulario y su cableadoEl formulario útil más pequeño: adónde envía, y un campo con nombre que enviar.
- Adónde envía sus datos un formularioDos métodos, y la diferencia se nota en la barra de direcciones.
- Controles que viven fuera del formularioUn botón no tiene que estar dentro del formulario que envía.
Campos y etiquetas
- Campos de textoCampos de texto de una línea y los atributos que los hacen agradables.
- Campos con tipoEl tipo del input decide el teclado, el selector y la validación.
- Ayudar al navegador a llenarloLos tokens de autocomplete son un vocabulario fijo; el correcto le ahorra tecleo al usuario.
- Agrupar con fieldsetUn fieldset agrupa controles relacionados y su legend nombra al grupo.
- Deshabilitar una sección enteraUn atributo en el fieldset saca del formulario todos los controles que contiene.
Opciones
- Casillas de verificaciónOpciones independientes de sí o no, cada una con su nombre propio o uno compartido.
- Botones de radioUna opción entre varias: el nombre compartido es lo que las vuelve un grupo.
- Menús selectUn menú desplegable, con grupos de opciones y una variante de selección múltiple.
- Selects agrupados y múltiplesUna lista larga de opciones pide títulos, y a veces más de una respuesta.
- Sugerencias con datalistUn campo de texto libre con sugerencias, a diferencia de la lista cerrada del select.
- TextareaTexto multilínea, dimensionado en filas y columnas, con el valor como contenido.
Números, fechas y archivos
- Números y deslizadoresEl mismo valor, dos controles: uno donde escribes y otro que arrastras.
- Fechas y horasCinco tipos de input para los que el navegador ya sabe mostrar un selector.
- Subida de archivosUn input de archivo, el filtro accept y la codificación que el formulario necesita.
- Mostrar un valor de vueltaTres elementos para números que el usuario lee en vez de escribir.
Validación y envío
- Validación integradaRestricciones que el navegador revisa antes de que corra tu JavaScript.
- Patrones y mensajes propiosUna expresión regular sobre el campo, revisada antes de enviar nada.
- Decirle a alguien qué salió malUn mensaje de error sin conexión con su campo es un mensaje que nadie escucha.
- BotonesTres tipos de botón, y por qué el tipo importa dentro de un formulario.
- Campos ocultos y de solo lecturaValores que envías sin editar, y campos visibles pero bloqueados.
Bis
- signup_form.htmlUna página de registro completa: campos con label, opciones agrupadas, validación real.
- checkout_form.htmlUn checkout: campos agrupados, los tokens de autocomplete correctos y errores unidos a sus inputs.