Attribut form HTML


Définition et utilisation

L'attribut form spécifie le formulaire auquel appartient l'élément.

La valeur de cet attribut doit correspondre à l'attribut id d'un élément <form> dans le même document.


S'applique à

L'attribut form peut être utilisé sur les éléments suivants :

Éléments Attribut
<button> form
<fieldset> form
<input> form
<label> form
<meter> form
<object> form
<output> form
<select> form
<textarea> form

Exemples

Exemple de bouton

Un bouton situé en dehors d'un formulaire (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" method="get" id="form1">
Prénom : <input type="text" name="fname"><br>
Nom : <input type="text" name="lname"><br>
</form>

<button type="submit" form="form1" value="Submit">Soumettre</button>
Essayez-le vous-même »

Exemple de fieldset

Un élément <fieldset> situé en dehors d'un formulaire (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" method="get" id="form1">
Quelle est votre couleur préférée ? <input type="text" name="fav_color"><br>
<input type="submit">
</form>

<fieldset form="form1">
Nom : <input type="text" name="username"><br>
Email : <input type="text" name="usermail"><br>
</fieldset>
Essayez-le vous-même »

Exemple d'input

Un champ de saisie situé en dehors du formulaire HTML (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" id="form1">
Prénom : <input type="text" name="fname"><br>
<input type="submit" value="Soumettre">
</form>

Nom : <input type="text" name="lname" form="form1">
Essayez-le vous-même »

Exemple de label

Un élément <label> situé en dehors d'un formulaire (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" id="form1">
<input type="radio" id="html" name="fav_language" value="HTML"><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Soumettre">
</form>

<label for="html">HTML</label>
Essayez-le vous-même »

Exemple de meter

Un élément <meter> situé en dehors d'un formulaire (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" method="get" id="form1">
Prénom : <input type="text" name="fname"><br>
<input type="submit" value="Soumettre">
</form>

<meter form="form1" name="x1" min="0" low="40" high="90" max="100" value="95"></meter>
Essayez-le vous-même »

Exemple d'object

Un élément <object> situé en dehors d'un formulaire (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" id="form1">
Prénom : <input type="text" name="fname"><br>
<input type="submit" value="Soumettre">
</form>

<object data="helloworld.swf" height="400" width="400" form="form1" name="obj1"></object>
Essayez-le vous-même »

Exemple d'output

Un élément <output> situé en dehors d'un formulaire (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" id="numform"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" name="a" value="50">100
+<input type="number" id="b" name="b" value="50">
<br><br>
<input type="submit">
</form>

<output form="numform" name="x" for="a b"></output>
Essayez-le vous-même »

Exemple de select

Une liste déroulante située en dehors d'un formulaire (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" id="carform">
Prénom :<input type="text" name="fname">
<input type="submit">
</form>

<select name="carlist" form="carform">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Essayez-le vous-même »

Exemple de textarea

Une zone de texte située en dehors d'un formulaire (mais faisant toujours partie du formulaire) :

<form action="/action_page.php" id="usrform">
Nom : <input type="text" name="usrname">
<input type="submit">
</form>

<textarea name="comment" form="usrform">Entrez le texte ici...</textarea>
Essayez-le vous-même »

Support des navigateurs

L'attribut form est pris en charge par les navigateurs suivants pour chaque élément :

Élément
bouton 10.0 16.0 4.0 5.1 9.5
fieldset Oui Oui Oui Oui Oui
input Oui Oui Oui 5.1 10.6
label Oui Oui Oui Oui Oui
meter Non supporté Non supporté Non supporté Non supporté Non supporté
object Non supporté Non supporté Non supporté Non supporté Non supporté
output Non supporté Non supporté Non supporté Non supporté Non supporté
select Oui Oui Oui Oui Oui
textarea Oui 11.0 Oui Oui Oui