Création et utilisation d'un formulaire

HTML 4 et JavaScript permettent de réaliser une application Web de base avec les composants de formulaires.

On crée un formulaire avec la balise form

Cela se faire en insérant les balises <form> et </form> dans la section <body> de la page HTML. Mais les éditeurs de pages ont une commande pour insérer un formulaire automatiquement.
On place ensuite les objets de formulaire à l'intérieur de la balise form.

La balise form a des attributs pour l'accès dynamique dans la page par le DOM et pour l'envoi des données.

Les attributs du formulaire
id
L'identifieur unique.
name
Le nom, son rôle est équivalent à celui de l'identifieur sauf pour les fonctions du DOM, car la méthode getElementById se base sur l'id.
action
Le nom d'un script à charger lorsque l'on soumet le formulaire, avec le bouton du type submit. Noter que les noms et valeurs des composants graphiques sont donnés automatiquement en paramètres du script.
onSubmit
Evènement déclenché lorsque le formulaire est soumis et avant l'exécution de l'action. Elle peut permettre de déterminer si l'action doit être exécutée ou non.

On accède aux composants de formulaire par le DOM

Pour accéder aux éléments du formulaire en JavaScript on peut utiliser les méthodes du DOM ou chainer le nom (ou l'identifieur) des éléments et sous-éléments à partir de l'objet racine qui est document.
Par exemple, un formulaire à pour nom monform, il contient le bouton monbouton, et ce bouton à un libellé assigné à l'attribut value, on peut le connaître avec la chaîne:

document.monform.monbouton.value

ou l'assigner dynamiquement selon la même voie:

document.monform.monbouton.value="valeur"

Il est possible comme on le verra dans l'exemple de bouton ci-dessous, si c'est le composant graphique lui-même qui indique au code JavaScript le nom du composant à traiter, d'utiliser le mot-clé this, (en français ceci), donc l'objet dont l'attribut contient la référence à lui-même.

Alternativement si on a donné un identifieur à un élément, on peut y accéder par l'attribut ID:

var val = document.getElementById("xxx").value;

Exemple simple du bouton

Les boutons sont de plusieurs types, lesquels sont spécifiés par l'attribut type:
button, qui correspond au composant graphique,
submit, qui est associé au formulaire et qui déclenche le chargement du fichier assigné à l'attribut action.
image: le bouton est une image chargée dans un fichier.

Les attributs sont donc type, id, name et value pour un texte ou src pour une image.
L'attribut value contient le libellé qui doit être affiché sur le bouton.

Pour associer une action à un bouton simple, de type "button", on utilise l'évènement onClick auquel est assignée une fonction JavaScript.
Exemple, à l'intérieur du formulaire:

<button name="Mon-Bouton" value="Mon Bouton" onClick="click(this);" />

et dans la section HEAD, le code JavaScript:

<script language="JavaScript">
function clic(element)
{
    alert("Cliqué sur " + element.name);
}
</script>

Si l'on attribue un id au bouton, on peut accéder directement au bouton grâce à cet id et à une fonction du DOM:

<button id="monid" name="Mon-bouton" onClick="clic();" />

et dans le code JavaScript:

var id = document.getElementById("monid");
alert("Cliqué sur " + id.value);

Code complet:


<form method="GET" action="">
  <input type="button" name="Mon bouton" value="Cliquez" onClick="clic(this);">
</form>

function clic(element)
{
  alert("Cliqué sur " + element.value);
}

Exemple avec une image

On peut utiliser une image comme bouton. Le code JavaScript est inchangé, seuls changent le type du bouton, et l'attribut value est remplacé par l'attribut src pour désigner le fichier de l'image à utiliser:

<input type="image" nom="Sauvegarde" src="save.gif" onClick="click(this);" />

Code: 


<form method="post" action="">
  <input type="image" name="Sauvegarde"  onClick="clic(this);" src="save.gif"/>
</form>

function clic(element)
{
  alert("cliqué sur " + element.value);
}

Exemple avec OnSubmit

Nous avons parlé de l'attribut onSubmit à propos du formulaire. Nous allons en donner un exemple d'utilisation.
Le code du formulaire:

<form name="Monform" action="hello" onSubmit="return submitcheck(this);" />

Le mot réservé return indique que l'on doit exécuter conditionnellement l'action selon la valeur vrai ou faux qui est retournée par la fonction.
Le code JavaScript simplifié (dans un exemple réel on retournerait une valeur différente selon un traitement quelconque):

function submitcheck(element)
{
   alert("L'action à exécuter est " + element.action);
   return false;
}

Code complet:

<form method="post"  onSubmit="return submitcheck(this);" >
  <input type="submit" name="Mon bouton" value="Cliquez" onClick="clic(this);">
</form>

function clic(element)
{
  alert("Cliqué sur " + element.name);
}

function submitcheck(element)
{
  alert("L'action a exécuter est " + element.action);
  return false;
}

Voir aussi

Forum

Récupérer une valeur

15-01-2007 13:36:44

jamy

C'est la première fois que j'essaie de faire une extension pour Firefox. Je ne suis qu'au début, mais j'ai déja un problème avec les boutons sur la barre d'outil. Comment faire pour récupérer une valeur associée à un bouton, quand le bouton est pressé? Mon code ressemble à cela: <toolbar> <button id="b"> </button> </toolbar>
16-01-2007 11:39:00

webmaster

Quand il faut connaitre un élément sélectionné dans une liste, on utilise un évènement: 
<toolbar>
<button id="b" onselect="alert(event.trigger.value)">
</button>
</toolbar>
Sinon on utiliserait plutôt oncommand qui est plus général ou onclick qui convient mieux aux boutons.
© 2007-2013 Xul.fr