Wikiversité

Hypertext Markup Language/Formulaires

< Hypertext Markup Language
Début de la boite de navigation du chapitre
Formulaires
Icône de la faculté
Chapitre no 9
Leçon : Hypertext Markup Language
Chap. préc. :Tableaux
Chap. suiv. :Balises HTML
fin de la boite de navigation du chapitre
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.

Introduction

modifier
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.


INPUT

modifier

Syntaxe

modifier

<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).

Exemple

modifier
  • 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>


SELECT

modifier

Syntaxe

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

Exemple

modifier
  • 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">Wikilivres</OPTION>
<OPTION VALUE="Wikisources">Wikisources</OPTION>
<OPTION VALUE="Wikiquotes">Wikiquotes</OPTION>
</SELECT>

TEXTAREA

modifier

Syntaxe

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

Exemple

modifier
  • Pour créer une zone de saisie de 6 lignes :
<TEXTAREA rows="5" name="suggestions">
Entrer ici vos suggestions</TEXTAREA>

Upload

modifier

INPUT TYPE="file" : 

<!-- Écrire un email à OTRS -->
<FORM NAME="permission" ACTION="mailto:permissions-fr@wikimedia.org" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="PièceJointe" SIZE="20">
</FORM>

Voir aussi

modifier

Sur les autres projets Wikimedia :


  Tableaux
Récupérée de « https://fr.wikiversity.org/w/index.php?title=Hypertext_Markup_Language/Formulaires&oldid=912493 »