Le langage HTML Balise <form> les formulaires en html

La balise <form> est utilisée pour créer un formulaire HTML pour la saisie des données utilisateur.

Et donc la balise FORM déclare une zone de formulaire dans laquelle il sera possible pour les utilisateurs de saisir des informations qui pourront par la suite être récupérées côté serveur. 
Il est possible d'utiliser plusieurs formulaires dans une même page à condition de ne pas les imbriquer.

Enfin il est impotant de donner une valeur à l'attribut name du formulaire pour y faire référence.
Les structures utilisées à l'intérieur d'un formulaire pour échanger des informations sont les éléments :<input> , <textarea> , <button> , <select> , <option> , <optgroup> , <fieldset> et , <label> ..

L'élément de formulaire <form> ne doit contenir aucun <form>  imbriqués.

L'élément de formulaire form doit avoir à la fois une balise de début <form>  et une balise de fin </form>  .

L'élément de formulaire <form> est de type block et donc il engendre un retour à la ligne avant et après l’élément.

Exemple Un formulaire HTML avec deux champs de saisie et un  bouton submit :

Exemple :     📋 Copier le code

<form action=" " method="get">
  Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnom"><br>
  <input type="submit" >
</form>

(plus d'exemples en bas de cette page)

Appui de navigateur

La balise <form> est prise en charge dans tous les principaux navigateurs.

Différences entre HTML 4.01 et HTML5

HTML5 a ajouté deux nouveaux attributs : saisie semi-automatique et novalidate et a supprimé l'attribut accept.

Différences entre HTML et XHTML

Dans XHTML, l'attribut name est déconseillé. Utilisez l'attribut d'id global.

Ses attributs

Nouveau : Nouvelle en HTML5.

Attribut	Valeur	Description
accept	MIME_type	N’est pas pris en charge par HTML5.Spécifie les types de fichiers que le serveur accepte (et qui peuvent être soumises via un téléchargement de fichiers)
accept-charset	character_set	Spécifie le codage de caractères qui doivent être utilisés pour l'envoi du formulaire
action	URL	Spécifie où envoyer les données du formulaire lors de la soumission d'un formulaire
autocomplete Nouveau	on off	Spécifie si un formulaire doit avoir saisie semi-automatique activée ou non
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Spécifie comment les données du formulaire doivent être encodées lors de la soumission d'une demande au serveur (uniquement pour la méthode = « post »)
method	get post	Spécifie la méthode HTTP à utiliser lors de l'envoi des données de formulaire
name	texte	Spécifie le nom d'un formulaire
novalidate Nouveau	novalidate	Spécifie que le formulaire ne doit être validé lorsque soumis
target	_blank _self _parent _top	Spécifie l'emplacement où afficher la réponse qui est reçue après avoir rempli le formulaire

Attributs globaux

La balise <form> prend également en charge les  attributs globaux HTML .

Attributs de l'événement

La balise <form> prend également en charge les Attributs de l'événement au format HTML.

 L’attribut accept

Définition et utilisation

Ll'attribut accept  n'est pas prise en charge dans HTML5 pour l’élément <form>.

L'attribut accept spécifie les types de fichiers que le serveur accepte (c'est-à-dire qui peuvent être soumises via un téléchargement de fichiers).

Astuce : N'utilisez pas cet attribut comme un outil de validation. Le téléchargement de fichiers doit être validés sur le serveur.

Syntaxe

<form accept="MIME_type">>

Valeurs d'attribut

Valeur	Description
MIME_type	Un ou plusieurs types MIME qui peuvent être soumis/transférés.  Pour spécifier plusieurs types MIME, séparez les types avec une virgule. Regardez les types MIME IANA pour une liste complète des types MIME standard.

Exemple Spécifie que le serveur accepte uniquement les fichiers gif et jpeg dans le téléchargement des fichiers :

Exemple :     📋 Copier le code

  <form action="form_action.asp" accept="image/gif,image/jpeg">

    Nom: <input type="text" name="nom"><br>

    Prénom: <input type="text" name="pnom"><br>

    Avatar: <input type="file" name="pic" id="pic"><br>

    <input type="submit" >

  </form>

Appui de navigateur

Remarque : L'attribut accept n'est  pris en charge dans aucun des principaux navigateurs.

L’attribut accept-charset 

Définition et utilisation

L'attribut accept-charset spécifie le codage de caractères qui doivent être utilisés pour l'envoi du formulaire.

La valeur par défaut est la chaîne réservée « Inconnu » (indique le codage correspond à l'encodage du document contenant l'élément <form>).

Syntaxe

<form accept-charset="character_set">>

Valeurs d'attribut

Valeur

Description

CHARACTER_SET

Une liste séparée par des espaces d'une ou de plusieurs codages de caractères qui doivent être utilisés pour l'envoi du formulaire. Valeurs communes : UTF-8 - codage Unicode des caractères ISO-8859-1 - caractère codant pour l'alphabet Latin En théorie, n'importe quel codage de caractères peut être utilisé, mais aucun navigateur ne comprend chacun d'eux. Plus largement un codage de caractères est utilisé, plue la chance qu'un navigateur le comprendront..

 Exemple Un formulaire avec un attribut accept-charset :

Exemple :     📋 Copier le code

  <form action="" accept-charset="ISO-8859-1">

  Nom: <input type="text" name="nom"><br>

    Prénom: <input type="text" name="pnom"><br>

    <input type="submit" >

  </form>

Appui de navigateur

L'attribut accept-charset est pris en charge par tous les navigateurs principaux.

Différences entre HTML 4.01 et HTML5

Dans HTML 4.01, la liste des codages de caractères peut être délimitée par des espaces ou des virgules. En HTML5, la liste doit être séparée par des espaces.

L’attribut action 

 Définition et utilisation

L'attribut action spécifie où envoyer les données du formulaire lorsqu'un formulaire est envoyé. En d’autre termes l’attribut action désigne l’URL de la page qui va se charger du traitement de données envoyées par le formulaire.

Syntaxe

<form action="URL">>

Valeurs d'attribut

Valeur	Description
URL	Où envoyer les données de formulaire lorsque le formulaire est envoyé. Valeurs possibles : Une URL absolue - pointe vers un autre site web (comme action="http://www.example.com/example.php)" Une URL relative - pointe vers un fichier dans un site web (comme action="example.php") Ou même action=" " (vide) et qui renvoie ver la page qui contient le formulaire.

Exemple Sur soumettre, envoyer les données de formulaire vers un fichier nommé "page-traitement.php":

Exemple :     📋 Copier le code

  <form action="page-traitement.php" method="get">

  Nom: <input type="text" name="nom"><br>

    Prénom: <input type="text" name="pnom"><br>

    <input type="submit" >

  </form>

Appui de navigateur

L'attribut action est pris en charge dans tous les principaux navigateurs.

Différences entre HTML 4.01 et HTML5

En HTML5, l'attribut d'action n'est plus nécessaire.

L’attribut autocomplete

Définition et utilisation

L'attribut autocomplete spécifie si un formulaire doit avoir la saisie semi-automatique activée ou non.

Lorsque la saisie semi-automatique est activée, le navigateur montre automatiquement toutes les valeurs que l'utilisateur a entré avant.

Astuce : Il est possible d'avoir saisie semi-automatique « on » pour la form et « off » pour des champs d'entrée spécifiques, ou vice versa.

Syntaxe

<form autocomplete="on|off">>

Valeurs d'attribut

Valeur	Description
sur	Valeur par défaut. Le navigateur sera automatiquement toutes les valeurs selon que l'utilisateur a entré avant
off	L'utilisateur doit entrer une valeur dans chaque domaine pour chaque utilisation. Le navigateur ne complète pas automatiquement les entrées

Exemple Un formulaire avec saisie semi-automatique :

Exemple :     📋 Copier le code

  <form action="page-traitement.php" autocomplete="on" method="get">

  Nom: <input type="text" name="nom"><br>

    Prénom: <input type="text" name="pnom"><br>

    <input type="submit" >

  </form>

Appui de navigateur

L'attribut autocomplete est pris en charge dans tous les principaux navigateurs, sauf Opera.

Différences entre HTML 4.01 et HTML5

L'attribut autocomplete est nouveau en HTML5.

L’attribut enctype 

Définition et utilisation

L'attribut enctype spécifie comment les données du formulaire doivent être encodées lors de la soumission d'une demande au serveur.

Remarque : L'attribut enctype peut être utilisée uniquement si method = « post ».

Syntaxe

<form enctype="value">>

Valeurs d'attribut

Valeur	Description
application/x-www-form-urlencoded	Valeur par défaut. Tous les caractères sont encodés avant envoyé (les espaces sont convertis au "+" symboles et caractères spéciaux sont converties en valeurs ASCII HEX)
multipart/form-data	Les caractères ne sont pas codés. Cette valeur est requise lorsque vous utilisez des formulaires qui possèdent un fichier upload control
text/plain	Les espaces sont convertis au symbole « + », mais pas de caractères spéciaux codés

Exemple Envoyer les données de formulaire codées en « multipart/form-data » :

Exemple :     📋 Copier le code

<form action="page-traitement.php" method="post"
enctype="multipart/form-data">
Nom: <input type="text" name="nom"><br>
  Prénom: <input type="text" name="pnom"><br>
  <input type="submit" >
</form>

Appui de navigateur

L'attribut enctype est pris en charge dans tous les principaux navigateurs.

Différences entre HTML 4.01 et HTML5

AUCUNE.

L’attribut method

 Définition et utilisation

L'attribut method spécifie comment envoyer les données du formulaire (les données du formulaire sont envoyée à la page spécifiée dans l'attribut action).

Les données du formulaire peuvent être envoyées comme variables d'URL (avec la méthode = « get ») ou comme HTTP post transaction (avec la méthode = « post »).

Notes sur GET :

Ajoute des données de formulaire dans l'URL dans des paires nom/valeur

La longueur d'URL est limitée (environ 3000 caractères)

Ne jamais utiliser GET pour envoyer des données sensibles ! (ils seront visible dans l'URL)

Utile pour les présentations de forme où un utilisateur souhaite marquer le résultat

GET est préférable pour les données non sécurisées, comme les chaînes de requête dans Google

Notes sur le POST :

Ajoute des données de formulaire dans le corps de la requête HTTP (données ne seront pas montrées dans l'URL)

Ne présente aucune limitation de taille

Soumissions de formulaire avec POST

Syntaxe

<form method="get|post">>

Valeurs d'attribut

Valeur	Description
get	Valeur par défaut. Ajoute les données de formulaire à l'URL dans les paires nom/valeur : URL? nom = value & name = value
post	Envoie les données de formulaire comme une transaction HTTP post

Exemple Soumettre un formulaire à l'aide de la méthode « get » :

Exemple :     📋 Copier le code

  <form action="page-traitement.php" method="get">

  Nom: <input type="text" name="nom"><br>

    Prénom: <input type="text" name="pnom"><br>

    <input type="submit" >

  </form>

Exemple Soumettre un formulaire à l'aide de la méthode « post »

Exemple :     📋 Copier le code

  <form action="page-traitement.php" method="post">

  Nom: <input type="text" name="nom"><br>

    Prénom: <input type="text" name="pnom"><br>

    <input type="submit" >

  </form>

Appui de navigateur

L'attribut method est pris en charge dans tous les principaux navigateurs.

Différences entre HTML 4.01 et HTML5

AUCUNE.

L’attribut name

 Définition et utilisation

L'attribut name spécifie le nom d'un formulaire.

L'attribut name est utilisé pour les éléments de référence dans un JavaScript, ou référence aux données de formulaire après la soumission d'un formulaire.

Syntaxe

<form name="texte">>

Valeurs d'attribut

Valeur	Description
texte	Spécifie le nom du formulaire

Exemple Un formulaire HTML avec un attribut name :

Exemple :     📋 Copier le code

  <form action="page-traitement.php" method="get" name="monFormulaire" >

  Nom: <input type="text" name="nom"><br>

    Prénom: <input type="text" name="pnom"><br>

    <input type="submit" >

  </form>

Appui de navigateur

L'attribut name est pris en charge dans tous les principaux navigateurs.

Différences entre HTML 4.01 et HTML5

AUCUNE.

Différences entre HTML et XHTML

Dans XHTML, l'attribut name est déconseillé. Utilisez l'attribut id.

L’attribut novalidate

Définition et utilisation

L'attribut novalidate est un attribut booléen.

Lorsqu'elle est présente, elle spécifie que les données du formulaire (input) ne doivent pas être validées lorsque le formulaire est soumis.

Syntaxe

<form novalidate="novalidate">>

Remarque : L'attribut novalidate est un attribut booléen et peut être définie de la manière suivante :

< form novalidate >>

< forment novalidate ="novalidate">>

< forment novalidate = "" >

Exemple Indiquer que la forme doit ne pas être validé sur soumettre :

Exemple :     📋 Copier le code

  <form action=" " novalidate="novalidate">

  E-mail: <input type="email" name="user_email">

  <input type="submit">

  </form>

Appui de navigateur

L'attribut novalidate fonctionne dans tous les principaux navigateurs, sauf Internet Explorer et Safari.

Différences entre HTML 4.01 et HTML5

L'attribut novalidate est nouveau en HTML5.

L’attribut target 

Définition et utilisation

L'attribut target spécifie un nom ou un mot clé qui indique où afficher la réponse qui est reçue après avoir rempli le formulaire.

L'attribut target définit un nom de, ou un mot clé pour un cadre de navigation (par exemple onglet, fenêtre ou inline frame).

Syntaxe

<form target="_blank|_self|_parent|_top|framename">>

Valeurs d'attribut

Valeur	Description
_blank	La réponse s'affiche dans une nouvelle fenêtre ou onglet
_self	La réponse s'affiche dans la même trame (c'est la valeur par défaut)
_parent	La réponse est affichée dans le frame parent
_top	La réponse s'affiche dans le corps entier de la fenêtre
frameName	La réponse est affichée dans une iframe nommé frameName

Exemple Afficher la réponse reçue dans une nouvelle fenêtre ou un onglet :

Exemple :     📋 Copier le code

  <form action=" " target="_blank">

  E-mail: <input type="email" name="user_email">

  <input type="submit">

  </form>

Appui de navigateur

L'attribut target est pris en charge dans tous les principaux navigateurs.

Différences entre HTML 4.01 et HTML5

L'attribut target est pris en charge deans HTML5.

L'attribut target est déconseillé dans HTML 4.01.

Remarque : Comme les frames et framests ne sont pas supportées dans HTML5, donc les valeurs _parent et framename sont principalement utilisées avec les iframes.

Plus d’exemples

Formulaire avec cases à cocher
Un formulaire avec deux cases à cocher et un bouton Envoyer.

Exemple :     📋 Copier le code

<form action="" method="get">
  <input type="checkbox" name="vehicle" value="Moto">J’ai une moto<br>
  <input type="checkbox" name="vehicle" value="voiture" checked="checked"> J’ai
une voiture<br>
  <input type="submit">

Formulaire avec cases d'option
Un formulaire avec deux cases d'option et un bouton Envoyer.

Exemple :     📋 Copier le code

<form action="" method="get">
  <input type="radio" name="sexe" value="Homme">Je suis homme<br>
  <input type="radio" name="sexe" value="femme"> Je suis femme<br>
  <input type="submit">

Définition d'une zone de saisie dans un formulaire :

Exemple :     📋 Copier le code

<form name="F_texte" action="Balise-FORM.html" method="get"
target="_self">
<textarea style="font-family:arial; width:180;" rows="4" cols="40">Votre texte ici ...<textarea>
<br>
<input type="submit" value="Valider">
<input type="reset" value="Effacer">
</form>            

Pages en relation avec les formulaires :

Les formulaires en HTML

Manipulation de formulaire en PHP

jQuery sélecteurs des éléments de formulaire

       Vous êtes ici:Balise meta         Retour à la liste des balises