La balise form

Comment créer un formulaire en HTML ?

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>

• method= »post » ou method= »get » permet de faire apparaître ou non l’ensemble des valeurs dans la barre d’adresse en paramètre de l’adresse de l’attribut action ;
• action= »http://www… » le formulaire est envoyé vers un page permettant le traitement des informations ou action= »mailto:nom@adresse.com » le formulaire est envoyé par messagerie ;
• enctype= »text/plain » attribut optionnel.

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 sur le 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>

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>

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>

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>

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 permet de préciser cette valeur de substitution. Dans l’exemple ci-dessous, on envoie « 01 » plutôt que « janvier ».

Pour permettre la sélection 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 et votre jour 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>

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>

Mot de passe

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

La saisie des informations est cryptée.

/!\ le transfert n’est pas crypté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>