Header
Partagez | 

Les formulaires en HTML

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Les formulaires en HTML   Mar 7 Juin - 10:17

Coucou Smile

Ce tutoriel va plutôt être une fiche utile dont tu pourras te servir dès lors que tu devras coder un formulaire. Ici, nous ne parlerons ni validation, ni mise en page. Nous parlerons uniquement des balises indispensables pour construire un formulaire cohérent.

En route !


La base

Un formulaire commence toujours par la même chose : par une balise form :
Code:
<form action="" method="">

</form>

action est là pour dire au formulaire ce qu'il va devoir faire quand on le valide (quand on clique sur le bouton "envoyer" par exemple). Ça peut être l'appel à une autre page ou une action qui est renseignée sur la même page html Smile

method sert à indiquer si les informations qu'on va transmettre seront mises dans des variables (= des sortes de cases mémoires) (method="post") ou seront renseignées dans l'url de la page (method="get")
Idea En général, on utilise le post Wink

Les champs

Tu peux avoir :
• des zones de saisie de texte,
• des boutons radio,
• des listes déroulantes.

Chaque champ doit avoir un libellé, c'est-à-dire un intitulé de champ Smile Ceci se code de cette façon :
Code:
<label for="id du champs">Mon intitulé</label>
Grâce à lui, on lie un champ à un intitulé, ce qui fait que si tu cliques sur le label, tu "actives" le champ auquel il est lié Smile

input

C'est un champ de saisie de texte court et c'est une balise "auto-fermante" (pas besoin d'ouvrir d'un coté et de refermer de l'autre). Elle se code ainsi :
Code:
<input />

Les input peuvent être de plusieurs types :
• text : ils contiendront du texte ^^
Exemple:
 
• password : ils contiendront un mot de passe ; du coup, tout ce que tu vas renseigner ici ne sera pas "lisible" par l'utilisateur
Exemple:
 
• email : ils contiendront un email. Ici, le formulaire va vérifier automatiquement que ce qu'on renseigne ici a vraiment un format "email" (c'est-à-dire avec un @ par exemple)
Exemple:
 

Et on peut remplir par défaut la valeur de ce champ en utilisant l'attribut "value" :

Code:
<label for="saisietexte">Saisie :</label> <input type="text" id="saisietexte" value="ma saisie par défaut"/>

Enfin, pour pouvoir ensuite récupérer les données de notre formulaire, il faut qu'on "cible" le champ en lui donnant un nom. Par exemple :

Code:
<label for="mon_champs_texte_court">Saisie :</label> <input type="text" id="mon_champs_texte_court" value="ma saisie par défaut" name="mon_champs_texte_court"/>

textarea (= champ / zone de texte).

Tout comme le input, ce champ est une zone de saisie de texte, mais pour les longs textes ^^ Elle se code de cette façon :

Code:
<label for="saisietextelong">Saisie :</label> <textarea id="saisietextelong"></textarea>
Comme tu le vois, cette balise n'est pas auto-fermante ^^

Si on veut y mettre un texte par défaut, pour le coup, il suffit de l'indiquer entre les balises :

Code:
<label for="saisietextelong">Saisie :</label> <textarea id="saisietextelong" name="mon_champs_texte_long">ma saisie par défaut</textarea>

select

Passons à présent aux listes déroulantes. Elles se codent avec la balise "select" qui contient des balises "option" :
Code:
<select>
   <option>blabla</option>
</select>

Chaque choix de la liste est dans une balise "option" et chacune d'elles doit avoir une valeur et un contenu.

On n'oublie pas également le label et le nom pour récupérer la valeur.

Par exemple :



Code:
<label for="genre">Je suis :</label>
<select name="genre" id="genre">
   <option value="(pas d'infos)">Non précisé</option>
   <option value="une fille">une fille</option>
   <option value="un garçon">un garçon</option>
</select>

Les boutons radios

Eh bien figure-toi que les boutons radios sont un type d'input particulier Smile Cependant, tous les boutons radios liés au même thème ont le même nom mais avec des valeurs différentes Smile Par exemple :



Code:
<p>
  <input type="radio" name="taille" id="taille_1" value="petite" />
  <label for="taille_1">Petite</label>
</p>
<p>
  <input type="radio" name="taille" id="taille_2" value="moyenne" />
  <label for="taille_2">Moyenne</label>
</p>
<p>
  <input type="radio" name="taille" id="taille_3" value="grande" />
  <label for="taille_3">Grande</label>
</p>

Si tu testes, il ne peut y avoir qu'un seul choix coché à la fois Smile

Idea Si tu veux cocher par défaut un bouton, il suffit de lui ajouter l'attribut "checked" :

Code:
<input type="radio" name="exemple" id="exemple" value="exemple" checked /><label for="exemple">exemple</label>

Cases à cocher

Tout comme les boutons radios, les cases à cocher sont des inputs spécifiques ^^ :


Code:
<input type="checkbox" id="cbox1" value="premiere_checkbox"> <label for="cbox1">Voici la première checkbox</label>
<input type="checkbox" id="cbox2" value="deuxieme_checkbox"> <label for="cbox2">Voilà la deuxième checkbox</label>

Idea Si tu veux cocher par défaut une case, il suffit de lui ajouter l'attribut "checked" :

Code:
<input type="checkbox" id="exemple" value="exemple" checked> <label for="exemple">exemple</label>

Button

Enfin, pour valider ton formulaire, il faut des boutons ^^ Ils peuvent être de 3 types :
> submit : ça envoie les données vers la page que l'on a indiqué dans "action"
> reset : ça remet à 0 le formulaire
> button : le bouton ne fera rien mais il nous permettra de déclencher par exemple une fonction en javascript (pour faire des vérifications par exemple)

Dans tous les cas, ça s'écrit de cette façon, par exemple :
Code:
<button type="submit">Texte du bouton</button>

Informations complémentaires

Le HTML5 a intégré de nouveaux attributs pour les formulaires comme par exemple :

Placeholder qui permet d'afficher un texte par défaut qui s'effacera quand tu entreras dans le champ et qui ré-apparaitra quand tu sortiras du champ si celui-ci n'est pas rempli.
Exemple :

Code:
<label for="placeholder">Saisie :</label> <input type="text" id="placeholder" placeholder="je m'affiche par défaut"/>

required : rend le champ obligatoire.
Exemple :

Code:
<label for="required">Saisie :</label> <input type="text" id="required" required />

Idea Voici quelques tutoriels d'Alsacreation avec ces nouveaux attributs :
- Nouveaux types de champs
- placeholder, required, pattern et validation

Et pour finir cette présentation rapide sur les formulaires, voici un (long) tutoriel que je te conseille de lire : [clic].




Tu rencontres un souci avec ce tutoriel ? Viens poser ta ou tes questions [ici]

Idea N'oublie pas de lire et de suivre les règles de la section



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Les formulaires en HTML" tel que je l'ai rédigé.
Revenir en haut Aller en bas
Les formulaires en HTML
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+