Attributs form de l'input en HTML
Avant, required, placeholder et plages affinaient le champ. Les attributs form de l'input posent autre chose : quel formulaire possède le contrôle, et un bouton peut-il remplacer action ? L'étoile est form="id" hors de form. form* sur submit change la destination pour ce clic seulement.
Pourquoi l'association compte
La plupart des champs sont dans le form. Parfois la mise en page place un contrôle ailleurs. Sans association, il manque au payload. form le relie via l'id. L'imbrication reste plus claire ; l'association est l'échappatoire des layouts difficiles.
Réponse directe
1) id sur le form. 2) Dehors, form="même-id". 3) name et label restent nécessaires. 4) Sur le bouton submit, formaction, formmethod, formenctype, formnovalidate, formtarget optionnels pour ce clic. 5) Propriété et routage — pas les règles de valeur précédentes.
📊 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.) |
Paiement : champ hors du form
Un court checkout garde e-mail et quantité dedans. Le promo arrive plus loin — avec label et name — et rejoint via 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">
Lire la démo checkout
- id=checkout est le crochet
- form=checkout rattache promo à l'envoi
- name=promo reste la clé du payload
- e-mail et qty internes sans form=
- Labels pour tout contrôle visible
- required/min possibles ; le focus est l'association
Deux boutons : remplacer action
Parfois un formulaire, deux destinations — brouillon et publier. Un form ; formaction différent par bouton. Remplacement pour ce clic seulement.
<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>
Lire la démo deux boutons
- Chemin par défaut = action du form
- Brouillon envoie via formaction ailleurs
- formmethod=post garde l'intention
- Les deux envoient les mêmes champs nommés
- form= propriété ; formaction routage bouton
- Suite : textarea multiligne
Choisir association ou override
- Champ hors de l'arbre : form="form-id"
- Mêmes champs, autre URL : formaction
- Autre method pour un clic : formmethod
- Enctype d'upload pour un clic : formenctype
- Ouvrir la réponse ailleurs : formtarget
- Préférez imbriquer si le layout le permet
- Ne pas confondre avec required/placeholder
Pratique — propriété et overrides
- Checkout ; retirez form= du promo puis remettez
- Faute dans l'id — l'association casse
- Second champ hors notes avec form=checkout
- Échangez formaction brouillon
- Essayez formmethod=get un instant
- Phrase : form= choisit le propriétaire ; formaction seulement ce bouton
- Imbriquez promo et retirez form=
Erreurs faciles
- Typo entre id et form=
- form= sans name
- Trop de champs détachés
- Confusion avec les aides précédentes
- Mélanger form= et formaction
- Croire que tout contrôle veut form=
- formnovalidate au lieu de corriger
Résumé
- form="id" associe un contrôle externe
- id correspondant ; name et label comptent
- Boutons remplacent avec formaction/formmethod/form*
- Imbriquer si possible ; associer si le layout force
- Propriété/route ≠ règles de champ précédentes
- Suite : textarea
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut