Les balises :: Les formulaires

La balise <form>

La balise <form> permet de créer des formulaires.

<form>
  Vous pouvez saisir du texte, et insérer les éléments du formulaire
</form>

les attributs de la balise <form>

Les boutons "envoyer" et "annuler"

<input type="submit" name="envoi" value="envoyer">
<input type="reset" name="annuler" value="effacer">

L'attribut "value" permet de définir le texte du bouton, l'attribut "name" est utilisé pour le traitement du formulaire.

<form method="post" action="mailto:nom@adresse.com" enctype="text/plain">
    Nom : &nbsp; <input type="text" name="nom" size="30"><br>
    <input type="reset" name="efface" value="effacer le formulaire">
    <input type="submit" name="envoi" value="envoyer le formulaire">
</form>
Nom :  

Ligne de texte

<input type="text" name="nom_du_champ" size="25" value="valeur initiale">

L'attribut "name" est obligatoire, il permet l'envoi de l'information (nom_du_champ=valeur saisie).
L'attribut "size" permet de spécifier la largeur de la boîte, en nombre de caractères. Pour limiter le nombre de caractère qu'il est possible de saisir, utiliser l'attribut "maxlength".
autres attributs : "disabled" (desactiver) et" readonly" (en lecture uniquement)

Boutons radio

<input type="radio" name="nom_de_l_ensemble_des_boutons" value="valeur_du_bouton">
  

Les attributs "name" et "value" sont obligatoires.
Tous les boutons radio doivent avoir le même nom (name), mais ils doivent avoir des valeurs différentes (value).
La sélection donne lieu à un choix unique (ou exclusif).
L'attribut optionnel "checked" précise la valeur par défaut. Il doit être présent pour un seul choix d'un même ensemble de boutons radio (possédant le même nom).

<h4> Aimez-vous le html ? </h4>
<form>
<input type="radio" name="situation" value="1" checked>J'aime un peu le html <br>
<input type="radio" name="situation" value="2">J'aime beaucoup le html <br>
<input type="radio" name="situation" value="3">J'aime le html à la folie <br>
<input type="radio" name="situation" value="4">Je n'aime pas du tout le html <br>
<input type="radio" name="situation" value="5">Je déteste le html <br
</form>

Aimez-vous le html ?

J'aime un peu le html
J'aime beaucoup le html
J'aime le html à la folie
Je n'aime pas du tout le html
Je déteste le html

Case à cocher

<input type="checkbox" name="nom_de_la_case" value="valeur_de_la_case">

L'utilisateur peut cocher ou sélectionner une ou plusieurs cases.

Les attributs "name" prennent des valeurs différentes.
Les attributs "value" peuvent éventuellement prendre la même valeur.
Vous pouvez utiliser l'attribut "checked" pour pré-sélectionner une ou plusieurs cases.

<h4> Connaissez-vous : </h4>
<form>
<input type="checkbox" name="chats" value="oui" checked>le html
<input type="checkbox" name="chiens" value="non" checked>le css
<input type="checkbox" name="poissons" value="oui">le javascript
</form>

Connaissez-vous :

le html le css le javascript

Zone de saisie

<textarea name="nom_de_la_zone" cols="nombre_de_colonnes" rows="nombre_de_lignes">
			ici le texte par défaut
			qui peut être présenté sur plusieurs lignes
</textarea>

Une zone de saisie correspond à une zone de texte, mais sur plusieurs lignes.

<h4>Laissez moi un message</h4>
<form>
<textarea name="commentaire" cols="50" rows="4">Vous pouvez saisir votre message ici…</textarea>
</form>

Laissez moi un message

Menu déroulant

<select name="nom_du_menu">
        <option> proposition 1 </option>
        <option> proposition 2 </option>
        <option> proposition 2 </option>
</select>

Pour permettre l'envoi d'une valeur remplaçant la proposition, l'attribut "value" de la balise <option> permet de préciser cette valeur de substitution. Dans l'exemple ci-dessous, on envoie "01" plutôt que "janvier".

Pour permettre la sélecion de plusieurs valeurs, ajouter l'attribut "multiple" à la balise <select>

On peut transformer un menu en liste déroulante en précisant le nombre de propositions visibles simultanément avec l'attribut "size" de la balise <select>

<h4>Choisir votre mois pr&eacute;f&eacute;r&eacute; :</h4>
<form>
<select name="mois" size="5" multiple>
<option value="01">janvier</option>
<option value="02">février</option>
<option value="03">mars</option>
<option value="04">avril</option>
<option value="05">mai</option>
<option value="06">juin</option>
<option value="07">juillet</option>
<option value="08">août</option>
<option value="09">septembre</option>
<option value="10">octobre</option>
<option value="11">novembre</option>
<option value="12">décembre</option>
</select>
<select name="jour">
<option value="1">lundi</option>
<option value="2">mardi</option>
<option value="3">mercredi</option>
<option value="4">jeudi</option>
<option value="5">vendredii</option>
<option value="6">samedi</option>
<option value="7">dimanche</option>
</select>
</form>

Choisir votre mois préféré :

Sélection de fichier

<input type="file" name="nom_du_selecteur" size="largeur_de_la_zone">

Permet de transférer un fichier du client (le navigateur) vers le serveur (le site Web)
Affiche : une zone de texte (qui permet de saisir le nom du fichier, précédé du chemin) et un bouton (qui permet d'ouvrir une boîte de dialogue de sélection de fichier).
La taille de la zone de texte est précisée par la valeur de l'attribut size
Le texte du bouton est une valeur par défaut de votre navigateur.

<h4> Sélection d'un fichier : </h4>
<form>
<input type="file" name="envoiFic" size="70">
</form>

Sélection d'un fichier :

Mot de passe

<input type="password" name="nom_du_selecteur" size="largeur_de_la_zone">

La saisie des informations est criptée
/!\ le transfert n'est pas criptée /!\

<h4> Identifiez vous : </h4>
<form>
Nom d'utilisateur : <input type="text" name="identifiant" size="25"><br>
Mot de passe : <input type="password" name="mot_de_passe" size="25">
</form>

Identifiez vous :

Nom d'utilisateur :
Mot de passe :

 

vers le haut