Atributos form del input en HTML
Antes, required, placeholder y rangos afinaban el campo. Los atributos form del input preguntan otra cosa: qué formulario posee el control y si un botón puede anular action. La estrella es form="id" fuera de form. form* en submit cambia el destino solo en ese clic.
Por qué importa la asociación
La mayoría anida dentro del form. A veces el diseño pone un control fuera. Sin asociación no entra en el payload. form lo une por id. Anidar sigue siendo más claro; asociar es el escape para layouts difíciles.
Respuesta directa
1) id en el form. 2) Fuera, form="mismo-id". 3) Siguen haciendo falta name y label. 4) En el botón submit, opcionales formaction, formmethod, formenctype, formnovalidate, formtarget solo ese clic. 5) Propiedad y enrutado — no reglas de valor previas.
📊 Form association and submit overrides
| Attribute | Where | Beginner tip |
|---|---|---|
| form | input (or other control) | Value must match the form’s id exactly |
| formaction | submit button | Overrides form action for that click only |
| formmethod | submit button | Overrides method (get/post) for that click |
| formenctype | submit button | Overrides enctype when uploading via that button |
| formtarget | submit button | Overrides where the response opens (_blank, etc.) |
Checkout: campo fuera del form
Checkout corto deja email y cantidad dentro. El promo llega después en el markup — con label y name — y se une con form="checkout".
<form id="checkout" action="/checkout" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="qty">Qty</label>
<input id="qty" name="qty" type="number" min="1" value="1">
<button type="submit">Pay</button>
</form>
<p>Promo field rendered later in the layout:</p>
<label for="promo">Promo code</label>
<input id="promo" name="promo" type="text" form="checkout"
placeholder="SAVE10">
Leer el demo de checkout
- id=checkout es el gancho
- form=checkout une promo al enviar
- name=promo sigue siendo la clave
- email y qty internos no necesitan form=
- Labels en todo control visible
- required/min pueden estar; el foco es asociación
Dos botones: anular action
A veces un formulario y dos destinos — borrador y publicar. Un form; formaction distinto por botón. Solo ese clic.
<form id="article" action="/articles/publish" method="post">
<label for="title">Title</label>
<input id="title" name="title" type="text" required>
<label for="body">Body</label>
<input id="body" name="body" type="text">
<button type="submit">Publish</button>
<button type="submit" formaction="/articles/draft"
formmethod="post">Save draft</button>
</form>
Leer el demo de dos botones
- Ruta por defecto = action del form
- Borrador usa formaction hacia otra URL
- formmethod=post mantiene la intención
- Ambos envían los mismos campos con name
- form= es propiedad; formaction es ruta del botón
- Siguiente: textarea multilínea
Elegir asociación u override
- Campo fuera del árbol: form="form-id"
- Mismos campos, otra URL: formaction
- Otro method en un clic: formmethod
- Enctype de subida en un clic: formenctype
- Saltar validación (raro): formnovalidate
- Abrir respuesta en otro sitio: formtarget
- Prefiere anidar si el layout lo permite
- No confundir con required/placeholder
Práctica — propiedad y overrides
- Checkout; quita form= del promo y restáuralo
- Typo en el id — se rompe la asociación
- Segundo campo fuera notes con form=checkout
- Intercambia formaction de borrador
- Prueba formmethod=get un momento
- Frase: form= elige dueño; formaction solo ese botón
- Anida promo dentro y quita form=
Errores fáciles
- Typo entre id y form=
- form= sin name
- Abusar de campos sueltos
- Confundir con ayudantes previos
- Mezclar form= y formaction
- Creer que todo control necesita form=
- formnovalidate en vez de arreglar campos
Resumen
- form="id" asocia un control externo
- id coincidente; name y label importan
- Botones anulan con formaction/formmethod/form*
- Anida cuando puedas; asocia si el layout obliga
- Propiedad/ruta ≠ reglas de campo previas
- Siguiente: textarea
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 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