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.

• https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061492-creez-des-formulaires sur OpenClassrooms
• Mon premier formulaire sur MDN¹⁾

<FORM method="POST" action="reponse.php"> ... </FORM>

• <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 type="type-de-champ" name="nom-de-la-variable" value="valeur-initiale-de-la-variable" />

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

<SELECT name="nom-de-la-variable"> <OPTION value="valeur-de-la-variable">Texte pour choisir</option> <OPTION ... </SELECT>

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

<TEXTAREA name="nom-de-la-variable" cols="largeur" rows="hauteur">Texte initial</TEXTAREA>

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

Une case à cocher ou un bouton radio peut être pré sélectionné avec l'attribut checked, selected pour la balise <OPTION>

Formulaire demandant des informations personnelles à un visiteur. 2 méthodes sont utilisées pour connaitre le sexe. Le résultat sera traité par la page PHP “reponse.php”.

formulaire.html

  <FORM action="reponse.php" method="POST>
    Votre nom ? <INPUT type="text" name="nom" /><BR/>
    Votre prénom ? <INPUT type="text" name="prenom" /><BR/>
    votre sexe méthode 1 ? 
      <INPUT type="radio" name="sexe1" value="M" /> Masculin
      <INPUT type="radio" name="sexe1" value="F" /> Féminin<BR/>
    votre sexe méthode 2 ? <SELECT name="sexe2">
      <OPTION value="M">Masculin</OPTION>
      <OPTION value="F">Féminin</OPTION>
    </SELECT><BR/>
    <INPUT type="submit" value="Envoyer" />
  </FORM>