HTML formulaire

Les formulaires :

Pour faire un formulaire nous avons besoin des balises <form></form>
Pour mettre du texte à l'intérieur d'un formulaire n'oubliez pas les balises <p></p>

<form>
<p>mon texte</p>
</form>

Le but d'un formulaire et de faire passer des informations du visiteur et de les traiter et puis les afficher, pour cela il faut ajouter deux attributs.

<form method="" action="">
<p>mon texte</p>
</form>

method => de quel manière les données vont-ils être traitées. Nous avons la méthode donc :

• method="get"

Cette méthode est peu utilisé dans ce que nous voulons. On retrouve la méthode "get" qui est limité à 255 caractères à envoyer des données dans l'adresse URL (http://) On peut y retrouver nos pseudos etc..

• method="post"

C'est cette méthode que nous allons utiliser pour les formulaires. Cette méthodes permet d'envoyer les informations et de les traiter. Aucune informations tapées dans le formulaires n'apparaîtrons dans la barre d'URL.

• action

Représente la page qui sera liée au formulaire et qui va traiter les informations que va recevoir la méthode POST. Cela permettra donc, d'enregistrer vos informations dans une base de données, de vous envoyez un mail de confirmation que vos données ont été prises en compte etc...

En utilisant la méthode "post" ou get" et en liant une page action à notre formulaire on n'utilisera pas uniquement du HTML mais aussi du PHP !

<form method="post" action="PageDeTraitement.php">
<p>Mon texte</p>
</form>

Comment insérer des données dans un formulaire html, avec des boutons etc... ?

Exemple de formulaire:

<form method="post" action="PageDeTraitement.php">
<p>Voici un petit formulaire pour commencer</p>
<p>Pseudo : <input type="text" name="pseudo"/></p>
<p>Pays : <select name="pays">
                  <option value="france">France</option>
                  <option value="japon">Japon</option>
                  <option value="canada">Canada</option>
                  <option value="corée">Corée</option>
                  </select>
<input type="submit" name="valider" value="valider"/>
</form>

La balise <select> permet d'obtenir une liste déroulante on peut sélectionnée un élément par défaut avec selected.

<select name="pays" id="pays">
                  <option value="france">France</option>
                  <option value="japon" selected>Japon</option>
                  <option value="canada">Canada</option>
                  <option value="corée">Corée</option>
</select>

On peut aussi regrouper nos options avec les balises <optgroup></optgroup> 

<label for="regarder">Votre pays</label>
<select name="maliste" id="regarder">
<optgroup label="Mangas">
                  <option value="naruto">Naruto</option>
                  <option value="erased">Erased</option>
                  <option value="Prince of stride">Prince of stride</option>
                  <option value="Kuroko's baskect">Kuroko's basket</option>
</optgroup>
<optgroup label="Dramas">
                  <option value="heirs">Heirs</option>
                  <option value="moorim school" selected>Moorim school</option>
                  <option value="liar game">Liar game</option>
                  <option value="itazura na kiss">Itazura na kiss</option>
</optgroup>
 </select>

Les balises de texte pour une formulaire :
<input type=""/>

Résultat :

Pseudo :

On lui ajoute avec lui l'attribut "type" qui change la signification de la zone de texte.
Il faut ensuite lui donner un "name" ce qui va permettre le traitement en php. On saura de quoi on parle, si c'est pour un pseudo, un mot de passe ou un commentaire.

Précédemment j'ai indiqué entre balise <p> la signification de la zone de texte.
Préférez de mettre en deux balises <p></p> un libellé et de le lier à notre champ. Donnez aussi un id ayant le même nom que le libellé. Faîtes de la manières suivante :

<form method="post" action="PageDeTraitement.php">
<p>
       <label for="pseudo">Pseudo</label> : <input type="text" name="pseudo" id="pseudo"/>
</p>
</form>
Le résultat et le même qu'avant.

Vous pouvez donner une indication dans le champ de texte avec le placeholder. On le voit souvent pour les mails.

<form method="post" action="PageDeTraitement.php">
<p>Pseudo : <input type="text" name="pseudo" placeholder="votre pseudo"/></p>
<input type="submit" name="valider" value="valider"/>
</form>

value = > valeur par défaut, utilise pour la base de données
maxlength => limite le nombre de caractères saisie
size => agrandir le champ de texte
required => rend un champ obligatoire
autofocus => placement du curseur dans le champ de texte

les différents type :
type ="text" => champ de texte
type="password" => mot de passe (en point)
type="radio" => cercle pour un choix unique (il faut que vous mettez le même name aux options faisant parties du même groupe.

<input type="radio" name="civilite" value="homme" id="homme" />
<label for="homme">Homme</label>

<br/>

<input type="radio" name="civilite" value="femme" id="femme" />
<label for="femme">Femme</label>

type="checkbox" => carré cocher plusieurs choix 

type="submit" => bouton valider
type="reset" => bouton remise à zéro
type="button" => simple bouton utilisé en JavaScript.
type="image" => bouton avec intégration avec image src
type="eamail" => pour les mails
type="color"=> une palette de couleur
type="search" => champ de recherche
type="tel" => téléphone (mobile)
type="url" =>saisir une adresse url
type="range" => sélectionner une valeur avec un curseur ou slider
type="number" => changement de valeur avec une flèche vers le haut et une vers le bas
il y en a d'autre, si vous voulez les voir à vous de faire une petite recherche :)

Pour avoir un grand champ de texte pour laisser vos commentaires :

<form method="post" action="PageDeTraitement.php">
<p>
       <label for="comment">laissez des commentaires</label>
       <textarea name="comment" id="comment">Vous pouvez écrire ici du texte si vous le voulez pour donner une indication ou exemple</textarea>
</p>
</form>

il se présente sous cette forme :

Pour agrandir le champ :
width => pour la largeur
height => pour la hauteur


<form method="post" action="PageDeTraitement.php">
<p>
       <label for="comment">laissez des commentaires</label>
       <textarea width="250" height="300" name="comment" id="comment">Vous pouvez écrire ici du texte si vous le voulez pour donner une indication ou exemple</textarea>
</p>
</form>

rows => nombre de lignes
cols => nombre de colonnes


<form method="post" action="PageDeTraitement.php">
<p>
       <label for="comment">laissez des commentaires</label>
       <textarea rows="15"  cols="55" name="comment" id="comment">Vous pouvez écrire ici du texte si vous le voulez pour donner une indication ou exemple</textarea>
</p>
</form>

Vous pouvez regouper votre formulaire en zone grâce aux balises <fieldset></fieldset> et y mettre une légende avec les balise <legend></legend>.

Exemple de code : 

<form method="post" action="PageDeTraitement.php"> 
<fieldset>

    <legend>Vos coordonnées</legend>
  
    <p>
        <label for="homme">Vous êtes un homme</label>

        <input type="radio" name="homme" id="homme"/>
      
        <label for="femme">Vous êtes une femme</label>

        <input type="radio" name="femme" id="femme"/>
    </p>
  
  
    <p>
        <label for="nom">Votre nom</label>

        <input type="text" name="nom" id="nom"/>
    </p>


    <p>
        <label for="prenom">Votre prénom</label>          

        <input type="text" name="prenom" id="prenom"/>
    </p>


    <p>
        <label for="adresse">Votre adresse</label>          

        <input type="text" name="adresse" id="adresse"/>
  
        <label for="ville">Votre ville</label>          

        <input type="text" name="ville" id="ville"/>
  
        <label for="CP">Votre CP</label>          

        <input type="text" name="CP" id="CP"/>
    </p>


    <p>
        <label for="mail">Votre mail</label>

        <input type="text" name="mail" id="mail"/>
    </p>

</fieldset>

<fieldset>

    <legend>Choissisez votre pseudo</legend>

    <p>
        <label for="pseudo">Votre pseudo</label>         

        <input type="text" name="pseudo" id="pseudo" required/>
    </p>


    <p>
        <input type="submit" name="valider" value="valider"/>
    </p>

</fieldset>
</form>

Testez tous les codes vous même !