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 :
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 :
<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
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.
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.
<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
