formulaires

La balise form permet d’ajouter un formulaire 

<form method="post" action="traitement.php">
<!-- Les éléments du formulaires --> 
</form>
  • method : attribut qui indique par quel moyen les données vont être envoyées:
    • method=”get”: les informations seront envoyées dans l’adresse de la page (http://…),
    • method=”post”: elle permet d’envoyer un grand nombre d’informations. Les données saisies dans le formulaire ne transitent pas par la barre d’adresse.
  • action: c’est l’adresse de la page ou du programme qui va traiter les informations

Ci-dessous les principaux éléments des formulaires:

Zone de texte monoligne

<input type="text" name="login" />

Résultat

Les libellés

<label>Votre login</label> : <input type="text" name="login" />

Résultat

:

Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l’id du champ

<label for="login">Votre login</label> : <input type="text" name="login" id="login" />

Résultat

:

Quelques attributs supplémentaires

  • On peut agrandir le champ avec size.
  • On peut limiter le nombre de caractères que l’on peut saisir avec maxlength.
  • On peut pré-remplir le champ avec une valeur par défaut à l’aide de value.
  • On peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra dès que le visiteur aura cliqué à l’intérieur du champ.
<label for="login">Votre login:</label>
<input type="text" name="login" id="login" placeholder="Ex : toto" size="30" maxlength="10" />

Résultat


Zone de mot de passe

<label for="login">login :</label> <input type="text" name="login" id="login" /> <br />
<label for="pass">mot de passe :</label> <input type="password" name="pass" id="pass" />

Résultat


Zone de texte multiligne

<label for="comment">Commentaire</label><br />
<textarea name="ameliorer" id="comment"></textarea>

Résultat


checkbox

Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="couscous" id="couscous" /> <label for="couscous">Couscous</label>
<input type="checkbox" name="pastilla" id="pastilla" /> <label for="pastilla">Pastilla</label>
<input type="checkbox" name="mechoui" id="mechoui" /> <label for="mechoui">Mechoui</label>
<input type="checkbox" name="tanjia" id="tanjia" /> <label for="tanjia">Tanjia</label>

Resultat:

Cochez les aliments que vous aimez manger :



Les zones d’options

Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Plus de 40 ans</label>

Veuillez indiquer la tranche d’âge dans laquelle vous vous situez :



Les listes déroulantes

<form method="post" action="traitement.php">
<p> <label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
   <option value="maroc">Maroc</option>
   <option value="algerie">Algérie</option>
   <option value= tunisie>Tunisie</option>
   <option value="senegal">Sénégal</option> 
   <option value="egypte">Egypte</option> 
   <option value="burkinafaso">Burkina Faso</option>
</select> </p> </form>

Résultat


Les listes déroulantes

<label for="pays">Dans quel pays habitez-vous ?</label>
<select name="pays" id="pays">
   <optgroup label="Afrique">
   <option value="maroc">Maroc</option>
   <option value="algerie">Algérie</option>
   <option value= tunisie>Tunisie</option>
   <option value="senegal">Sénégal</option> 
</optgroup>
<optgroup label="Amérique">
   <option value="canada">Canada</option>
   <option value="etats-unis">Etats-Unis</option> 
</optgroup>
<optgroup label="Asie"> 
   <option value="inde">Inde</option>
   <option value="chine">Chine</option>
   <option value="japon">Japon</option> 
</optgroup>
</select>

Résultat


Téléphone

<input type="tel" />

Nombre

<input type="number" />

Curseur

<input type="range" />

Couleur

<input type="color" />

Date

<input type="date" />

Recherche

<input type="search" />