Hypertext Markup Language/Formulaires

Une page de Wikiversité.

Formulaires

Chapitre 9
Leçon : HTML
Chap. préc. :	Tableaux
Chap. suiv. :	Balises HTML

En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Formulaires
Hypertext Markup Language/Formulaires », n'a pu être restituée correctement ci-dessus.

[modifier] Introduction

Un formulaire permet d'envoyer des données à une autre page, généralement codée en PHP, pour être ensuite interprétées et traitées. La création d'un formulaire permet, par exemple, la gestion d'une connexion à un espace membre (expliqué dans PHP/Formulaire).

En HTML, il peut-être réalisé à l'aide de la balise <FORM> ... </FORM>, qui s'emploie avec différents paramètres :

• METHOD : forme des réponses envoyées.
• POST : envoi de données.
• GET : envoi des données via l'URL.
• ACTION : adresse d'envoi.

L'intérieur du formulaire peut être complété avec 3 balises :

1. LABEL : assigne un nom à un objet.
2. INPUT : ajoute des boutons ou des champs de saisie.
3. TEXTAREA : ajoute une zone de saisie.
4. SELECT : ajoute une liste à choix multiples.

[modifier] INPUT

[modifier] Syntaxe

<INPUT type="type du champ" value="valeur par défaut" name="nom de l'objet">

Il existe les types de champs "text" (zone de texte), "radio" (case à cocher) et "submit" (bouton de soumission).

[modifier] Exemple

• Pour se rendre sur une URL en fonction de paramètres :

<FORM method="GET" action="http://fr.wikiversity.org/wiki/Hypertext_Markup_Language/Formulaires">
Nom :<INPUT type=text name="nom" maxlength="10"><br />
Homme : <INPUT type=radio name="sexe" value="Masculin" checked><br />
Femme : <INPUT type=radio name="sexe" value="Féminin"><br />
<INPUT type="submit" value="Envoyer">
</FORM>

• Pour poster des champs sur un site :

 <FORM action="http://fr.wikiversity.org/w/index.php?title=Hypertext_Markup_Language/Formulaires" method="POST">
    <P>
    <LABEL for="prenom">Prénom  </LABEL>
              <INPUT type="text" id="prenom"><BR>
    <LABEL for="nom">Nom : </LABEL>
              <INPUT type="text" id="nom"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sexe" value="Homme"> Homme<BR>
    <INPUT type="radio" name="sexe" value="Femme"> Femme<BR>
    <INPUT type="submit" value="Envoyer"> <INPUT type="reset">
    </P>
 </FORM>

[modifier] SELECT

[modifier] Syntaxe

<SELECT name="nom du menu déroulant">

[modifier] Exemple

• Pour créer un menu déroulant qui affiche les projets Wikimédia en français, et renvoie leur nom en anglais.

<SELECT name="Wikimédia">
<OPTION VALUE="Wikipedia" SELECTED>Wikipédia</OPTION>
<OPTION VALUE="Wiktionary">Wiktionnaire</OPTION>
<OPTION VALUE="Wikiversity">Wikiversité</OPTION>
<OPTION VALUE="Wikinews">Wikinews</OPTION>
<OPTION VALUE="Wikibooks" SELECTED>Wikilivres</OPTION>
<OPTION VALUE="Wikisources">Wikisources</OPTION>
<OPTION VALUE="Wikiquotes">Wikiquotes</OPTION>
</SELECT>

[modifier] TEXTAREA

[modifier] Syntaxe

<TEXTAREA rows="nombre de lignes -1" name="commentaires">

[modifier] Exemple

• Pour créer une zone de saisie de 6 lignes :

<TEXTAREA rows="5" name="suggestions">
Entrer ici vos suggestions</TEXTAREA>

Hypertext Markup Language

Tableaux

Balises HTML