Las páginas también preguntan
Cuando te registras en una web, rellenas casillas. Escribes tu nombre, eliges una opción y pulsas un botón.
Eso es un formulario. Sirve para que la persona que visita la página envíe datos.
Hoy haces el pedido del recreo de un bar del instituto.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Formulario | Un grupo de casillas y un botón para enviar datos. Se escribe con form. | <form> |
| Campo | Una casilla donde la persona escribe o elige. Se escribe con input. | <input type="text"> |
| Etiqueta de campo | El texto que dice qué hay que poner en un campo. Se escribe con label. | <label>Nombre</label> |
| Menú desplegable | Una lista para elegir una opción. Se escribe con select. | <select> |
| Botón | Lo que se pulsa para enviar el formulario. | <button>Enviar</button> |
| name | Atributo que da nombre al dato que se envía. | name="email" |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un campo de texto
Todo formulario va dentro de la etiqueta form.
Un campo se escribe con input. El atributo type dice qué clase de campo es. Con type="text" la persona escribe una frase corta.
Al lado va una etiqueta de campo, label, que dice qué se pide.
Pruébalo: pide un nombre
<form>
<label for="name">Tu nombre</label>
<input id="name" name="name" type="text">
<button type="submit">Pedir</button>
</form>
<p id="answer"></p>
La etiqueta y el campo van unidos
Consejo
El atributo for de la etiqueta y el atributo id del campo llevan el mismo nombre. Así, al pulsar el texto "Tu nombre", el cursor salta al campo. Y un lector de pantalla sabe qué casilla es.
Ejemplo resuelto: tipos de campo
| type | Qué se ve | Cuándo lo usas |
|---|---|---|
| text | Una casilla para escribir | Un nombre |
| number | Una casilla solo para números | La edad o la cantidad |
| Una casilla para un correo | Una dirección de correo | |
| checkbox | Un cuadrito que se marca | Aceptar las normas |
| radio | Un círculo, solo se elige uno | Elegir entre dos o tres opciones |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: campos
Inténtalo
Repaso rápido: campos
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Elegir una opción: select
Un menú desplegable se escribe con select. Cada opción va dentro de option.
La persona pulsa el menú y elige una. Es útil cuando hay pocas opciones y no quieres que se equivoquen al escribir.
Pruébalo: el pedido del recreo
<form>
<label for="name">Tu nombre</label>
<input id="name" name="name" type="text">
<label for="item">Qué quieres</label>
<select id="item" name="item">
<option>Bocadillo de tortilla</option>
<option>Bocadillo de jamón</option>
<option>Zumo de naranja</option>
</select>
<button type="submit">Pedir</button>
</form>
<p id="answer"></p>