Technologies Internet et Education, © TECFA
  10. HTML Form et HTML Elements

---

form.elements

nodeList = form.elements

• retourne un tableau (array) de toutes les "contrôles" (balises pour formulaire) d’un formulaire

form.length

• indique le nombre des contrôles (utile pour programmer une boucle)
• nodeList = HTMLFormElement.elements

Exemple 10-1: Interroger les valeurs d’un formulaire

• http://tecfa.unige.ch/guides/js/ex/forms/form2.html
• Cette fonction traite le formulaire
• form = document.intoxication // assigne une référence du formulaire à form
• la boucle additionne form.elements[i].value à partir du 2ème élément !

function traiter() {

  var scale=0;

  var form = document.intoxication

    for (var i=1; i < (form.length-1); i++)  {

      if (form.elements[i].checked)  {

	scale = scale + parseInt(form.elements[i].value);

      }

    }

// Ici une series de if’s (c.f. le source)

  if (scale<8) {

    alert("Bonjour, " + form.nomdutoxicomane.value 

	  + ". Avec ton score de " + scale + ", tu es completement sain.")

      }

  else { .... }

<form name="intoxication">

      <h2>Interactive test</h2>

      <P>

	Quel est ton nom ?

	<input type="text" name="nomdutoxicomane">

      <P>

	Vous buvez de l'alcool :

	<input type="radio" name="choice1" value="1" checked>jamais

	<input type="radio" name="choice1" value="2">moins d'un litre par semaine

	<input type="radio" name="choice1" value="3">plus d'un litre par semaine

      <P>

	Quand vous buvez de l'alcool, vous finissez votre verre :

	<input type="radio" name="choice2" value="1" checked>jamais

	<input type="radio" name="choice2" value="2">parfois

	<input type="radio" name="choice2" value="3">toujours

      <P>

    [ ..... ]

	<input type="button" name="process" value="Voir les résultats" onClick="traiter()">

    </form>

Exemple 10-2: Transformer le contenu d’un formulaire

• http://tecfa.unige.ch/guides/js/ex/forms/form1.html

Cette fonction ramasse qqs. informations sur le formulaire et les affiche dans le contenu de la textarea.

function getFormInfo() {

      var f = document.forms["myform"]
;

      var info = "f.elements: " + f.elements + "\n"

      + "f.length: " + f.length + "\n"

      + "f.name: " + f.name + "\n"

      + "f.action: " + f.action + "\n"

      + "f.method: " + f.method + "\n"

      + "f.target: " + f.target;

      document.forms["myform"].elements['tex'].value = info;

      }

Cette fonction modifie le formulaire

function setFormInfo(f) {

      f.method = "GET";

      f.action = "Envoi_vers_python";

      f.name   = "Voici_un_nom_qui_jette";    }

.....

 <form name="myform" id="myform"
 action="Envoi_vers_php" method="POST">

  	<input type="button" value="info"  onclick="getFormInfo();">

	<input type="button" value="set"   onclick="setFormInfo(this.form);">

	<textarea id="tex" style="height:15em; width:40em"></textarea>

 </form>