Les Formulaires sur HTML

Les formulaires sur HTML est utilisé pour envoyer des informations à une base de données, par exemple formulaire d'inscription :
L'élément pour créer un formulaire dans une page WEB : <form></form>
les attributs de la balise <form> sont :

• method : la méthode de l'envoi des données, on a deux méthodes (POST ou GET);
• action: indique la page à exécuter ou bien la page qui recevra les données envoyées par ce formulaire. 

Pour diviser notre formulaire par groupe, on utilise l'élément <fieldset></fieldset> avec la balise <legend> pour indiquer le nom de groupe.

Après ces deux éléments ci-dessus, on passe aux éléments de l'entrée des données :

l'élément  <input/> avec les attributs suivants :

• type : par cet attribut on détermine le type de l'élément (text, email, url, tel, number, rang,color,date,search), avec deux éléments on va les voir par la suite (chekbox, radio, submit et reset)
• name : on indiquer le nom de la zone, ce nom est plus important dans la page qui recevra les données;
• value : pour indiquer la valeur par défaut (facultatif) 
• size : pour agrandir le champ (facultatif);
• maxlenth : pour déterminer le nombre max de caractère à saisir dans ce champ (facultatif);
• placeholder :  on indique le contenu du champ et cette indication disparaitra dès que le champ recevra le curseur (facultatif) ;
• id : pour lier l'élément input avec son libellé, dès que visiter à cliqué seulement sur le libellé du champ, le curseur se placera dans le champ de saisie.
• autofocus : mettre le curseur automatiquement dans le champ qui contient l'attribut autofocus.

exemple :  
<input type="text" name="pseudo" id="pseudo" autofocus/>
<input type="password" name="motpass" id="motpass" />

NB : chaque élément <input> a besoin d'un libellé pour définir aux visiteurs la valeur à saisir dans le champ,  on utilise la balise <label> avec l'attribut for contenant la même valeur de l'attribut id. 

exemple : <label for="pseudo">Pseudo</label><input type="text" name="pseudo" id="pseudo" autofocus/>


L'élément <textarea></textarea> :
cet élément permettra de saisir plusieurs lignes (un texte longue) comme message, description ...etc.

les attributs utilisé par cet éléments sont les suivants :
name : pour indiquer le nom ;
id : pour le lier avec son libellé;
cols : pour indiquer le nombres des colonnes;
rows : pour indiquer le nombres des lignes.

exemple :  
<label for="description">Description</label>
<textarea name="description" id="description" cols="20" rows="10">votre description sur notre site</textarea>

L'élément <select></select> :
Pour créer une liste déroulante de l'ensemble des valeurs (pour donner à l'utilisateur de choisir son pays par exemple), cet élément est utilisé avec deux balises :
<option> : pour mettre les valeur dans l'élément select ;
<optgroup> : Pour définir les valeur par groupe (facultatif).

exemple :  
<label for="pays">Sélectionner votre pays :</label>
<select name="pays" id="pays">

       <optgroupe label="Afriquia">
                <option value="maroc">maroc</option>
                <option value="egypt">egypt</option>
     </optgroupe>
       <optgroup label="Europe">
                <option value="france">france</option>
                <option value="espagne">espagne</option>
     </optgroup>
</select>
NB : l'attribut value est obligatoire pour cet élément, car il sera utilisé par la page qui recevra les données.

maintenant on parle sur quatre types de l'élément <input> sont :

checkbox

ce type est utilisé pour sélectionner ensembles des valeurs comme les loisirs :
<input type="checkbox" name="voyage" id="voyage" checked/><label for="voyage">Voyage</label><br/>
<input type="checkbox" name="lecture" id="lecture" /><label for="lecture">Lecture</label><br/>
<input type="checkbox" name="sport" id="sport" /><label for="sport">Sport</label><br/>

NB : pour définir une valeur par défaut on met l'attribut checked et la même chose pour le type radio.

radio 

ce type a pour but de sélectionner une seule valeur parmi un groupe de valeur le sexe d'une personne :
<input type="radio" name="sexe" id="masculin" value="masculin" /><label for="masculin">Masculin</label><br/>
<input type="radio" name="sexe" id="feminin" value="feminin"/><label for="feminin">Féminin</label><br/>

NB : ce type demande obligatoirement de donner la même valeur à l'attribut name et des valeurs différents à l'attribut value et l'id

submit
ce type (bouton) pour envoyer les données saisis dans le formulaire à la page définie à l'attribut action de la balise form.
<input type="submit" name="envoyer" value="envoyer"/> 
reset
ce type (bouton) pour effacer les données saisis dans le formulaire.
<input type="submit" name="envoyer" value="envoyer"/>

Télécharger l'exemple