des centaines d'astuces pour vous faciliter le quotidien


LES FORMULAIRES HTML

LES FORMULAIRES HTML

 

 

                   

 

 

 

 : Cettebalise encapsule le formilaire.
Vous pourrez utiliser les formulaires dans de nombreuse applications :
  • Formulaire mail
  • Formulaire de login
  • Formulaire d'inscription
  • Formulaire de sélection
  • ...
  • Les formulaires sont très souvent associé à des scripts (en PHP, ASP, CGI, Perl,...) pour en traiter le contenu

 

action="..." : Vous y placerez l'adresse du script qui va traiter les données.
Vous pouvez aussi renseigner une adresse mail (ex : mailto:votremail@votredns.tld) dans ce cas les champs remplis seront envoyés par l'intermédiaire de votre client mail.

 

enctype="..." : Spécifie le type de données et comment elles seront encodées.
Les valeurs acceptées sont : "text/plain", multipart/form-data, ....

 

methode="..." : Spécifie la méthode de requète HTTP pour assurer le transfert des données duformulaire.
2 valeurs sont permises : post et get.

 

name="..." : Attribue un nom au formulaire.

target="..." : Défini le mode d'ouverture de la page résultat. Les valeurs possible sont : "_self", "_blank", "_parent" et "_top".
Dans l'exemple ci-dessous , entrez un petit texte de quelques caractères et cliquez sur le bouton"Envoyer".
Ensuite, observez la barre d'adresse de votre navigateur, vous y verrez : "https://www.guide-code-html.com/les-formulaires-html.php?champs=test".
Nous avons utilisé la méthode "get" qui passe les paramètres et leur valeur dans dans l'adresse.
Ex :

			
Résultat :

Dans l'exemple ci-dessous, entrez un petit texte de quelques caractères et cliquez sur le bouton"Envoyer".
Ensuite, observez la barre d'adresse de votre navigateur, vous n'y voyez plus que l'adresse : "https://www.guide-code-html.com/les-formulaires-html.php".
Nous avons utilisé la méthode "post" qui passe les paramètres et leur valeur au travers de la requète HTTP, les variables sont donc discrètes.
Ex :

			
Résultat :

Compatibilité : IE Firefox

 

 


 : Cette balise encapsule les éléments d'un formulaire et entoure graphiquement les balises inclues.
Ex :

			
Résultat :


Compatibilité : IE  

 

  : Cette balise affiche une légende sur le cadre "fieldset".
Ex :

			
Titre du formulaire
Résultat :

Titre du formulaire
Compatibilité : IE Firefox
 : Cette balise affiche un label à un élément du formulaire.
Ex :

  
Titre du formulaire
Résultat :

Titre du formulaire
Compatibilité : IE Firefox
 : Cette balise permet de créer un boutton personnalisable avec un texte approprié tout en lui donnant une fonction type Submit, Reset.
Ex :

			

Résultat :


Compatibilité : IE Firefox
 : Élément d'acquisition du formulaire.
Pas de balise de fermeture !!!!
Sans attribut, cette balise prendra le mode d'acquisition de texte (par défaut).
Il est bon d'utiliser conjointement l'attribut "Name", afin que le contenu soit associé à une variable et ainsi permettre un traitement ultérieur.
type="text" : La balise  prend le mode d'acquisition de texte.
Ex :

Résultat :

type="button" : La balise  prend la forme d'un bouton.
L'attribut "value" y est associé pour inscrire sur le bouton un texte.
N'ayant pas de comportement, il sera associé à un fonction javascript pour déclencher une action ou un évènement.
Ex :

Résultat :

type="checkbox" : La balise  prend le mode de carré cochable.
"name" peut porter le même nom de variable si besoin est.
Ex :
 Choix 1
 Choix 2
Résultat :

 Choix 1
 Choix 2
type="file" : La balise  prend le mode d'explorer de fichier.
Ex :
Résultat :

type="hidden" : La balise  prend le mode variable cachée, c'est à dire que l'on va par ce moyen transmettre une variable non visible qui servira à prendre des décision lors du traitement duformulaire.
Ex :
Résultat :

Cette balise associée à l'attribut "hidden" ne donne aucun resultat visible. Par contre, si vousregardz le code source de la page, vous la retrouverez.
type="image" : La balise  prend la même fonction que "submit".
Il a l'avantage de pouvoir personnaliser le bouton.
Ex :

Résultat :

type="password" : La balise  prend le mode d'acquisition de mot de passe.
Les caractères entrés dans cette case seront remplacés par "*" pour garder la discrétion.
Ex :

Résultat :

type="radio" : La balise  prend le mode de sélection d option de type "radio".
Une seule option ne peut être sélectionnée.
"name" doit porter le même nom de variable.
Ex :
 Choix 1
 Choix 2
Résultat :

 Choix 1
 Choix 2
type="reset" : La balise  prend le mode effacement de tous les champs du formulaire
Tapez quelques caractères ensuite cliquez le bouton "Effacer" ou "Reset". Le champs rempli s'effacera.
Ex :

			
Résultat :

type="submit" : La balise  prend le mode d'envoi de tous les champs du formulaire vers le serveur pour traitement.
Ex :
Résultat :

AUTRES ATTIBUTS DE LA BALISE "INPUT"

accept="..." : Spécifie le type de contenu pouvant être traité par le formulaire.

S'applique seulement au "type" : File.
Ex. :

... accept=" liste de type de fichier accepté" ...
checked : S'applique aux "type" : Checkbox et Radio. Lorsque cet attribut est placé l'option est sélectionnée.
Ex. :
... checked ...
maxlength="..." : Défini le nombre de caractères maximum qui peut être entré par un utilisateur.
S'applique aux "type" : Password, Text.
Ex. :
... maxlength="30" ...
name="..." : Donne un nom de variable à la balise  utile lors de la transmission au server pour traitement.
S'applique aux "type" : Button, Checkbox, File, Hidden, Image, Password, Radio, Text.
Ex. :
... name="test" ...
size="..." : Exprimé en nombre de caractères, défini  la taille de la boîte d'acquisition.
S'applique aux "type" : Password, Text.
Ex. :
... size="30" ...
src="..." : Spécifie l'URL de l'image qui sera utilisée comme bouton.
S'applique seulement au "type" : Image.
Ex. :
... src="URL de l'image" ...
value="..." : Précharge un contenu dans le champ concerné de la balise 
S'applique aux "type" : Button, Checkbox, File, Hidden, Password, Radio, Reset, Submit, Text.
Ex. :
... value="contenu valeur" ...
Compatibilité : IE Firefox
... : Défini les options ou item dans un menu à choix multiple (aussi appeléliste déroulante).
Cette balise doit être encapsulée dans des balises
selected : Préselectionne l'option ou item du menu à choix multiple ou liste déroulante.
Ex :

			
Résultat :
 
value="..." : Attribue un contenu à la balise sélectionnée, utile lors de la transmission au server pour traitement.
Ex. :
... value="test" ...
Compatibilité : IE Firefox
 : Élément d'acquisition du formulaire.
Cette balise génère un menu à choix multiple, elle est aussi appelée liste déroulante.
Cette balise doit encapsuler des balises pour qu'elle puisse afficher une liste.
multiple : Permet à l'utilisateur de pouvoir sélectionner une ou plusieurs options de la liste déroulante.
Ex. :
... multiple ...
name="..." : Attribue un nom de variable à la balise
size="..." : En l'absence de cet attribut, "size" est forcé à la valeur "1" (valeur par défaut).
Si "size" a pour valeur "1", la fenêtre ne présentera qu'une option. Dès que vous cliquerez la fenêtre une liste déroulante s'affichera. L'utilsateur pourra sélectionner l'option souhaitée.
Ex :

Résultat :

Si "size" a une valeur supérieure à "1", la fenêtre présentera un nombre d'option égal à la valeur de "size". Si le nombre d'options est supérieur à "size" des boutons pour monter et descendre parmi les options apparaîtront.
Ex :

Résultat :

Compatibilité : IE Firefox