Chargement...

Attributs de formulaire HTML

Les formulaires ont donné le squelette. Les attributs de formulaire affinent le comportement — action vide, get vs post, autofill, contrôles, nommer le form. Types d’input et form= plus tard.

Pourquoi les attributs comptent

Réponse directe

1) action + method. 2) action vide → page actuelle. 3) autocomplete. 4) novalidate seulement à dessein. 5) id/name du form pour les scripts.

📊 Form attributes at a glance

Attribute Role Beginner tip
action Where the browser sends the data Empty often means “this page”
method get (query string) or post (request body) Prefer post for private or large data
autocomplete Autofill hint for the form off for sensitive practice forms
novalidate Skip built-in HTML checks on submit Demo tool — not a production default
name / id Identify the form element itself Useful when scripts or CSS target the form

Formulaire de contact avec attributs

Élargissez le squelette : gardez les champs étiquetés et décorez la balise form ouvrante.

Contact form with attributes

html
HTML Code 
<form
id="contact"
name="contact"
action="/contact"
method="post"
autocomplete="on">
<label for="full-name">Name</label>
<input id="full-name" name="full_name" type="text" required>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="3" required></textarea>
<button type="submit">Send</button>
</form>

Lire la démo contact

  • id/name identifient le formulaire
  • action = chemin explicite
  • post garde le message hors barre d’adresse
  • autocomplete=on autorise l’autofill
  • name des champs cléent le payload
  • required est au niveau champ

Recherche GET et novalidate optionnel

La recherche utilise souvent get pour la query dans l’URL. Pas de données sensibles. autocomplete=off pour s’entraîner. novalidate pour démos spéciales.

GET search with autocomplete off

html
HTML Code 
<form action="/search" method="get" autocomplete="off">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Go</button>
</form>

<!-- Demo-only: skip built-in checks
<form action="/demo" method="post" novalidate>
...
</form>
-->

Lire la démo recherche

  • get ajoute ?q=
  • autocomplete=off réduit l’autofill
  • sans required les vides partent
  • novalidate n’est qu’un rappel
  • jamais get pour les mots de passe

action vide et GET vs POST

  • vide/omis → URL actuelle
  • get pour filtres et recherche
  • post pour inscription et messages
  • method seul n’est pas la sécurité

Pratique — régler les attributs

  1. Vider action
  2. Alterner method de la recherche
  3. autocomplete=off sur le contact
  4. novalidate temporaire avec required
  5. Retirer novalidate
  6. Vérifier id du form et name des champs
  7. Phrase : les attributs règlent cible, style, autofill, contrôles

Erreurs fréquentes

  • Surprise de l’action vide
  • Mots de passe en get
  • novalidate permanent en prod
  • Confondre name du form et du champ
  • Croire que off est une garantie de sécurité
  • Inverser action et method

Résumé

  • Les attributs affinent l’envoi
  • action + method noyau ; vide → URL actuelle
  • autocomplete et novalidate optionnels
  • name/id du form vs name de champ
  • post pour le privé
  • ensuite : éléments de formulaire

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
5
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 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
Sujet 1 de 1
Html Tutoriel