Onwebcreations.Net  
Onwebcreations.Net
 
Programmation
Services Gratuits
Codes Sources
Divertissements
   

  Les formulaires Haut de page

L'HTML ne permet pas la récupération et le traitement des données envoyées par un formulaire. En revanche, l'HTML est nécessaire pour afficher les interfaces Web permettant aux Internautes de saisir leurs données.

 

 


  La balise FORM Haut de page

 

L'usage des composants d'un formulaire peut être détournée de son utilisation initial, pour un but purement esthétique ou pratique. Afficher une calculatrice interactive en JavaScript utilise les éléments d'un formulaire, sans pour autant envoyer des données au serveur.

Lorsque les composants d'un formulaire sont utilisés pour envoyer des données au serveur, la balise <form></form> doit délimiter le champs d'action du bouton de validation. En d'autres termes, définir les données entrées par l'utilisateur à envoyer au serveur. En effet, il est possible d'insérer plusieurs formulaires par page. Le bouton de validation ne doit envoyer uniquement les champs concernés par ce formulaire, et non les champs du formulaire voisin.

Lors de l'envoi d'un formulaire, des couples NomDuChamps/Valeur sont envoyés. Lors de leurs réceptions, le NomDuChamps est crucial, permettant ainsi de récupérer la valeur associée, entrée par l'utilisateur dans le champs correspondant.

 

Propriétés de <form>
Propriété Type de valeur Description
name Chaîne

Il s'agit d'un nom pour localiser les composants du formulaire au sein de la page HTML en JavaScript uniquement.

action Chemin relatif ou
absolu d'un fichier
Suite à l'envoi du formulaire, les données sont réceptionnées par un fichier prévu à cet effet.
<form name="NomDuForm" action="MaPage.php">

Composants divers et variés du formulaire..

</form>
 

  Les champs de saisie Haut de page

<input type="text" name="NomDuChamps" size="30" value="Valeur par défaut" maxlength="50">

 

Le paramètre size détermine la largeur du champs en caractères. Ici, le champs permet d'afficher 30 caractères simultanément. Le paramètre value détermine un texte déjà saisi dans le champs au chargement de la page. Il est optionnel. Enfin, maxlength fixe un nombre maximum de caractères à saisir dans le champs. Ici, 50 au maximum.

 


  Les zones de texte Haut de page

<textarea cols="50" rows="10" name="NomDuChamps" maxlength="65535"> Texte par défaut </textarea>

Le paramètre cols indique la largeur de la zone de saisie par le nombre de caractères contenus en une ligne.
Le paramètre rows indique la hauteur de la zone de saisie par le nombre de lignes.

 


  Les listes déroulantes Haut de page

<select name="NomDuChamps">
  <option value="Valeur1"> Libellé 1 </option>
  <option value="Valeur2"> Libellé 2 </option>
  <option value="Valeur3"> Libellé 3 </option>
  <option value="Valeur4"> Libellé 4 </option>
</select>

NomDuChamps prend pour valeur associée une et une seule des valeurs imposées.


  Les boutons d'option Haut de page

Libellé 1
Libellé 2
Libellé 3
<input type="radio" name="NomDuChamps" value="Valeur1"> Libellé 1<br>
<input type="radio" name="NomDuChamps" value="Valeur2"> Libellé 2<br>
<input type="radio" name="NomDuChamps" value="Valeur3"> Libellé 3<br>
NomDuChamps prend pour valeur associée une et une seule des valeurs imposées.

  Les cases à cocher Haut de page

Libellé 1
Libellé 2
Libellé 3
<input type="checkbox" name="NomDuChamps1" value="1"> Libellé 1 <br>
<input type="checkbox" name="NomDuChamps2" value="1"> Libellé 2 <br>
<input type="checkbox" name="NomDuChamps3" value="1"> Libellé 3 <br>

Il ne s'agit pas d'une erreur, tous les paramètres value sont sur 1, c'est à dire sur le vrai "logique". Les trois cases à cocher sont indépendantes. NomDuChamps1 peut prendre deux valeurs possibles. Vrai = 1, ou Faux = 0. Lorsque la case est cochée, NomDuChamps1 prend pour valeur Vrai (1), sinon, Faux (0).

D'une manière générale, NomDuChamps prend pour valeur le paramètre value si la case est cochée, sinon, 0.


  Améliorer la lisibilité des formulaires Haut de page

Vous pouvez regrouper les composants d'un formulaire par thèmes pour améliorer la lisibilité et la compréhension de votre page Web. La balise <FieldSet></FieldSet> est prévue à cet effet.

 

Thématique 1

Sélectionnez une option :

Libellé 1
Libellé 2
Libellé 3
Libellé 4




Choisissez un libellé :

Thématique 2

Cochez quelques cases :

Libellé 1
Libellé 2
Libellé 3
Libellé 4
Libellé 5






<FieldSet>
<legend align="left/center/right"> Thématique </legend>

Composants du formulaire

</FieldSet>

  Insertion d'un bouton d'envoi Haut de page

Le bouton envoyer déclenche un processus qui envoi les données à l'adresse indiquée dans le paramètre action de la balise <form>.


<input type="submit" value=" Texte du bouton d'envoi ">

Par ailleurs, sachez que le bouton est un composant de formulaire au même titre que le champs de saisi. Son usage n'est pas uniquement réservé à l'envoi d'un formulaire.

<input type="button" name="NomDuBouton" value=" Texte du bouton ">

Il est aussi possible d'intégrer une image dans un bouton.



<button name"NomDuBouton" type="button"><img src="img/bouton.gif"> Bouton 
intégrant une image.. </button>

 

 

 
    Haut de page
© Onwebcreations.Net : Programmation & Services Internet
Accessible aussi par : Services-Gratuits-Webmasters.com
Contacter le suppport technique
Internaute(s) actuellement sur le site.