form

« Référence du DOM

L'interface de l'élément HTML Form

Les éléments FORM partagent toutes les propriétés et méthodes des autres éléments HTML décrites dans la section element. Ils disposent également de l'interface spécialisée HTMLFormElement.

Cette interface fournit des méthodes pour la création et la modification d'éléments FORM à l'aide du DOM. Les exemples suivants montrent comment créer un nouvel élément de formulaire, modifier ses attributs et l'envoyer.

// Crée un formulaire
var f = document.createElement("form");

// L'ajoute au corps du document
document.body.appendChild(f);

// Ajoute les attributs action et method
f.action = "/cgi-bin/some.cgi";
f.method = "POST"

// Appelle la méthode submit du formulaire
f.submit();

Par ailleurs, le bout de code suivant vous donnera une idée de la façon dont on peut extraire des informations d'un formulaire et modifier certains de ses attributs.

<title>Exemple de formulaire</title>
<script type="text/javascript">
  function getFormInfo() {
    var info;

    // Obtient une référence depuis la collection des formulaires
    var f = document.forms["formA"];
    info = "f.elements: " + f.elements + "\n"
         + "f.length: " + f.length + "\n"
         + "f.name: " + f.elements + "\n"
         + "f.acceptCharset: " + f.acceptCharset + "\n"
         + "f.action: " + f.action + "\n"
         + "f.enctype: " + f.enctype + "\n"
         + "f.encoding: " + f.encoding + "\n"
         + "f.method: " + f.method + "\n"
         + "f.target: " + f.target;
    document.forms["formA"].elements['tex'].value = info;
  }

  // Une référence au formulaire est passée à l'attribut onclick du
  // bouton à l'aide de 'this.form'
  function setFormInfo(f) {
    f.method = "GET";
    f.action = "/cgi-bin/evil_executable.cgi";
    f.name   = "totally_new";
  }
</script>

<h1>Exemple de formulaire</h1>

<form name="formA" id="formA"
 action="/cgi-bin/test" method="POST">
 <p>Cliquez sur « Info » pour voir des informations sur le formulaire.
    Cliquez sur « set » pour modifier les paramètres, puis à nouveau sur info pour
    voir leur effet</p>
 <p>
  <input type="button" value="info"
   onclick="getFormInfo();">
  <input type="button" value="set"
   onclick="setFormInfo(this.form);">
  <input type="reset" value="reset">
  <br>
  <textarea id="tex" style="height:15em; width:20em">
 </p>
</form>

Propriétés

form.elements
elements renvoie un tableau de tous les contrôles de formulaires contenus dans l'élément FORM.
form.length
length renvoie le nombre de contrôles de l'élément FORM.
form.name
name renvoie le nom de l'élément FORM courant sous forme de chaîne.
form.acceptCharset
acceptCharset renvoie une liste des ensembles de caractères supportés pour l'élément FORM courant.
form.action
action récupère/définit l'action de l'élément FORM.
form.enctype
enctype récupère/définit le type de contenu de l'élément FORM.
form.encoding
encoding récupère/définit l'encodage du contenu l'élément FORM.
form.method
method récupère/définit la méthode HTTP utilisée pour soumettre le formulaire.
form.target
target récupère/définit la cible de l'action (c'est-à-dire, le cadre où rendre sa sortie).

Méthodes

form.submit
submit() soumet le formulaire.
form.reset
reset() réinitialise le formulaire à ses valeurs initiales.

Interwiki Languages Links

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : BenoitL, Fredchat, Mgjbot
Dernière mise à jour par : Mgjbot,