Le langage HTML Balise <form> les formulaires en html

Somaire

Définition et utilisation <form> : formulaire

LES BALISES 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 :

Sélectionner 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

Internet  Explorer Firefox Opera Google Chrome  Safari

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

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

Sélectionner 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

Internet  Explorer Firefox Opera Google Chrome  Safari

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 :

Sélectionner 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

Internet  Explorer Firefox Opera Google Chrome  Safari

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

Sélectionner 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

Internet  Explorer Firefox Opera Google Chrome  Safari

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

Sélectionner 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

Internet  Explorer Firefox Opera Google Chrome  Safari

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

Sélectionner 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

Internet  Explorer Firefox Opera Google Chrome  Safari

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

Sélectionner 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 »

Sélectionner 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

Internet  Explorer Firefox Opera Google Chrome  Safari

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 :

Sélectionner 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

Internet  Explorer Firefox Opera Google Chrome  Safari

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 :

Sélectionner le code

              <form action=" " novalidate="novalidate">
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

Appui de navigateur

Internet  Explorer Firefox Opera Google Chrome  Safari

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 :

Sélectionner le code

              <form action=" " target="_blank">
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

Appui de navigateur

Internet  Explorer Firefox Opera Google Chrome  Safari

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.

Sélectionner 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.

Sélectionner 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 :

Sélectionner 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





Retour à l'accueil du site

Par carabde 10 mars 2014

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    fonction str_replace

    Remplace toutes les occurrences dans une chaîne

    word-spacing

    Augmente ou diminue l'espace entre les mots dans un texte

    border-top-style

    Définit le style de la bordure supérieure



    Rentabilisez efficacement votre site