form

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