Si vous souhaitez introduire des formulaires dans une page web vous aurez sans doute besoin de cette liste suivante non exhaustive :

Sommaire
  1. La balise form
  2. La balise fieldset
  3. La balise legend
  4. La balise input
  5. La liste déroulante
  6. La zone de texte

La balise form

La balise qui permet de délimiter les formulaires.

Avec deux attributs :

  1. Method : On dispode de deux methodes post ou get
    1. La méthode post peremet d'envoyer directement les données du formulaire au programme defini dans la méthode action
    2. La méthode get envoie les données de formulaire directement via l'URL
  2. action : defini le programme executable ou shell à executer pour l'envoi des données
<form action="programme" method="get"></form>

La balise fieldset

Cette balise vous permet d'encander votre formulaire par exemple :

<fieldset> Mon formulaire encadré </fieldset>

Donne le resultat :

Mon formulaire encadré

La balise legend

Associée à une balise fieldset elle vous permet de donnner un titre à vos encadrés :

<fieldset>
      <legend> Mon formulaire</legend>
      Mon formulaire encadré
</fieldset>

Donne le résultat :

Mon formulaire Mon formulaire encadré

La balise input

  • La saisie de texte

L'attribut type réglé sur text permet de saisir un texte simple. On peut eventuellement limiter la taille de la balise grâce à un attribut size.

Entrer texte 1 : <input type="text"><br>
Entrer texte 2 : <input type="text" size="5">

Entrer texte 1 :
Entrer texte 2 limité à 5 caractères :

  • La saisie de mot de passe

On met l'attribut type sur password et de cette manière le texte saisi est caché :

Entrer le mot de passe : <input type="password">

Entrer le mot de passe :

  • Le type radio

Permet à l'utilisateur de faire un choix unique permis une liste de choix :

<input type="radio" name="joueurs" value="djoko"> Novak Djokovic <br>
<input type="radio" name="joueurs" value="murray"> Andy Murray <br>
<input type="radio" name="joueurs" value="wawrinka"> Stan Wawrinka

Novak Djokovic
Andy Murray
Stan Wawrinka

Remarquez que pour lier les choix entre eux on leurs donne le même attribut name de cette façon l'utilisateur ne peut faire qu'un choix parmis les 3 proposés. L'attribut value permet de recuperer la valeur choisie en javascript.

  • Les cases à cocher : la checkbox

Cette fois l'utilisateur peut choisir plusieurs options :

<input type="checkbox" name="tournois" value="AO"> Open d'australie <br>
<input type="checkbox" name="tournois" value="RG"> Roland Garros <br>
<input type="checkbox" name="tournois" value="WI"> Wimbledon <br>
<input type="checkbox" name="tournois" value="US"> US Open

Open d'australie
Roland Garros
Wimbledon
US Open

  • Le type file

Permet d'inclure un fichier :

<input type="file">

  • Le type button : le bouton

Un simple bouton :

<script>
  function affiche(){
        alert("Vous avez appuyé sur le bouton");
      }
</script>
<input type="button" onclick="affiche()" value="Le bouton">

  • Le type reset

Un boutton qui permet de réinitialiser un formulaire à ses valeurs de départ :

<form>
  <input type="checkbox" name="tournois" value="AO"> Open d'australie <br>
  <input type="checkbox" name="tournois" value="RG"> Roland Garros <br>
  <input type="checkbox" name="tournois" value="WI"> Wimbledon <br>
  <input type="checkbox" name="tournois" value="US"> US Open <br>
  <input type="reset" value="Corriger">
</form>

 

Open d'australie
Roland Garros
Wimbledon
US Open

  • Le type submit

Un bouton qui envoie les données de votre formulaire :

<form>
  <input type="submit" value="Envoyer">
</form>

La balise select : la liste déroulante

On ouvre une balise select et à l'interieur, on utilise des balises option pour chaque option de la liste déroulante.

<select name="courts">
      <option value="Chatrier">Court Philippe Chatrier</option>
      <option value="ROA">Road Laver Arena</option>
      <option value="CC">Center Court</option>
      <option value="AA">Arthur Ashe</option>
</select>

La balise textarea : la zone de texte

Cette balise permet de creer une zone de texte libre. On peut regler sa taille par défaut en nombre de colone et en nombre de ligne :

<textarea rows=5 cols=30>Mon texte</textarea>

Partager cet article

Repost0