Polycope_HTML3

Année : 2023 / 2024 Filière : 2ème Année Ingénierie Module : HTML / CSS
HTML
HyperText Markup Language
(Formulaires)
Introduction
Les formulaires vont nous permettre de recueillir des données envoyées par nos utilisateurs.
Nous allons par exemple utiliser des formulaires HTML pour créer des formulaires d’inscription, des formulaires de
contact, etc.
Cependant, nous n’allons ni pouvoir traiter les données envoyées par les utilisateurs, ni pouvoir les stocker. Ceci nécessite
de connaître de nouveaux langages informatiques (Javascript, PHP, MySQL...)
La balise "Form"
Pour définir un formulaire en HTML, nous allons utiliser l’élément " Form " qui signifie « formulaire » en anglais.
Cet élément Form a besoin de deux attributs pour fonctionner normalement :
• method : spécifie la méthode HTTP (GET ou POST) à utiliser lors de la soumission des données de formulaire.
+ GET : la quantité de données pouvant être envoyées est limitée. Aussi, les données vont être envoyées en
clair. Donc, à éviter en cas de saisie de mots de passe ou des informations sensibles.
+ POST : n'a pas de limite de quantité de données à transmettre, et les données ne sont pas visibles. C'est la
plus utilisée généralement.
• action : précise l’adresse relative de la page dans laquelle les données doivent être traitées. Ce sera
généralement un fichier PHP.
<body>
<h1> Les Formulaires HTML </h1>
<form method = "POST" action = "traiter.php">
< !--ici on va créer notre formulaire-->
</form>
</body>
Le formulaire peut contenir plusieurs éléments. Tout élément peut avoir un 'id' à utiliser dans les traitements.
Elément "Input"
L’élément 'Input' est l’élément le plus utilisé dans les formulaires HTML. Il va nous permettre de créer la majorité
des champs de notre formulaire.
L’élément 'Input' se présente sous la forme d’une balise orpheline et possède deux attributs :
'name' qui fournit un nom à l'élément et 'type' auquel on va pouvoir donner de nombreuses valeurs.
==> <input type = 'Text'>

définit un champ de saisie d'une ligne de texte
First name: <br>
<input type = "text" name = "firstname" id = "fn"> <br>
Last name: <br>
<input type = "text" name = "lastname" id = "ln">
</form>
1 Réalisé par : Mr ENNAHBAOUI

++ Pour définir un champ de saisie sur plusieurs lignes de texte, on utilise l'élément 'Textarea'.
++ On peut aussi indiquer à l'utilisateur ce qu'il doit remplir avec l'attribut 'Label'.

<label for = "fn"> First name : </label>
<input type = "text" name = "firstname" id = "fn"> <br><br>
<label for = "ln"> Last name : </label>
<input type = "text" name = "lastname" id = "ln"> <br><br>
<label for = "adr"> Adresse : </label>
<textarea name = "adresse" id = "adr"> </textarea>
</form>
==> <input type = 'Password'>

créer un champ de saisie « sécurisé », de telle sorte que ce que l'utilisateur écrit n’est pas affiché en clair mais remplacé
par des astérisques ou des points.
<label for = "ps"> Entrez votre Pseudo : </label>
<input type = "text" name = "pseudo" id = "ps"> <br><br>
<label for = "pwd"> Entrez votre Password : </label>
<input type = "password" name = "password" id = "pwd">
</form>
==> <input type = 'Date'>

créer des champs de formulaire devant recevoir une date. L'affichage diffère selon les navigateurs (ici chrome)
<label for = "dn"> Date Naissance: </label>
<input type = "date" name = "naissance" id = "dn"> <br><br>
==> <input type = 'email'>

créer un champ de formulaire devant recevoir une adresse email. Le navigateur va tester si la valeur rentrée a bien la
forme d’un email (présence d’un @ par exemple).
<label for = "eml"> Votre email: </label>
<input type = "email" name = "email" id = "eml"> <br><br>
==> <input type = 'Number'>

créer une zone de saisie n’acceptant que les nombres. Selon le navigateur utilisé, une barre de défilement de nombres va
apparaître à droite du champ créé.
<label for = "num"> Entrez un Nombre: </label>
<input type = "number" name = "number" id = "num"> <br><br>
==> <input type = 'Radio'>

créer des boutons de type « radio », qui demande à l’utilisateur de choisir une seule option dans une liste proposée.
Attention : chacune des options disponibles au sein d’une même zone de choix doit posséder le même attribut name afin
que l’on sache qu’il s’agit de la même zone de choix.

Genre : <br><br>
<input type = "radio" name = "genre" id = "fm">
<label for = "fm"> Femme </label> <br><br>
<input type = "radio" name = "genre" id = "hm">
<label for = "hm"> Homme </label> <br><br>
==> <input type = 'Checkbox'>

avec "Radio", l’utilisateur devait absolument choisir une et une seule option. Mais avec "Checkbox", l’utilisateur peut ne
choisir aucun choix, un choix ou même plusieurs choix.
Sport Pratiqué : <br><br>

<input type = "checkbox" name = "sport" id = "nat">
<label for = "nat"> Natation </label> <br>
<input type = "checkbox" name = "sport" id = "ten">
<label for = "ten"> Tennis </label> <br>
<input type = "checkbox" name = "sport" id = "foot">
<label for = "foot"> Football </label> <br>
<input type = "checkbox" name = "sport" id = "bx">
<label for = "bx"> Boxe </label> <br>
<input type = "checkbox" name = "sport" id = "equi">
<label for = "equi"> Equitation </label> <br>
<input type = "checkbox" name = "sport" id = "am">
<label for = "am"> Arts Martiaux </label> <br>
==> <input type = 'Submit'>

créer un bouton d’envoi des données du formulaire.
++ Les données seront envoyées via la méthode précisée dans l’attribut "method" de l’élément "form" à l'adresse
précisée en valeur de l’attribut "action" de ce même élément (dans l'exemple à "Traiter.php").
++ L'élément "submit" ne nécessite pas de "name". On utilise un attribut "value" contenant le texte qui sera affiché
au sein de notre bouton.
<label for = "ps"> Entrez votre Pseudo : </label>
<input type = "text" name = "pseudo" id = "ps"> <br><br>
<label for = "pwd"> Entrez votre Password : </label>
<input type = "password" name = "password" id = "ps"> <br>
<input type = "submit" value = "Se Connecter">
</form>
==> <input type = 'File'>

créer un bouton de recherche de fichier "Browse".
Choisir un fichier: <input type= "file" name= "fl" value = "Browse">

Elément "Select"
Les listes vont permettre à un utilisateur de choisir une valeur dans une liste d’options déroulante.
On utilise l'élément "select" pour définir notre liste en soi, et des éléments "option" pour définir chaque élément de
notre liste.
Il faut préciser un attribut "name" pour l'élément select puis des attributs "value" pour chaque élément option.
==> <select name =' '> ..... </select>

Pays de Résidence : <br><br>
<select name = "pays">
<option value = "choix"> Choisir un pays ... </option>
<option value = "USA"> United State </option>
<option value = "canada"> Canada </option>
<option value = "UK"> United Kingdom </option>
<option value = "Finlande"> Finlande </option>
<option value = "Austria"> Austria </option>
<option value = "France"> France </option>
<option value = "Morocco"> Morocco </option>
<option value = "Egypt"> Egypt </option>
<option value = "UAE"> United Arab Emirates </option>
<option value = "Senegal"> Senegal </option>
<option value = "Tanzania"> Tanzania </option>
</select>
==> <optgroup label =' '> ..... </optgroup>

pour grouper différentes options entre elles au sein d’une liste, on utlise l’élément "optgroup"
Pays de Résidence : <br><br>
<select name = "pays">
<option value = "choix"> Choisir un pays ... </option>
<optgroup label = "Amérique">
<option value = "canada"> Canada </option>
</optgroup>
<optgroup label = "Europe">
<option value = "UK"> United Kingdom </option>
<option value = "Finlande"> Finlande </option>
<option value = "Austria"> Austria </option>
<option value = "France"> France </option>
</optgroup>
<optgroup label = "Afrique">
<option value = "Morocco"> Morocco </option>
<option value = "Egypt"> Egypt </option>
<option value = "Senegal"> Senegal </option>
<option value = "Tanzania"> Tanzania </option>
</optgroup>
</select>

Elément "Fieldset"
Cet élément regroupe plusieurs éléments et données dans un frame avec une légende "legend".
"style ="display:inline-block;" : une propriété de style pour faire le autosize du frame "Fieldset" .
"&nbsp" : espace horizontal .
<fieldset style = "display : inline-block;">
<legend> Connection : </legend>
<label for = "lg"> Login : </label> &nbsp &nbsp &nbsp &nbsp
<input type = "text" name = "Login" id = "lg"> <br><br>
<label for = "pwd"> Password : </label> &nbsp
<input type = "password" name = "password" id = "PWD"> <br><br>
<input type = "submit" value = "Se Connecter">
</fieldset>
</form>
Elément "Button"
On peut avoir trois types de boutons :

• Button : définit un bouton cliquable ;
• Submit : définit un bouton qui soumet les données du formulaires ;
• Reset : définit un bouton qui réinitialise les champs du formulaire.
<form action = " " method="get" >

First name: <br><br>
<input type= "text" name="fname"><br><br>
Last name: <br><br>
<input type="text" name="lname"><br><br><br>
<button type = "submit" value = "Submit" > Submit </button>
<button type = "reset" value = "Reset" > Reset </button>
</form>
Elément "Datalist"
spécifie une liste d'options prédéfinies pour un élément <input type = 'list'> .
L'attribut "list" de l'élément <input>, doit faire référence à l'attribut id de l'élément <datalist>.
<label for = "tc"> Type de Carte Bancaire : </label>
<input list = "tc" >
<datalist id = "tc" >
<option value = "Mastercard">
<option value = "VISA">
<option value = "American Express">
<option value = "Diners">
<option value = "Interac">
<option value = "JCB">
</datalist>

Attributs des Formulaires
placeholder : donner un exemple de remplissage pour un champ.

Prénom : &nbsp <input type = "text" name = "prenom" id = "pr" placeholder = " Ex : Pierre " >
Min et Max : préciser les valeurs minimale et maximale attendues pour un champ (utilisés avec Number et Date)
<label for = "m"> Entrez le mois: </label>
<input type = "number" name = "mois" id = "M" min = '1' max = '12'> <br><br>
checked : permettre de pré-cocher (par défaut) une ou plusieurs zones d’option selon le type, radio ou checkbox.
Langues : <br><br>
<input type = "checkbox" name = "langue" id = "fr" checked>
<label for = "fr"> Français </label> <br>
<input type = "checkbox" name = "langue" id = "en" checked>
<label for = "en"> Anglais </label> <br>
<input type = "checkbox" name = "langue" id = "es">
<label for = "es"> Espagnol </label> <br>
<input type = "checkbox" name = "langue" id = "ch" >
<label for = "ch"> chinois </label> <br>
selected : pré-sélectionner (par défaut) une ou plusieurs options dans l'élément select.
Pays : <select name = "pays">
<option value = "canada" selected > Canada </option>
<option value = "Australia"> Austria </option>
<option value = "Mexique"> Mexique </option>
</select>
required : rendre un champ de formulaire obligatoire : si l’utilisateur n’a pas rempli ce champ, le formulaire ne
pourra pas être envoyé.
<label for = "ps"> Pseudo : </label>
<input type = "text" name = "pseudo" id = "ps" required>
readonly : indique que le champ de saisie est en lecture seule (ne peut pas être modifié)
<label for = "tva" > Valeur TVA : </label>
<input type = "text" name = "tva" value = "12%" readonly >
disabled : spécifie que le champ de saisie est inutilisable et non cliquable, et que sa valeur ne sera pas envoyée lors de
la soumission du formulaire.
<label for = "vg" > Régime Alimentaire : </label>
<input type = "text" name = "vg" value = "Végétarien" disabled >
maxlength : spécifie la longueur maximale autorisée pour le champ de saisie.

Password : <input type = "password" name = "pwd" id = "ps" maxlength = "8" >

Polycope_HTML3

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

Polycope_HTML3

Transféré par

Droits d'auteur :

Formats disponibles

Année : 2023 / 2024 Filière : 2ème Année Ingénierie Module : HTML / CSS

==> <input type = 'Text'>

1 Réalisé par : Mr ENNAHBAOUI

<form method = "POST" action = "traiter.php">

==> <input type = 'Password'>

==> <input type = 'Date'>

==> <input type = 'email'>

==> <input type = 'Number'>

==> <input type = 'Radio'>

2 Réalisé par : Mr ENNAHBAOUI

==> <input type = 'Checkbox'>

Sport Pratiqué : <br><br>

==> <input type = 'Submit'>

==> <input type = 'File'>

3 Réalisé par : Mr ENNAHBAOUI

==> <select name =' '> ..... </select>

==> <optgroup label =' '> ..... </optgroup>

4 Réalisé par : Mr ENNAHBAOUI

On peut avoir trois types de boutons :

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

5 Réalisé par : Mr ENNAHBAOUI

Attributs des Formulaires

placeholder : donner un exemple de remplissage pour un champ.

maxlength : spécifie la longueur maximale autorisée pour le champ de saisie.

6 Réalisé par : Mr ENNAHBAOUI

Vous aimerez peut-être aussi