Le Langage HTML Balise Form

oujood.
com
Accueil
LE LANGAGE HTML BALISE <FORM> LES FORMULAIRES EN HTML

La balise
est utilisé pour créer un formulaire HTML pour les entrées utilisateur
Votre recherche ici | X
Voir le somaire
Somaire
BALISES HTML

<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<area>
<article> Nouveau
<aside> Nouveau
<audio> Nouveau
<b>
<base>
<basefont>
<bdi> Nouveau
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas> Nouveau
<caption>
<center>
<cite>
<code>
<command> Nouveau
<datalist> Nouveau
<dd>
<details> Nouveau
<div>
https://www.oujood.com/balises/balise-form.php 03/11/R5 18 33
Page 1 sur 19
:
<dl>
<dt>
<em>
<embed> Nouveau
<fieldset>
<figcaption> Nouveau
<figure> Nouveau
<font>
<footer> Nouveau
<form>
<frame>
<frameset>
<h1> à <h6>
<head>
<header> Nouveau
<hgroup> Nouveau
<hr>
<html>
<i>
<iframe>
<img>
<input>
<keygen> Nouveau
<label>
<li>
<link>
<map>
<mark> Nouveau
<menu>
<meta>
<meter> Nouveau
<nav> Nouveau
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output> Nouveau
<p>
<param>
<pre>
<progress> Nouveau
<q>
<s>
<script>
<section> Nouveau
<select>
<small>
Page 2 sur 19
:
<source> Nouveau
<span>
<strike>
<strong>
<style>
<sub>
<summary> Nouveau
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time> Nouveau
<title>
<tr>
<track> Nouveau
<tt>
<u>
<ul>
<var>
<video> Nouveau
PLUS...
Mettre le site en ligne

Après avoir créer des pages web, créer votre site et le mettre sur le Web.
Liste de balies HTML
Liste non exhaustive permet de savoir si la balise existe et quels sont ses attributs les plus utilisés
HTML les attributs globaux Liste de tous les attributs globaux des éléments HTML
Liste des propriétés CSS
Liste des propriétés CSS telles que décrites dans les documents de la norme CSS 2
Événements HTML
des événements qui peuvent être insérés dans des éléments HTML XHTML pour générer des
actions.
Les sélecteurs
le tableau résumé de sélecteur de CSS2 .
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.
Page 3 sur 19
:
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
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
N’est pas pris en charge par HTML5.Spécifie les types de fichiers que le
accept MIME_type serveur accepte (et qui peuvent être soumises via un téléchargement de
Page 4 sur 19
:
accept MIME_type serveur accepte (et qui peuvent être soumises via un téléchargement de
fichiers)
accept- Spécifie le codage de caractères qui doivent être utilisés pour l'envoi du
character_set
charset formulaire
Spécifie où envoyer les données du formulaire lors de la soumission d'un

action URL
formulaire
autocomplete on
Spécifie si un formulaire doit avoir saisie semi-automatique activée ou non
Nouveau off
application/x-
www-form-
Spécifie comment les données du formulaire doivent être encodées lors de
urlencoded
enctype la soumission d'une demande au serveur (uniquement pour la méthode = «
multipart/form-
post »)
data
text/plain
get Spécifie la méthode HTTP à utiliser lors de l'envoi des données de

method
post formulaire
name texte Spécifie le nom d'un formulaire
novalidate
novalidate Spécifie que le formulaire ne doit être validé lorsque soumis
Nouveau
_blank
_self Spécifie l'emplacement où afficher la réponse qui est reçue après avoir
target
_parent rempli le formulaire
_top
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
Page 5 sur 19
:
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
Un ou plusieurs types MIME qui peuvent être soumis/transférés.
MIME_type 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 :
<form action="form_action.asp" accept="image/gif,image/jpeg">
Avatar: <input type="file" name="pic" id="pic"><br>
</form>
APPUI DE NAVIGATEUR
Remarque : L'attribut accept n'est pris en charge dans aucun des principaux navigateurs.
Page 6 sur 19
:
L’ATTRIBUT ACCEPT-CHARSET
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
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

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

<form action="" accept-charset="ISO-8859-1">
</form>
APPUI DE NAVIGATEUR
Page 7 sur 19
:
L'attribut accept-charset est pris en charge par tous les navigateurs principaux.

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
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
Où envoyer les données de formulaire lorsque le formulaire est envoyé.
Valeurs possibles :
Une URL absolue - pointe vers un autre site web (comme

URL
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":
<form action="page-traitement.php" method="get">
</form>
Page 8 sur 19
:
</form>
APPUI DE NAVIGATEUR
L'attribut action est pris en charge dans tous les principaux navigateurs.

En HTML5, l'attribut d'action n'est plus nécessaire.
L’ATTRIBUT AUTOCOMPLETE
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
Valeur par défaut. Le navigateur sera automatiquement toutes les valeurs selon que l'utilisateur a entré
sur
avant
L'utilisateur doit entrer une valeur dans chaque domaine pour chaque utilisation. Le navigateur ne
off
complète pas automatiquement les entrées
EXEMPLE UN FORMULAIRE AVEC SAISIE SEMI-AUTOMATIQUE :

<form action="page-traitement.php" autocomplete="on" method="get">
Page 9 sur 19
:
<form action="page-traitement.php" autocomplete="on" method="get">
</form>
APPUI DE NAVIGATEUR
L'attribut autocomplete est pris en charge dans tous les principaux navigateurs, sauf Opera.

L'attribut autocomplete est nouveau en HTML5.
L’ATTRIBUT ENCTYPE
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-
Valeur par défaut. Tous les caractères sont encodés avant envoyé (les espaces sont
www-form-
convertis au "+" symboles et caractères spéciaux sont converties en valeurs ASCII HEX)
urlencoded
multipart/form- Les caractères ne sont pas codés. Cette valeur est requise lorsque vous utilisez des
data 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
Page 10 sur 19
:
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 » :
<form action="page-traitement.php" method="post"

enctype="multipart/form-data">
</form>
APPUI DE NAVIGATEUR
L'attribut enctype est pris en charge dans tous les principaux navigateurs.

AUCUNE.
L’ATTRIBUT METHOD
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
Page 11 sur 19
:
Soumissions de formulaire avec POST
Syntaxe
<form method="get|post">>
Valeurs d'attribut
Valeur Description
Valeur par défaut. Ajoute les données de formulaire à l'URL dans les paires nom/valeur : URL? nom =
get
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 » :
<form action="page-traitement.php" method="get">
</form>
EXEMPLE SOUMETTRE UN FORMULAIRE À L'AIDE DE LA MÉTHODE «

POST »
<form action="page-traitement.php" method="post">
Page 12 sur 19
:
</form>
APPUI DE NAVIGATEUR
L'attribut method est pris en charge dans tous les principaux navigateurs.

AUCUNE.
L’ATTRIBUT NAME
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 :

<form action="page-traitement.php" method="get" name="monFormulaire" >
Page 13 sur 19
:
</form>
APPUI DE NAVIGATEUR
L'attribut name est pris en charge dans tous les principaux navigateurs.

AUCUNE.
DIFFÉRENCES ENTRE HTML ET XHTML

Dans XHTML, l'attribut name est déconseillé. Utilisez l'attribut id.
L’ATTRIBUT NOVALIDATE
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 :
<form action=" " novalidate="novalidate">
Page 14 sur 19
:
<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.

L'attribut novalidate est nouveau en HTML5.
L’ATTRIBUT TARGET
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
Page 15 sur 19
:
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 :
<form action=" " target="_blank">
E-mail: <input type="email" name="user_email">
</form>
APPUI DE NAVIGATEUR
L'attribut target est pris en charge dans tous les principaux navigateurs.

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.
<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>
Page 16 sur 19
:
Formulaire avec cases d'option

Un formulaire avec deux cases d'option et un bouton Envoyer.
<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>
DÉFINITION D'UNE ZONE DE SAISIE DANS UN FORMULAIRE :

<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 à accueil du site
Retour à l'accueil du sitePar carabde 10 mars 2014

MARKETPOWER-IA
Page 17 sur 19
:
Logiciel d'I.A. 100% Français pour lancer son business en ligne
LA MÉTHODE SECRÈTE LIKES SANS FIN SUR FACEBOOK

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans
fin sur Facebook.
GAGNER DE L'ARGENT
GRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
Votre publicité ici
Page 18 sur 19
:
Nous contacter
© 2014 - 2023 , oujood.com

Déclaration de confidentialité
Page 19 sur 19
:

Le Langage HTML Balise Form

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Le Langage HTML Balise Form

Transféré par

Droits d'auteur :

Formats disponibles

oujood.

LE LANGAGE HTML BALISE <FORM> LES FORMULAIRES EN HTML

Votre recherche ici | X

Mettre le site en ligne

DÉFINITION ET UTILISATION <FORM> : FORMULAIRE

EXEMPLE UN FORMULAIRE HTML AVEC DEUX CHAMPS DE SAISIE ET

<form action=" " method="get">

(plus d'exemples en bas de cette page)

DIFFÉRENCES ENTRE HTML 4.01 ET HTML5

DIFFÉRENCES ENTRE HTML ET XHTML

Attribut Valeur Description

Spécifie où envoyer les données du formulaire lors de la soumission d'un

get Spécifie la méthode HTTP à utiliser lors de l'envoi des données de

name texte Spécifie le nom d'un formulaire

Un ou plusieurs types MIME qui peuvent être soumis/transférés.

EXEMPLE SPÉCIFIE QUE LE SERVEUR ACCEPTE UNIQUEMENT LES

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

UTF-8 - codage Unicode des caractères

Exemple Un formulaire avec un attribut accept-charset :

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

DIFFÉRENCES ENTRE HTML 4.01 ET HTML5

Où envoyer les données de formulaire lorsque le formulaire est envoyé.

Une URL absolue - pointe vers un autre site web (comme

EXEMPLE SUR SOUMETTRE, ENVOYER LES DONNÉES DE FORMULAIRE

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

DIFFÉRENCES ENTRE HTML 4.01 ET HTML5

EXEMPLE UN FORMULAIRE AVEC SAISIE SEMI-AUTOMATIQUE :

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

DIFFÉRENCES ENTRE HTML 4.01 ET HTML5

EXEMPLE ENVOYER LES DONNÉES DE FORMULAIRE CODÉES EN «

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

DIFFÉRENCES ENTRE HTML 4.01 ET HTML5

EXEMPLE SOUMETTRE UN FORMULAIRE À L'AIDE DE LA MÉTHODE «

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

EXEMPLE SOUMETTRE UN FORMULAIRE À L'AIDE DE LA MÉTHODE «

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

DIFFÉRENCES ENTRE HTML 4.01 ET HTML5

texte Spécifie le nom du formulaire

EXEMPLE UN FORMULAIRE HTML AVEC UN ATTRIBUT NAME :

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

DIFFÉRENCES ENTRE HTML 4.01 ET HTML5

DIFFÉRENCES ENTRE HTML ET XHTML