Baseline Widely available *
L'élément HTML <form>
représente un formulaire, c'est-à -dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.
<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</form>
form.form-example {
display: table;
}
div.form-example {
display: table-row;
}
label,
input {
display: table-cell;
margin-bottom: 10px;
}
label {
padding-right: 10px;
}
Il est possible d'utiliser les pseudo-classes CSS :valid
et :invalid
pour mettre en forme un élément <form>
selon que le contenu des éléments du formulaire est valide ou non.
Cet élément prend en charge les attributs universels.
accept
Obsolète
Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules.
Note : Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. à la place, il faut utiliser l'attribut accept
de l'élément <input type=file>
.
accept-charset
Encodages de caractères séparés par des espaces que le serveur accepte. Le navigateur les utilise dans l'ordre dans lequel ils sont listés. La valeur par défaut signifie le même encodage que celui de la page. (Dans les versions précédentes de HTML, les codages de caractères pouvaient également être délimités par des virgules).
autocapitalize
Non standard
Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut autocapitalize
est défini sur un des descendants du formulaire, il surchargera la valeur de autocapitalize
utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est sentences
. Les valeurs possibles sont:
none
: La mise en majuscules est totalement désactivéesentences
: Les premières lettres des phrases sont automatiquement passées en majuscules.words
: La première lettre de chaque mot est automatiquement passée en majuscule.characters
: Tous les caractères sont automatiquement passés en majuscules.autocomplete
Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs :
off
: Le navigateur ne peut pas compléter automatiquement les entrées. (Les navigateurs ont tendance à ignorer ce point pour les formulaires de connexion suspects ; voir L'attribut autocomplete et les champs de connexion.)on
: Le navigateur peut compléter automatiquement les entrées.name
Le nom du formulaire. Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide.
rel
Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut rel
pour plus de détails.
Les attributs suivants contrôlent le comportement pendant l'envoi du formulaire.
action
L'URL qui traite l'envoi du formulaire. Cette valeur peut être remplacée par un attribut formaction
sur un <button>
, <input type="submit">
, ou <input type="image">
.
enctype
Lorsque la valeur de l'attribut method
est post
, cet attribut définit le type MIME qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
application/x-www-form-urlencoded
: la valeur par défaut si l'attribut n'est pas définimultipart/form-data
: la valeur utilisée par un élément <input>
avec l'attribut type="file"
.text/plain
, correspondant au type MIME éponyme et utilisé à des fins de débogage.Cette valeur peut être remplacée par un attribut formenctype
sur un <button>
, <input type="submit">
, ou <input type="image">
.
method
Cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
post
: La méthode POST ; données du formulaire envoyées comme corps de la requête.get
: La méthode GET ; données du formulaire annexées à l'URL action
avec un séparateur ?
. Utilisez cette méthode lorsque le formulaire n'a pas d'effets secondaires.dialog
: Lorsque le formulaire se trouve à l'intérieur d'un <dialog>
, ferme la boîte de dialogue à la soumission.Si cet attribut n'est pas défini, la valeur par défaut utilisée est get
. Cette valeur peut-être remplacée par un attribut formmethod
sur un <button>
, <input type="submit">
, ou <input type="image">
.
novalidate
Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut formnovalidate
des éléments <button>
ou <input>
appartenant au formulaire.
target
Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un contexte de navigation (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier :
_self
(par défaut) : Charger dans le même contexte de navigation que le contexte actuel._blank
: Chargement dans un nouveau contexte de navigation sans nom._parent
: Charge dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, se comporte de la même manière que _self
._top
: Charger dans le contexte de navigation de niveau supérieur (c'est-à -dire le contexte de navigation qui est un ancêtre du contexte actuel et qui n'a pas de parent). S'il n'y a pas de parent, se comporte de la même manière que _self
.Cette valeur peut être remplacée par un attribut formtarget
sur un <button>
, <input type="submit">
, ou <input type="image">
.
Note : La définition de target="_blank"
sur les éléments <form>
fournit implicitement le même comportement rel
que la définition de rel="noopener"
qui ne définit pas window.opener
.
<!-- Formulaire simple qui enverra une requête GET -->
<form>
<label
>Nom :
<input name="submitted-name" autocomplete="name" />
</label>
<button>Sauvegarder</button>
</form>
<!-- Formulaire qui enverra une requête POST à l'URL actuelle -->
<form method="post">
<label
>Nom :
<input name="submitted-name" autocomplete="name" />
</label>
<button>Sauvegarder</button>
</form>
<!-- Formulaire avec un ensemble de champs, une légende et une étiquette -->
<form method="post">
<fieldset>
<legend>Titre</legend>
<label><input type="radio" name="radio" />Sélectionnez-moi</label>
</fieldset>
</form>
Résultat Spécifications Compatibilité des navigateurs Voir aussi
<button>
, <datalist>
, <fieldset>
, <input>
, <label>
, <legend>
, <meter>
, <optgroup>
, <option>
, <output>
, <progress>
, <select>
, <textarea>
.HTMLFormElement.elements
form
search
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4