Cargando...
Formularios HTML
Responsive adaptó anchos. Los formularios abren un capítulo nuevo: el visitante escribe y envía. El contenedor es form.
Por qué importan los formularios
Las páginas estáticas muestran; los formularios recogen. Sin form el navegador no sabe qué controles van en un envío.
Respuesta directa
1) form con action y method. 2) controles con name. 3) label for = id. 4) botón submit. Primero el marcado.
📊 Form parts at a glance
| Part | Job | Beginner tip |
|---|---|---|
| form | Groups controls for one submission | Keep related fields inside one form |
| action | URL or path that receives the data | Practice paths are fine while learning |
| method | How the browser sends the payload | get puts data in the URL; post uses the request body |
| input (+ others) | Collects a value from the user | Always set name for submitted keys |
| label | Names the field for people and assistive tech | for must match the control id |
| submit | Triggers sending the form | Prefer type="submit" on buttons |
Esqueleto mínimo de formulario
Empieza por el contenedor y dos atributos. Una ruta de práctica vale para aprender.
<form action="/subscribe" method="post">
<!-- fields go here -->
</form>
Leer el esqueleto
- form es el límite de envío
- action = ruta de destino
- post = cuerpo
- get = URL
- 404 sin servidor real está bien al aprender
Campo etiquetado más envío
Al menos un campo y forma de enviar. for debe coincidir con id; pon name.
<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>
Leer el demo de suscripción
- for e id conectan
- name clave del payload
- type=email pista del navegador
- button type=submit envía
GET frente a POST
get para búsquedas marcables; post cuando los datos no deben quedar en la barra de dirección.
Práctica — formulario pequeño de suscripción
- form con post y action de práctica
- input email etiquetado con name
- button type=submit
- comprueba el render
- mueve el input fuera un momento
Errores fáciles
- inputs fuera de form
- sin name
- botón sin type=submit
- label/for desparejados
- confundir action y method
Resumen
- form agrupa controles para un envío
- action + method describen destino y estilo
- label y name hacen el campo enviable
- siguiente: atributos de formulario
🧠 Pon a Prueba tu Conocimiento
Listo para Empezar
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
5
Preguntas
70%
Para Aprobar
∞
Tiempo
∞
Intentos
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior