Tous types de formulaires sont intéressants pour les développeurs sur le web car ils permettent de recueillir et envoyer des informations autant aux visiteurs qu'aux webmasters. Lors de la programmation, nous utilisons les balises <form> ainsi que </form> pour introduire un formulaire. Dans cette première balise, nous pouvons ajouter l'attribut «action» qui indiquera l'URL qui recevra le contenu du formulaire lorsqu'il sera envoyé. Il est toutefois possible d'utiliser une technique plus simple d'envoi: l'action «mailto:» suivit de l'adresse e-mail désiré. Pour choisir également l'objet de l'e-mail à envoyer il faut utiliser: «?subject=...» à la suite de notre adresse email en question. Les «...» remplacent le sujet désiré.
Par exemple: <form action="mailto:savoirlehtml@gmail.com?subject=Test d'envoie">
Qui donnerait: un message d'envoi ressemblant à ce que vous pouvez voir en cliquant ici.
Les éléments d'un formulaire
Les éléments d'un formulaire peuvent ou pas être placé entre les balises <form>. Cependant, pour envoyer des réponses du formulaire, ces éléments doivent faire partie du formulaire, donc entre les balises <form>.
1. La boîte de texte: La boîte texte est l'un des éléments les plus communs. On s'en sert pour recevoir du texte de la part de l'utilisateur. La boîte de texte sera insérée par la balise <input> suivit de l'attribut «type» équivalant à «text», donc: <input type="text">. Il est également possible d'ajouter les attributs suivants:
NAME="..." ----------------- Représentant le nom de l'élément de réponse.
SIZE="..." ------------------- Figurant la largeur de la boîte de texte.
MAXLENGTH="..." --------- Déterminant le nombre de caractères autorisés dans la réponse.
VALUE="..." ---------------- Indiquant la réponse par défaut ou bien le texte à l'origine.
Par exemple: <input type="text" name="Test" size="50" maxlength="20" value="Essayez d'écrire !">
Qui donnerait:
2. La boîte de mot de passe: Elle est une variante de la boîte texte. Toutefois, on l'utilise principalement pour recueillir un mot de passe de la part de l'utilisateur. Les caractères tapés sont représentés par des astérisques. La balise toujours <input> et le premier attribut aussi «type» est maintenant égale à «password». (<input type="password">) Les attributs complémentaires sont les mêmes que la précédente à l'exception de la valeur par défaut: «value».
Par exemple: <input type="password" name="Test" size="40" maxlength="30">
Qui donnerait:
3. Les cases radio: Les cases radio présentent une liste correspondant aux réponses possibles cependant, il ne peut effectuer qu'un seul choix parmi la liste. Cette fois-ci l'attribut «type» de la balise <input> sera comparé à «radio». Chaque choix de réponse doit avoir sa propre balise. Les attributs «name» et «value» sont à nouveau présents en plus de «checked» équivalant à la réponse par défaut.
Par exemple:
<form>
<input type="radio" name="option1" value="Un" checked> Un<br>
<input type="radio" name="option2" value="Choix"> Choix<br>
<input type="radio" name="option3" value="De"> De<br>
<input type="radio" name="option4" value="Réponse"> Réponse<br>
<input type="radio" name="option5" value="Possible"> Possible<br>
</form>
Qui donnerait:Par exemple:
<form>
<input type="radio" name="option1" value="Un" checked> Un<br>
<input type="radio" name="option2" value="Choix"> Choix<br>
<input type="radio" name="option3" value="De"> De<br>
<input type="radio" name="option4" value="Réponse"> Réponse<br>
<input type="radio" name="option5" value="Possible"> Possible<br>
</form>
4. Les cases à cocher: Les cases à cocher présentent une liste d'items à choix multiples. On peut alors cocher une ou plusieurs réponses afin d'indiquer ses choix. Les attributs «value», «name» et «type» (correspondant à «checkbox» selon cette situation). Encore une fois, il faut une balise par case.
Par exemple:
<form>
<input type="checkbox" name="option1" Value="Plusieurs">Plusieurs<BR>
<input type="checkbox" name="option2" Value="Choix">Choix<BR>
<input type="checkbox" name="option3" Value="De">De<BR>
<input type="checkbox" name="option4" Value="Réponse">Réponse<BR>
<input type="checkbox" name="option5" Value="Possible">Possible<br>
</form>
Qui donnerait:5. La boîte-liste: La boîte liste représente une autre façon de constituer une liste d'items. Elle est utile dans le cas où les éléments sont plus nombreux. De plus, celle-ci permet de sélectionner plus d'un item à la fois, à l'aide de la touche SHIFT ou CTRL. Pour définir une boîte-liste, l'utilisation des balises <select> et </select> est nécessaire. Il nous faut aussi ajouter les attributs «name» donnant le nom du module et «size» identifiant le nombre de rangés de haut dans la liste déroulante. Il est également possible d'ajouter l'attribut «multiple» nous indiquant la possibilité de faire des choix multiples. La nouvelle balise <option> indique un choix de réponse dans la liste. Dans celle-ci, on retrouve «value» et «selected» jouant les mêmes rôles que précédemment.
Par exemple:
<form><select name=boîte-liste size=4 multiple><option value="Ceci">Ceci
<option value="Est" selected>Est
<option value="Une">Une
<option value="Boîte">Boîte
<option value="Liste">Liste
<option value="À">À
<option value="Choix">Choix
<option value="Multiples">Multiples
</select></form>
Qui donnerait:
6. Liste déroulante: Comme la boîte liste, cette liste permet à l'utilisateur de faire un choix parmi une série d'items. Cependant, un seul choix peut être fait pour ce type de liste. Les balises <select> restent toujours, mais au niveau de <option>, nous devons la refermer en ajoutant </option>. Tous les attributs restent les mêmes que la boîte-liste à l'exception de «multiple» et «size» ne pouvant être fonctionnel.
Par exemple:
<form><select name=boîte-liste>
<option value="Ceci" selected>Ceci
<option value="Est">Est
<option value="Une">Une
<option value="Liste">Liste
<option value="Déroulante">Déroulante
</select></form>
Qui donnerait:
7. La boîte texte multilignes: En comparaison avec la boîte de texte original, celle-ci permet à l'utilisateur d'écrire plus d'une ligne de texte, mais un développement. Pour l'introduire, nous utilisons les balises <textarea> ainsi que </textarea>. L'attribut «name», comme les autres, reste là, cependant on y ajoute «cols», «rows» et «wrap» signifiant:
COLS="..." ---------- La largeur de la boîte.
ROWS="..." --------- La hauteur de la boîte.
WRAP="..." --------- La façon dont les lignes sont traitées lors d'un retour à la ligne. Les différentes possibilités sont les suivantes:
- OFF: Il n'y a pas de changement de lignes.
- VIRTUAL: Les changements de lignes se font automatiquement. Cependant, la réponse est soumise en une seule ligne au serveur.
- PHYSICAL : les changements de lignes se font automatiquement dans la boîte texte multilignes et sont communiqués sous plusieurs rangés.
Afin d'insérer du texte par défaut, placé-le entre les balises du groupe <textarea>.
Par exemple: <textarea name="boîte multilignes" cols="40" rows="6" wrap="virtual"> Voici le texte par défaut. Vous pouvez le retirer et écrire quelque chose de nouveau... </textarea>
Qui donnerait:
8. Le bouton «envoyer»: L'un des moyens de transmettre le contenu d'un formulaire est d'ajouter le bouton d'envoi.
Pour y parvenir, toutes les questions et les éléments de réponse
(y compris les boutons) doivent être entre les balises
<form> et </form>.
<INPUT TYPE="submit" VALUE="..."> vous permettra d'envoyer le formulaire à l'adresse précédemment établie dans la balise <form>. Les «...» doivent être remplacés par le texte de votre choix apparaissant sur le bouton.
Par exemple: <input type="submit" value="Envoyer les réponses">
Qui donnerait:
(Ce bouton-là est inactif, il présente uniquement l'apparence.)
Par exemple: <input type="reset" value="Réinitialiser">
Qui donnerait:
(Bien sûr aussi inactif que le dernier.)
10. Exemple de formulaire complet:
<center><form action="mailto:savoirlehtml@gmail.com?subject=Test de formulaire">
Votre nom:<br>
<input type="text" name="Test" size="30" maxlength="20" value="nom"><input type="text" name="Test" size="30" maxlength="20" value="prénom"><br><br>
Choisissez l'un ou plusieurs des choix suivants:<br>
<select name=boîte-liste size=4 multiple>
<option value="test">test
<option value="expérience" selected>expérience
<option value="pratique">pratique
<option value="apprentissage">apprentissage
<option value="initiation">initiation
<option value="instruction">instruction
<option value="information">information
<option value="renseignement">renseignement
</select></center><br>
<br>
<input type="submit" value="Envoyer"><input type="reset" value="Réinitialiser">
</form>
Qui donnerait:
Votre nom:
(Cette fois-ci essayez les boutons!)
