Les formulaires

  1. La balise input text

  2. Une balise text est une des balises les plus simple: elle permet de rentrer un petit texte.

    Le Code

        <form method="POST" name="inputtext" action="values.cgi">
          <p>
              <label for="LastName"> Nom :</label>
    	    <input type="text" name="nom" id="LastName" size="5/"> <br/> 
    	  <label for="FirstName"> Prénom :</label>
    	      <input name="prenom" id="FirstName" size="10"> <br/> 
              <label> Téléphone :
    	      <input  name="tel" size="14" maxlength="14"> 
    	  </label>
              <br/>
          </p>
          Envoyer <input type="submit" value="submit">
          <br/>
        </form>
    	  

    Résultat :




    Envoyer

    Remarquez qu'il n'y a pas de valeur par défaut. On a également précisé le type d'une des balise. Cela n'a aucun effet dans la mesure où text est la valeur par défaut.

    Vous pouvez également remarquer l'effet du maxlength sur le champ téléphone (essayer de rentrer beaucoup de caractères dans prénom et téléphone).

    Vous pouvez enfin remarquer l'utilisation de la balise <label>. Cette balise est utilisé dans les formulaires pour mettre en relation une zone de saisie et son descriptif. Cette relation entre LABEL et INPUT peut se faire en liant l'attribut for du LABEL à l'attribut id de l'élément INPUT (nom et prénom) ou en incluant le tag INPUT dans le tag LABEL(téléphone).

  3. La balise input image

  4. Un clic sur l'image déclenche le formulaire. Les paramètres passés sont les coordonnées (x,y) du clic dans l'image.

    Le Code

        <form method="POST" name="inputimg" action="values.cgi">
          <p>
    	<input NAME="img" type="image"  src="../IMAGES/green-bullet-on-white.gif"> <br/> 
          </p>
        </form>
    	  

    Résultat :


  5. La balise input password

  6. Cette balise est très similaire au balise input text. La principale différence étant que le texte entré est remplacé par des étoiles.

    Le Code

        <form method="POST" name="inputpasswd" action="values.cgi">
          password: <input type="password" name="pass" size="10"><br/>
          Envoyer <input type="submit" value="submit">
        </form>
    	  

    Résultat :

    password:
    Envoyer
  7. Les boutons checkbox

  8. Les boutons checkbox permettent de spécifier n options parmi m (m>n). Plusieurs boutons peuvent avoir le même nom. Par défaut les boutons ne sont pas sélectionés. On peut sélectionner un bouton en utilisant l'attribut checked.

    Le Code

        <form method="POST" name="inputcheck" action="values.cgi">
          Sélectionnez vos diplômes :
        <ul>
          <li> <input TYPE="checkbox" NAME="bepc" VALUE="oui" checked > BEPC</li>
          <li> <input TYPE="checkbox" NAME="bac" VALUE="science">Bac scientifique</li>
          <li> <input TYPE="checkbox" NAME="bac" VALUE="litteraire">Bac littéraire</li>
    
          <li> <input TYPE="checkbox" NAME="ing" VALUE="oui"> Diplôme d'ingénieur</li>
        </ul>
          Envoyer <input type="submit" value="submit">
        </form>
    	  

    Résultat :

    Sélectionnez vos diplômes :
    • BEPC
    • Bac scientifique
    • Bac littéraire
    • Diplôme d'ingénieur
    Envoyer
  9. Les boutons radio

  10. Les boutons radio permettent un choix 1 parmis n. Tous les boutons se rapportant à un même choix doivent avoir le même nom.

    Le Code

    
        <form method="POST" name="inputradio" action="values.cgi">
        <fieldset>,
        <legend>Votre sexe:</legend>
          <ul id="sexe">	
    	<li><input type="radio" name="sexe" value="F" checked> femme</li>
    	<li><input type="radio" name="sexe" value="H" > homme</li>
          </ul>
        </fieldset>,
        <fieldset>,
        <legend>Votre age</legend>
          <ul>
    	<li><input type="radio" name="age" value="0-20" checked> entre 0 et 20</li>
    	<li><input type="radio" name="age" value="20-60" > entre 20 et 60</li>
    	<li><input type="radio" name="age" value="60-" > au delà de  60</li>
          </ul>
        </fieldset>,
          Envoyer <input type="submit" value="submit">
        </form>
    	  

    Résultat :

    Votre sexe:
    • femme
    • homme
    Votre age
    • entre 0 et 20
    • entre 20 et 60
    • au delà de 60
    Envoyer

    Notez l'utilisation de la balise <fieldset>. Cette balise permet de regrouper (visuellement) les champs qu'elle inclue et de leur affecter une description (balise <legend>).

  11. La balise select

  12. Cette balise permet de choisir une valeur parmis une liste déroulante de choix. l'attribut selected permet de présélectionner un choix. Notez également l'utilisation de l'attribut value pour la balise option qui permet de changer la valeur effectivement envoyée au programme spécifié dans l'attribut action. La balise <optgroup> permet de regrouper des balises options pour former un sous menu (ici les villes gardoises). Le nom du sous menu est défini par l'attribut label.

    L'attribut size de la balise select (utilisé pour le sport) permet d'afficher plusieurs éléments du menu. De plus l'attribut multiple permet de choisir plusieurs élements du menu (maintenez la touche contrôle enfoncé pendant votre sélection).

    Le Code

    
        <form method="POST" name="inputselect" action="values.cgi">
          <div style="float:right;">
          Votre ville d'origine :
          <select name="ville">
    	<option> Bordeaux</option>
    	<option selected>         Caen</option>		
    	<optgroup label="Gard"> 
     	    <option> Alès</option>
    	    <option> Nimes</option>
    	</optgroup>
    	<option> Grenoble</option>
    	<option >Paris</option>
    	<option> Toulouse</option>
          </select> <br/>
          </div>
          <div>
          Vos sports favoris
          <select name="sport" size="4" multiple>
    	<option>Voile</option>
    	<option>natation</option>
    	<option value="course">Course à pied</option>
    	<option value="velo">Vélo</option>
    	<option>Rame</option>
    	<option>Marathon</option>
          </select>
          </div>
    <center>    Envoyer <input type="submit" value="submit"></center>
        </form>
    	  

    Résultat :

    Votre ville d'origine :
    Vos sports favoris
    Envoyer
  13. La balise textarea

  14. Cette balise permet de rentrer du texte. les attributs rows et cols spécifient le nombre de lignes et de colonnes de la fenêtre (en caractères).

    Le Code

    
    	  <form method="POST" name="inputradio" action="values.cgi">
    	    <div style="margin-left: 5mm;">
    	      Racontez vos vacances :
    	      <textarea name="vacances" rows="10" cols="40">
    		L'hivers :
    
    		l'été :
          </textarea></div>
    	    <center>
    	      Envoyer <input type="submit" value="submit">
    	    </center>
    	  </form>
    	  

    Résultat :

    Racontez vos vacances :
    Envoyer

luc.brun@free.fr
Last modified: Wed Jul 28 11:03:35 CEST 2004