Avant d'étudier un peu de JavaScript, il nous faut revenir au HTML, car des balises sont dédiées à l'interaction avec l'utilisateur, notamment : <form>, <input>, <label>, <fieldset> et <legend>.

On parle d'interaction avec l'utilisateur lorsqu'il peut donner des ... données ( ! ) ( son nom, un nombre, son avis,  ... ), choisir dans une liste, cocher des options, valider, ...

Le formulaire

<form>

La balise form crée une zone qui permet de créer un formulaire, c-à-d un ensemble de champs où l'utilisateur peut fournir des données et les envoyer à un serveur qui les traitera.

Un script est un bout de code, un tout petit programme. Le JavaScript est le langage le plus courant pour écrire des scripts en relation avec une page web.

Les formulaires sont très utiles. On retrouve les formulaires sur les pages d'accueil des moteurs de recherche, sur celles permettant de s'identifier sur un site, sur celles qui permettent d'envoyer une commande, ...

La balise form contient des zones dédiées au formulaire telles que des champs à remplir, des boutons ... mais aussi des balises classiques (paragraphes, des liens, ...)

Une page web peut contenir plusieurs formulaires.

<input /> et <label>

La balise input représente généralement un champ à remplir et parfois un bouton. Cette balise n'a pas de contenu ( pas de balise fermante ), mais de nombreux attributs. Les 8 attributs les plus importants ( parmi les 30 ! ) sont : type, placeholder, maxlength, size, required, readonly, value, pattern, ...

Plus d'info sur : http://www.w3schools.com/tags/tag_input.asp

attribut : type

L'attribut type permet de définir le type de champ, le type de données qu'il contiendra. Les 8 valeurs autorisées les plus importantes ( parmi les 23 valeurs de l'attribut type ) sont : text, number, email, url, password, submit, reset, ...

D'autres valeurs autorisées seront abordées prochainement : checkbox, radio, hidden, ...
Ainsi, que d'autres balises : select, options et textarea

type="text"

"text" est la valeur la plus courante pour l'attribut type. La balise input représente alors un champ classique où l'utilisateur peut y taper n'importe quoi. Si l'attribut type n'est pas indiqué, le navigateur considérera que l'input est de type "text". Ce sont donc l'attribut et la valeur par défaut de la balise <input />.

Pour afficher le champ ci-dessus, il suffit de taper le code HTML suivant :

  <form>
    <p>
      <input type="text" />
    </p>
  </form>

type="number", type="email", type="url"

Le type="text" permet de taper n'importe quels caractères. Pour forcer l'utilisateur à introduire de bonnes données, on peut préciser le type de données attendu.

type="number", type="email", type="url" force le navigateur à faire une vérification avant l'envoi des données au serveur. Il affichera en rouge le champ indiquant qu'il ne contient pas respectivement un nombre, une adresse e-mail ou une adresse internet valide.

Combiné avec du code CSS, par exemple :
input:invalid{background-color: #FF8A8A}
input:valid{background-color: #99FFBB}
l'utilisateur peut alors voir - lors de la frappe - si sa donnée réussit le pré-test (effectué par le navigateur).

    <p>
      <label>Nombre 1 :
        <input type="number" required="required" />
      </label>
        ...
    </p>

    <p>
      <label>Nombre 1 :
        <input type="number" step="0.01" required="required" />
      </label>
        ...
    </p>

    <p>
      <label>Adresse e-mail :
        <input type="email" required="required" />
      </label>
        ...
    </p>

    <p>
      <label>URL :
        <input type="url" required="required" />
      </label>
        ...
    </p>

type="password"

Ce type permet de remplacer chaque caractère par un caractère spécial pour empêcher ceux qui regardent au-dessus de votre épaule de lire, par exemple, le mot de passe.
Selon le navigateur, ce caractère spécial peut être une étoile, un rond, ...

Mot de passe :

        ...
      <label>Mot de passe :
        <input type="password" value="0123" />
      </label>
        ...

Attention. Le mot de passe sera envoyé en clair sur le réseau si le protocole utilisé n'est pas https ( avec "s" pour sécurité ).

type="range"

Ce type permet de sélectionner un nombre via un curseur.

Degré :

        ...
      <label>Degré :
        <input type="range" min="0" max="360" value="180"
        onchange="document.getElementById('rangeValue').innerHTML=this.value;" />
      </label>
      <output id="rangeValue"></output>
        ...

this représente l'élément lui-même. Cela évite d'ajouter l'attribut id="range1" à la balise input, puis écrire :
document.getElementById('rangeValue').innerHTML=document.getElementById('range1').value;

type="submit", type="reset"

Ces deux types de champ sont des boutons !
Ce qui est affiché sur le bouton est la valeur de l'attribut value.

Les boutons ci-dessous ne feront rien. Il s'agit juste de les présenter ( et non de les utiliser )

  <p>
    <input type="submit" value="Envoyer les données" /><br />
    <input type="reset" value="Effacer les champs" />
  </p>

Un clic sur le bouton "Envoyer les données" ( type="submit" ) enverra les données ( à l'adresse indiquée dans la balise form )

Un clic sur le bouton "Effacer les champs" ( type="reset" ) effacera les données ( des champs contenus dans la balise form et ré-affichera la valeur de l'attribut placeholder, si cet attribut existe )

Ce qui est affiché sur un bouton ( type="submit"  ou de  type="reset" ) est la valeur de l'attribut value.

Le bouton ci-dessous ne fera rien. Il s'agit juste de le présenter ( et non de l'utiliser )

  <p>
    <input type="submit" value="Cliquez ici pour envoyer vos données" />
  </p>

attribut : placeholder

La valeur de l'attribut placeholder affiche, en filigrane, le genre d'information qu'on souhaite dans le champ.

NOM :

    <p>
      <label for="nom1">NOM :
        <input type="text" placeholder="Votre NOM en majuscule" id="nom1" />
      </label>
    </p>

Ce texte en filigrane ne sera pas envoyé et disparaîtra dès la première frappe d'un caractère. Cela permet de se passer de la balise label. Cet attribut est particulièrement utile lorsque le formulaire est lu via un smartphone.

Cet attribut ne s'applique qu'aux champs modifiables.

attributs : minlength, maxlength

La valeur de l'attribut minlength définit le nombre minimum de caractères que devra contenir le champ.

La valeur de l'attribut maxlength définit le nombre maximum de caractères que pourra contenir le champ.

Mot de passe : ( max 4 caractères )

  <p>
    <label for="pwd">Mot de passe :
      <input id="pwd" type="password" maxlength="4" /> ( max 4 caractères )
    </label>
  </p>

Rappel : La valeur d'un attribut est toujours mise entre guillemets ( ou entre apostrophes )
L'attribut maxlength n'est utilisable qu'avec les attributs : email, password, search, tel, text ou url.

Cette vérification HTML (hors JS) est faite par le navigateur lors de la frappe, même si le champ n'est pas situé dans un formulaire.

attribut : size

La valeur de l'attribut size définit le nombre maximum de caractères visibles dans le champ. En pratique, cet attribut permet de définir la même taille à différents champs, pour des raisons esthétiques.

  <p>
    <input type="text" size="1" /><br />
    <input type="text" size="2" /><br />
    <input type="text" size="3" /><br />
    <input type="text" size="4" /><br />
    <input type="text" size="5" /><br />
    <input type="text" size="6" />
  </p>

La valeur ="0" n'est pas autorisée et est alors ignorée ( => taille par défaut )
Il existe une taille minimale.
Cependant, le bon usage veut que l'apparence se règle avec du code CSS tel que .size{width:30px} (dans un fichier CSS).

attribut : required

L'unique valeur de l'attribut required est "required" !

Votre nom : *

Contrairement au HTML, le XML requiert qu'à chaque attribut corresponde une valeur d'attribut. Autant prendre de bonnes habitudes et donc coder en XHTML.

  <p>
    <label>Votre nom :
      <input type="text" required="required" /> <span class="obligatoire">*</span>
    </label>
  </p>

La vérification se fait avant l'envoi du formulaire.
La tradition veut qu'on place une astérisque rouge à coté d'un champ obligatoire.
Cette astérisque rouge peut être codée en CSS. Par exemple :
input:required + label::after {content: " *";color: red; font-weight: bold;}

attributs : min, max

Lorsque le champ est de type="number" deux autres attributs sont disponibles : min et max.
L'attribut min permet d'indiquer la valeur admise minimale (incluse)
L'attribut max permet d'indiquer la valeur admise maximale (incluse)

Age : *

  <p>
    <label>Âge :
      <input type="number" required="required" min="18" max="120" /> <span class="obligatoire">*</span>
    </label>
  </p>

attribut : readonly

L'unique valeur de l'attribut readonly est "readonly" !

Cet attribut permet d'interdire à l'utilisateur d'y taper quoique ce soit. La valeur de ce champ ne peut pas être modifiée par l'utilisateur, mais bien par un script ...
Par exemple, pour afficher le résultat d'une opération.

Résultat de l'addition :

  <p>
    <label>Résultat de l'addition :
      <input type="text" readonly="readonly" value="12" />
    </label>
  </p>

Ce fond gris peut être codée en CSS. Par exemple :
input[readonly] {background-color:DarkGrey;}

attribut : value

La valeur de l'attribut value est le contenu du champ. Il est ainsi possible de pré-remplir le formulaire. Cependant, l'utilisateur peut modifier cette valeur avant de valider le formulaire.

  <p>
    <input type="text" value="12" placeholder="13 !" />
  </p>

La valeur de l'attribut value est prioritaire sur celle de l'attribut placeholder.

attribut : name

attribut : autocomplete

Cet attribut ne prend que deux valeurs : "on" ou "off". Selon qu'on accepte ou non les suggestions du navigateur.

Le navigateur retient les valeurs tapées dans des champs semblables.

attribut : pattern

La valeur de l'attribut pattern est une expression régulière.
La vérification aura lieu avant l'envoi des données.

    ...
      <p>
        <label>N° GSM :
          <input type="text" pattern="04[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}"
        placeholder="0499 01 23 45" title="04[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}" required="required" />
        </label>
        <input type="submit" /> <input type="reset" />
      </p>
    ...

<fieldset> et <legend>

<fieldset>

Comme vous l'avez remarqué, dans un formulaire, souvent les champs sont encadrés par un liséré. Pour encadrer des champs, il suffit de placer la balise <fieldset>.

En anglais, field signifie champ
Et, set signifie ensemble

<legend>

Pour donner un titre à cet encadré, il suffit d'ajouter la balise <legend> (comme contenu de la balise <fieldset>). Le contenu de cette balise sera le titre de l'encadré.

  <form  onsubmit="alert('Merci !'); return false;">
    <fieldset>
      <legend>numéro de GSM</legend>
        ...
    </fieldset>
  </form>

Formulaire : Exemple

Si les balises input ne sont pas placées dans la zone form, les boutons seront inactifs. Après un clic sur le bouton "Envoyer" rien ne sera envoyé. Et, après un clic sur le bouton "Effacer" rien ne sera effacé !

Sans attribut dans la balise form, après un clic sur le bouton "Envoyer", le navigateur va bien vérifier certains champs et refuser l'envoi tant qu'ils ne sont pas correctement remplis.
Et, s'ils sont tous remplis comme souhaité par le créateur du formulaire ( vous ), puisque vous n'avez pas précisé où envoyer ces données, le navigateur choisit par défaut la page elle-même. Donc, il la réaffiche ( et les valeurs contenues dans les champs sont effacées )

Pour modifier ce comportement, nous allons écrire un peu de JavaScript.

  <form onsubmit="alert('Correctement rempli !'); return false;">

La valeur de l'attribut onsubmit dit au navigateur ce qu'il doit faire lorsque l'utilisateur clique sur le bouton "Envoyer" ( = champ de type="submit" ) et que les données sont valides.

Cette valeur contient du code JavaScript. Ce code contient deux instructions. La première ( alert('Correctement rempli !'); ) affiche un message - une "alerte" à l'attention de l'utilisateur -, la seconde ( return false; ) annule l'envoi des données.

En JavaScript, les instructions sont toujours séparées par un point-virgule.

Maintenant, si le formulaire est correctement rempli, après un clic sur le bouton "Envoyer" s'affichera le message : "Correctement rempli !", puis après avoir confirmé la lecture du message ( via un clic sur OK ou sur la croix de fermeture de la boîte de dialogue ), les données ne seront pas envoyées ( et donc pas effacées par le réaffichage de la page )

Testez ce formulaire :

Voici le code complet :

<form onsubmit="alert('Correctement rempli !'); return false;">
  <fieldset>
  <legend>Exemple de formulaire</legend>
    <p>
      <input type="text" id="Nom" size="35" required="required" placeholder="NOM" />
      <span class="obligatoire">*</span><br />
      <input type="text" id="Prenom" size="35" required="required" placeholder="Prénom" />
      <span class="obligatoire">*</span><br />
      <input type="email" id="Mail" size="35" required="required" placeholder="em@ail.com" />
      <span class="obligatoire">*</span><br />
      <input type="tel" id="Tél" size="35" required="required" placeholder="065/ ..."
        pattern="065/[0-9]{6}" title="065/[0-9]{6}" />
      <span class="obligatoire">*</span><br />
      <input type="text" id="Rue" size="35" placeholder="rue, n°" /><br />
      <input type="text" id="CP" size="35" placeholder="CP = 4 chiffres" pattern="[0-9]{4}"
        title="[0-9]{4}" /><br />
      <input type="text" id="Ville" size="35" placeholder="Localité" />
    </p>
    <p>
      <input type="submit" value="Envoyer"> <input type="reset" value="Effacer">
    </p>
  </fieldset>
</form>

À la lecture de ce code HTML, on constate que des contraintes ont été mises.

1. Les quatre premiers champs ne peuvent pas rester vide.
2. Le troisième champ doit contenir une adresse e-mail dont le format est valide.
3. Le quatrième champ doit contenir 065/ suivi de 6 chiffres.
4. Le sixième champ peut être vide; mais, s'il ne l'est pas, il doit contenir 4 chiffres.

On constate alors que le navigateur fait des contrôles sans même taper une seule ligne de code JavaScript !

Voir : Validation JS

Demain, on code !