Learn HTML & CSSFormularios y campos de entrada
Casi todo sitio web que hace algo por ti, un buscador, un inicio de sesión, un checkout, un campo de comentarios, está construido sobre un formulario. Un formulario es lo que permite que una página deje de solo hablarle al visitante y empiece a escucharlo: recolecta lo que alguien escribe, marca o selecciona, y entrega esos datos para que se actúe sobre ellos. Este capítulo trata sobre el HTML que hace esto posible.
El elemento form
Un formulario es un contenedor que agrupa las cosas que un visitante llena. Envuelves tus campos de entrada y un botón dentro de un elemento <form>, y el trabajo del formulario es juntar todo y enviarlo cuando el visitante termina.
<form>
<label>Tu nombre</label>
<input>
<button>Enviar</button>
</form>Piénsalo como un formulario de papel que llenas en el consultorio de un médico. La hoja contiene todas las casillas, tú escribes en cada una, y al final entregas toda la hoja de una vez. El elemento <form> es esa hoja.
<form> es el contenedor que guarda tus campos de entrada y un botón, y envía todo junto cuando alguien lo manda. Imagina el formulario de papel en un escritorio: una sola hoja, muchas casillas, entregada toda de una vez. Envuelve tus campos en un formulario y obtienes ese comportamiento de juntar-y-enviar sin hacer nada complicado. Campos de entrada y etiquetas
Un <input> es la caja en la que un visitante escribe. Por sí solo, sin embargo, un input es una caja vacía sin ninguna pista de para qué sirve. Ahí es donde entra una etiqueta: es el texto que le dice al visitante qué poner en la caja.
<label for="city">Ciudad</label>
<input id="city">Todo input necesita una etiqueta. Conectas los dos dándole un id al input y apuntando la etiqueta hacia él con for, usando la misma palabra en ambos. Una vez conectados, hacer clic en la etiqueta pone el cursor en la caja, lo cual es un pequeño detalle que hace el formulario más fácil de usar para todos.
<input> es la caja donde la gente escribe, y el <label> es el texto que les dice qué va ahí. Enlázalos con un for y un id que coincidan, y al hacer clic en la etiqueta saltas directo a la caja. Dale una etiqueta a cada input; una caja solitaria sin palabras al lado solo confunde a la gente. Otros controles
No todo es una simple caja de texto. Algunas preguntas se responden mejor marcando, eligiendo, o seleccionando de una lista. Una casilla de marcar (un checkbox) es un interruptor de encendido o apagado, y un menú desplegable deja que alguien elija una opción entre varias.
<label>
<input type="checkbox"> Enviarme el boletín
</label>
<label for="size">Talla</label>
<select id="size">
<option>Pequeña</option>
<option>Mediana</option>
<option>Grande</option>
</select>No tienes que memorizar esto. Lo importante por ahora es que un formulario puede hacer sus preguntas de la manera que mejor le convenga: escribiéndola, marcándola, o eligiéndola de una lista.
<input type="checkbox">, y un menú desplegable es un <select> con opciones <option> dentro. No hace falta memorizarlos; el formulario tiene más que simples cajas cuando una pregunta lo necesita. Cómo se nombran y envían los datos de un formulario
Cuando se envía un formulario, cada respuesta necesita una etiqueta para que quien la reciba sepa de qué caja vino. Esa etiqueta es el name del input. Lo pones una vez, y viaja junto con el valor.
<label for="city">Ciudad</label>
<input id="city" name="city">Si el visitante escribe "Lima" en esa caja, el formulario envía el par "city es Lima". El name es cómo el lado que recibe distingue una respuesta de otra. Un input sin name queda completamente fuera del envío, así que este pequeño atributo es el que realmente hace que los datos aparezcan.
name de cada input es la etiqueta de su respuesta, así que quien recibe los datos sabe si un valor vino de la caja de ciudad y no de la de correo. Pon el name, y el valor de la caja se envía como un par etiquetado. Olvídalo, y ese campo queda fuera del envío en silencio, lo cual confunde a mucha gente la primera vez que un formulario no devuelve nada.