WikiTechno.morceau.fr (amen.fr)

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Les formulaires en HTML ======
Le langage HTML ne permet pas de traiter des données mais permet de les transmettre à un serveur apte à les traiter. Pour cela il existe un certain nombre de balises permettant de gérer les formulaires.

===== Connaissances de base =====
==== FORM ====
<html><FORM method="POST" action="reponse.php"> ... </FORM></html>\\
  * **<FORM>** est la balise qui englobe le formulaire. Le formulaire peu contenir des champs de données et des textes pour préciser leur utilité.
    * //method// est la méthode utilisée pour la transmission des données. Nous n'utiliserons dans les exemples suivants que la méthode POST qui transmet les données de manière "cachée". Il existe aussi la méthode GET qui les transmets dans l'URL (non recommandé).
    * //action// est la page qui va traiter les données. Nous n'utiliserons dans les exemples suivants que le langage PHP pour traiter les données. La page du formulaire peut traiter elle même ses données, on la représente alors par le symbole #.

==== INPUT ====
<html><INPUT type="type-de-champ" name="nom-de-la-variable" value="valeur-initiale-de-la-variable" /></html>\\
  * **<INPUT>** est la balise utilisée pour les principaux champs de formulaire
    * //name// nom de la variable. Il permet de récupérer son contenu sur la page de traitement.
    * //value// valeur de la variable lors de l'affichage de la page. Elle pourra être modifiée par l'utilisateur avant de soumettre (envoyer) le formulaire
    * //type// indique le type du champ du formulaire utilisé
      * __text__ zone de saisie de lettres ou de chiffres
      * __radio__ boutons à cocher. Seule un réponse peut être cochée pour tous les boutons ayant le même nom.
      * __checkbox__ cases à cocher. Plusieurs cases ayant le même nom peuvent être cochées et transmises 
      * __submit__ bouton pour soumettre (envoyer) le formulaire

Une case à cocher ou un bouton radio peut être pré sélectionné avec l'attribut //checked//

==== SELECT ====
<file html>
<SELECT name="nom-de-la-variable">
    <OPTION value="valeur-de-la-variable">Texte pour choisir</option>
    <OPTION ...
</SELECT>
</file>
  * **<SELECT>** est une liste de choix. Les différents choix sont indiqués par les balises <OPTION>
    * //name// nom de la variable. Il permet de récupérer son contenu sur la page de traitement.
    * //value// valeur de la variable lors de la soumission (envoi) de la page si c'est cette option qui est sélectionnée

Une option peut être pré sélectionné avec l'attribut //selected//

==== TEXTAREA ====
<html><TEXTAREA name="nom-de-la-variable" cols="largeur" rows="hauteur">Texte initial</TEXTAREA></html>
  * **<TEXTAREA>** est une zone de texte (commentaire) multi-ligne
    * //name// nom de la variable. Il permet de récupérer son contenu sur la page de traitement.
    * //cols// Nombre maxi de caractères sur une ligne
    * //rows// nombre de lignes affichées

=====Compléments===
Un formulaire peut être découpé en plusieurs parties avec les balises 
<file html>
<FIELDSET>
    <LEGEND>Nom de la partie</LEGEND>
    ...
</FIELDSET>
</file>

Un champ de données peut être associé à un texte avec la balise <LABEL> et en donnant un attribut //id// au champ. Chaque id doit être unique sur la page. L'association permet de sélectionner le champ en cliquant sur le label.
<file html>
<input type="radio" id="Citroen1" name="marque" value="C3" />
    <label for="Citroen1">Citroën modèle C3</label>
</file>
 
===== Exemple =====
Formulaire demandant des informations personnelles à un visiteur. 2 méthodes sont utilisées pour connaître le sexe. Le résultat sera traité par la page PHP "reponse.php".

<code html>
  <FORM action="reponse.php" method="POST">
    <FIELDSET>
      <LEGEND>Identité</LEGEND>
        <LABEL for='n'>Votre nom ? </LABEL><INPUT type="text" name="nom" id='n' size="30" /><BR/>
        <LABEL for='p'>Votre prénom ? <INPUT type="text" name="prenom" id='p' size="20" />
    </FIELDSET>
    <FIELDSET>
      <LEGEND>Informations</LEGEND>
        <LABEL for='a'>Votre age ? </LABEL><INPUT type="text" name="age" id='a' size="3" /><BR/>
        votre sexe méthode 1 ? 
        <INPUT type="radio" name="sexe1" value="M" id='m' /> <LABEL for='m'>Masculin</LABEL>
        <INPUT type="radio" name="sexe1" value="F" id='f' /> <LABEL for='f'>Féminin</LABEL>
        <INPUT type="radio" name="sexe1" value="?" id='i' checked /> <LABEL for='f'>indeterminé</LABEL>
        <BR/>votre sexe méthode 2 ? 
        <SELECT name="sexe2">
          <OPTION value="?" selected>Choisir</OPTION>
          <OPTION value="M">Masculin</OPTION>
          <OPTION value="F">Féminin</OPTION>
        </SELECT>
    </FIELDSET>
    <INPUT type="submit" value="Envoyer" />
  </FORM>
</code>

===== Compléments =====
<WRAP round info>
  * [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061492-creez-des-formulaires|Cours sur les formulaires]] sur OpenClassrooms
  * [[https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML|Mon premier formulaire]] sur MDN((Mozilla Developer Network))
</WRAP>

=====Activités=====
  * [[clubinfo:php2|Traitement d'un formulaire en PHP]]
WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Outils de la page
