FORMULAIRE HTML ET SES BALISES, TOUT CE QU’IL FAUT SAVOIR.

Les formulaires permettent d’interagir à travers le web pour contacter des personnes, poster des commentaires, charger des photos, et toutes sortes de vidéo.

La balise de formulaire

basiquement, un formulaire se constitue d’une balise <form> et de plusieurs attributs obligatoires ou optionnels.

<form method="POST" action="" enctype="multipart/form-data"></form>

method= »POST »	Definit le type de données transmises, Ici c’est un tableau de données POST dans la requête HTTP, mais il est possible d’envoyer des données de type GET (variables dans l’URL /?variable=value)
action= » »	L’action définit l’URL ou sera soumise les données. Ici rien n’est indiqué donc les données seront renvoyées sur cette même page.
enctype= »multipart/form-data »	cette balise devient obligatoire à partir du moment ou vous souhaiter uploader des fichiers (vidéo, image, PDF, musique). Sans cet attribut, les envoies de fichier seront ignorés.

Bouton pour envoyer les données

Il faut un élément spécial pour pouvoir soumettre les données du formulaire.

<input type="submit" value="Envoyer">

input	Balise commune aux boutons ou aux entrées de formulaire.
type= »submit »	Le type permet de spécifier si il s’agit d’une entrée (texte à inscrire) ou d’un bouton de soumission des données (submit)
value= »Envoyer »	La valeur est le texte affiché dans le bouton, attention cette valeur peut aussi être utilisé pour le traitement des données.

Exemple d’une entrée formulaire

<input type="text" placeholder="pseudo par défaut" name="pseudo" value="">

placeholder	Permet d’afficher une indication grisée qui s’éffacera automatiquement à l’inscription d’un texte.
name	Identité de l’information entrée pour pouvoir la traiter en PHP.
value	La valeur qui à été inscrite par l’utilisateur.

La zone de texte

Balise très utilisée pour la rédaction de long texte comme des articles ou des commentaires.

<textarea name="mon-article" cols="30" rows="10"> mon texte </textarea>

name	Permettra d’identifier la donnée soumise pour la traiter en PHP.
cols	Définit le nombre de colonnes (largeur de la zone de texte).
rows	Définit le nombre de lignes (la hauteur de la zone de texte).
le texte entre les balises	Le texte entre les balises sera envoyé parmi les données, pas besoin d’attribut « value ».

Entrée de formulaire caché

Les entrées cachées de formulaire sont utiles pour transmettre des données jugées secondaires ou inutiles pour l’utilisateur. Elles sont très similaires aux entrées standard.

<input type="hidden" name="cache" value="">

Comme vous pouvez le constater, seul le type est modifié en « hidden » pour cacher nos données. Ces champs ne doivent pas stocker de données sensibles comme des mots de passe ou éléments de sessions, car elles sont visibles et modifiables dans le code source.

Indications d’entrée

Les balises <label> permettent une indication sur l’élément à remplir, exemple :

<label for="pseudo"> entrez un pseudo </label>

Les cases à cocher

<input type="checkbox" name="option" value="element1">Element 1

Ce sont de simples éléments à cocher ou décocher. On pourra récupérer l’information par son « name » et obtenir la value « element1 ». Il est possible de cocher un élément par défaut au chargement de la page grâce à l’attribut « checked ».

<input type="checkbox" name="option" value="element1" checked >Element 1

Les boutons radio

<input type="radio" name="mon_option" value="option1"> option 1 <br>
<input type="radio" name="mon_option" value="option2"> option 2 <br>

Les boutons radio, à la différence des cases à cocher, sont liés entre eux. C’est-à-dire que vous ne pouvez cocher qu’un seul des éléments de la collection reconnue par le même « name ».

Selection d’items

<select name="selection_elements">
    <option value="element1"> Elément 1 </option>    
    <option value="element2"> Elément 2 </option>    
    <option value="element3" selected > Elément 3 </option>    
    <option value="element4"> Élément 4 </option>
</select>

Permets d’afficher une liste déroulante avec les éléments disponibles entre les balises <select>. L’attribut « selected » présent pour l’élément 3 permet de sélectionner cet élément par défaut au chargement de la page HTML.