Les formulaires - Le code HTML

Les formulaires sont partout sur le Web :

• faire une recherche,
• se connecter à un compte,
• envoyer un mail,
• répondre à un sondage,
• etc.

Pour cela, on utilise des balises spécifiques.

La balise form contient toutes les balises de formualire.

Si des balises de formulaire de trouvent hors d'une balise form elles ne seront pas prises en compte lors le formulaire est validé.

Les balises suivantes sont donc à placer dans des balises form.

Les zones de saisies existent en différents types :

<input type="text"> <input type="tel"> <input type="email"> <input type="url"> <input type="number"> <input type="password"> <input type="search">

Les types tel, email et url pourraient tout aussi bien être remplacés par le type text, mais ils sont détectés par le navigateur et les informations rentrées peuvent être sauvegarder par celui-ci.

Il est possible de pré-remplir une zone de saisie avec l'attribut value="...".

Il est aussi possible d'indiqué ce que l'utilisateur doit remplir avec l'attribut placeholder="...".

Exemple :

<input type="text" value="Michel Dupont"> <input type="tel" placeholder="N° de téléphone">

Les checkbox sont très utilisés dans les formulaires (notamment les QCM à choix multiple).

Reponse 1 : Reponse 2 : Reponse 3 : Reponse 4 :

Reponse 1 : <input type="checkbox"> Reponse 2 : <input type="checkbox"> Reponse 3 : <input type="checkbox"> Reponse 4 : <input type="checkbox" checked>

Les boutons radios sont très utilisés dans les formulaires (notamment les QCM à choix unique).

Reponse 1 : Reponse 2 : Reponse 3 : Reponse 4 :

Reponse 1 : <input type="radio"> Reponse 2 : <input type="radio"> Reponse 3 : <input type="radio" checked> Reponse 4 : <input type="radio">

Si vous avez cliqué sur les boutons radios précédents, vous avez du constater qu'il n'est pas possible de décocher les boutons une fois validés... ce qui est très embêtant !

Pour réglé ce problème, il faut ajouter l'attribut name="..." et mettre la même valeur pour les boutons radios liés.

Reponse 1A : Reponse 2A : Reponse 1B : Reponse 2B :

Reponse 1A : <input type="radio" name="groupe1"> Reponse 2A : <input type="radio" name="groupe1"> Reponse 1B : <input type="radio" name="groupe2"> Reponse 2B : <input type="radio" name="groupe2">

Ces boutons sont inutilisables en dehors de la balise form.

Le bouton de type submit est le plus important : il permet de valider le formulaire et d'envoyer les données au serveur.

<input type="button" value="Texte"> <input type="submit"> <input type="submit" value="Valider">

Les balises input de types dates et heures sont comme des zones de saisies pour des dates et des heures. La plupart des navigateurs ouvrent un calendrier pour simplifier la saisie.

<input type="date"> <input type="week"> <input type="month"> <input type="datetime-local"> <input type="time">

Il existe une trentaine de types de balise input. En voici 4 autres :

• Une balise de saisie de couleur (la valeur envoyée sera en hexadécimale).
• Une balise échelle de valeurs entre 0 et 100 (50 par défaut).
• Une balise invisible, pour envoyer des données au serveur sans les montrer à l'utilisateur.
• Une balise de sélection de fichier depuis l'ordinateur.

<input type="color"> <input type="range"> <input type="hidden" value="valeur cachée"> <input type="file">

Les listes déroulantes ne sont pas des balises input !

Il est possible de choisir l'option sélectionnée par défaut (sinon, la première est sélectionnée).

Réponse 0 Réponse 1 Réponse 2 Réponse 3 Réponse 4

<select name="lst"> <option>Réponse 0</option> <option selected>Réponse 1</option> <option>Réponse 2</option> <option>Réponse 3</option> <option>Réponse 4</option> </select>

Les balises input sont toujours accompagnées d'une balise label.

On peut lier les deux balises pour faire en sorte que si l'on clique sur le texte de la balise label, ça active la balise input.

Comment faire ?

L'attribut id="..." de la balise input et l'attribut for="..." de la balise label doivent avoir la même valeur.

On rappelle que les identifiant doivent être unique.

Exemple :

Texte : Reponse 1 :

<label for="t1">Texte : </label> <input type="text" id="t1"> <label for="r2">Reponse 1 : </label> <input type="checkbox" id="r2">