Vous pourrez utiliser les formulaires dans de nombreuse applications :
|
|
|
action="..." : Vous y placerez l'adresse du script qui va traiter les données. |
|
|
enctype="..." : Spécifie le type de données et comment elles seront encodées. |
|
|
methode="..." : Spécifie la méthode de requète HTTP pour assurer le transfert des données duformulaire. |
|
|
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é :   |
|
| Ex : |
Résultat : |
| Compatibilité : |
|
| : Cette balise affiche une légende sur le cadre "fieldset". | |
| Ex : |
Résultat : |
| Compatibilité : |
|
| : Cette balise affiche un label à un élément du formulaire. | |
Ex :
|
Résultat : |
| Compatibilité : |
|
| : 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é : |
|
| : É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.
... 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é : |
|
| ... : 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é : |
|||
| : É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é : |
|
—————
—————
—————
—————
—————
—————
