L’élément form : action, method et enctype
Configurez un élément form avec action, method et enctype.
L’élément form : action, method et enctype est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qu’est-ce qu’un formulaire ?
Les formulaires HTML sont le principal moyen pour les utilisateurs d’envoyer des données à un serveur :
- Connexion et inscription
- Requêtes de recherche
- Validation de commande et paiement
- Contact et commentaires
Tout formulaire commence par l’élément <form>.
L’élément form
L’élément <form> contient tous les contrôles du formulaire :
<form action="/submit" method="post">
<!-- form controls go here -->
<button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
to the URL specified in action using the method specified -->L’attribut action
L’attribut action indique où les données du formulaire sont envoyées :
<form action="/api/login">...</form> <!-- relative path -->
<form action="https://api.example.com/form">...</form> <!-- absolute -->
<form action="">...</form> <!-- current URL (empty) -->
<form>...</form> <!-- no action = current URL -->L’attribut method
L’attribut method contrôle la manière dont les données sont envoyées :
<form method="get">...</form>
<!-- GET: appends data to URL as query string
example.com/search?q=html&sort=date
Used for: search forms, filters, bookmarkable results -->
<form method="post">...</form>
<!-- POST: sends data in the request body
Data is not visible in the URL
Used for: login, registration, file uploads, sensitive data -->GET ou POST
GET et POST ont des caractéristiques différentes :
- GET — données dans l’URL (longueur limitée), pouvant être ajoutées aux favoris, mises en cache, idempotentes
- POST — données dans le corps (sans limite), ne pouvant pas être ajoutées aux favoris, non mises en cache, non idempotentes
Règle générale : si l’envoi ne modifie pas l’état du serveur → GET ; s’il le modifie → POST.
L’attribut enctype
L’attribut enctype contrôle la manière dont les données du formulaire sont encodées pour les requêtes POST :
<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">
<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
<input type="file" name="avatar">
</form>
<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">Attribut novalidate
L’attribut novalidate désactive la validation intégrée du navigateur :
<form action="/submit" method="post" novalidate>
<!-- Validation handled by JavaScript instead -->
<input type="email" name="email">
<button type="submit">Submit</button>
</form>Attribut target sur un formulaire
L’attribut target contrôle l’emplacement d’affichage de la réponse :
<form action="/search" target="_blank">
<!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->autocomplete sur un formulaire
L’attribut autocomplete contrôle le remplissage automatique du navigateur :
<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">
<!-- On (default): allow autofill -->
<form autocomplete="on">
<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->Envoyer un formulaire avec JavaScript
Empêchez l’envoi par défaut et gérez-le avec JavaScript :
<form id="contact-form" action="/contact" method="post">
<input type="text" name="name">
<button type="submit">Send</button>
</form>
<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
e.preventDefault(); // stop normal browser submission
const data = new FormData(e.target);
const res = await fetch('/contact', { method: 'POST', body: data });
// handle response...
});
</script>action et method ensemble
Exemple complet de formulaire avec action et method corrects :
<form action="/api/newsletter" method="post">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->Vérification rapide
Quelle méthode de formulaire devez-vous utiliser pour téléverser un fichier ?
Récapitulatif : élément form
Points essentiels de l’élément form :
action— URL qui reçoit les données du formulairemethod="get"— données dans l’URL (recherche, filtres)method="post"— données dans le corps (données sensibles, modifications d’état)enctype="multipart/form-data"— requis pour les téléversements de fichiersnovalidate— désactiver la validation du navigateur
Questions Fréquemment Posées
La leçon « L’élément form : action, method et enctype » est-elle gratuite ?
Oui — le texte complet de « L’élément form : action, method et enctype » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « L’élément form : action, method et enctype » ?
Configurez un élément form avec action, method et enctype. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « L’élément form : action, method et enctype » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- L’élément form : action, method et enctype
- Types d’input : text, password, email, number et tel
- L’élément label et l’accessibilité
- L’élément button : submit, reset et button