Les listes
En HTML, les listes sont utilisées pour organiser et structurer le contenu de manière séquentielle ou non séquentielle. Elles permettent de regrouper des éléments associés et de les présenter de manière claire et co. Il existe plusieurs types de listes que vous pouvez utiliser pour structurer et organiser votre contenu. Les trois types de listes les plus couramment utilisés :
1. Liste à puces (unordered list) : Une liste Ã
puces est utilisée pour représenter une liste d'éléments sans ordre spécifique.
Chaque élément de la liste est précédé d'un symbole de puce par défaut. Pour
créer une liste à puces, vous pouvez utiliser l'élément `<ul>` et
l'élément `<li>` pour chaque élément de la liste.
Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body
>
<!-- Liste non ordonnée -->
<ul>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ul>
</body
>
</html>
Utilisez la
propriété `list-style-type` pour spécifier le style de la puce. Vous pouvez
utiliser différentes valeurs pour changer le style, telles que :
- `none`
: Supprime les puces.
- `disc`
: Utilise des cercles pleins comme puces (valeur par défaut).
-
`circle` : Utilise des cercles ouverts comme puces.
-
`square` : Utilise des carrés comme puces.
- `image`
: Utilise une image personnalisée comme puce (en utilisant la propriété
`list-style-image`).
-
`initial` : Rétablit le style par défaut des puces.
- `inherit` : Hérite du style de la liste parente.
Exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<!-- Liste non ordonnée -->
<ul style="list-style-type:square">
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ul>
</body>
</html>
2. Liste ordonnée (ordered list) : Une liste
ordonnée est utilisée pour représenter une liste d'éléments dans un ordre
spécifique. Chaque élément de la liste est précédé d'un numéro ou d'une lettre.
Pour créer une liste ordonnée, vous pouvez utiliser l'élément `<ol>` et
l'élément `<li>` pour chaque élément de la liste.
Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<!-- Liste ordonnée -->
<ol>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ol>
</body>
</html>
Utilisez la propriété `list-style-type` pour
spécifier le style de la puce numérotée. Vous pouvez utiliser différentes
valeurs pour changer le style, telles que :
-
`decimal` : Utilise des chiffres décimaux (valeur par défaut).
-
`decimal-leading-zero` : Utilise des chiffres décimaux avec un zéro initial
(01, 02, ...).
-
`lower-roman` : Utilise des chiffres romains minuscules (i, ii, iii, ...).
-
`upper-roman` : Utilise des chiffres romains majuscules (I, II, III, ...).
-
`lower-alpha` : Utilise des lettres minuscules (a, b, c, ...).
-
`upper-alpha` : Utilise des lettres majuscules (A, B, C, ...).
- `none`
: Supprime les puces numérotées.
-
`initial` : Rétablit le style par défaut des puces numérotées.
-
`inherit` : Hérite du style de la liste parente.
Exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<!-- Liste ordonnée -->
<ol style="list-style-type:upper-alpha" >
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ol>
</body>
</html>
3. Liste de définitions (definition list) : Une liste de définitions est utilisée pour associer des termes à leurs définitions. Chaque terme est précédé d'un élément `<dt>` et chaque définition est placée dans un élément `<dd>`. Pour créer une liste de définitions, vous pouvez utiliser l'élément `<dl>`, l'élément `<dt>` pour les termes et l'élément `<dd>` pour les définitions. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<!-- Liste de définition -->
<dl>
<dt>Terme 1</dt>
<dd>Définition 1</dd>
<dt>Terme 2</dt>
<dd>Définition 2</dd>
<dt>Terme 3</dt>
<dd>Définition 3</dd>
</dl>
</body>
</html>
Ces types de listes peuvent être combinés et
imbriqués pour créer des structures plus complexes. Vous pouvez également
styliser ces listes à l'aide de CSS pour les adapter à votre conception et Ã
vos besoins.
Les Tables
Les tables sont des éléments HTML utilisés pour afficher des données sous forme tabulaire. Elles sont particulièrement utiles pour organiser et présenter des données structurées, telles que des tableaux de données, des plannings, des listes, etc. Les tables en HTML sont créées à l'aide de plusieurs éléments :
1. Balise `<table>` : La balise `<table>` est utilisée pour définir une table. Elle englobe l'ensemble du contenu de la table.
2. Balise `<tr>` : La balise `<tr>` (table row) est utilisée pour définir une ligne dans la table. Chaque ligne de la table est entourée par cette balise.
3.
Balise `<td>` : La balise `<td>` (table data) est utilisée pour
définir une cellule de données à l'intérieur d'une ligne. Chaque cellule doit
être placée à l'intérieur d'une balise `<tr>`. Par exemple :
<tr>
<td>Donnée 1</td>
<td>Donnée 2</td>
</tr>
4.
Balise `<th>` : La balise `<th>` (table header) est utilisée pour
définir une cellule d'en-tête de table. Elle est similaire à la balise
`<td>`, mais elle est généralement utilisée pour la première ligne de la
table pour indiquer les titres des colonnes. Par exemple :
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
Dans cet exemple, deux cellules d'en-tête de table sont créées avec les titres "Nom" et "Âge".
Il est important de noter que les balises `<td>` et `<th>` doivent être placées à l'intérieur d'une balise `<tr>`, et les balises `<tr>` doivent être placées à l'intérieur d'une balise `<table>`.
En
utilisant ces balises, vous pouvez créer une structure de table en HTML en
spécifiant les lignes et les cellules de données. Vous pouvez également ajouter
des attributs supplémentaires pour spécifier la largeur des colonnes, les
styles, etc.
Voici un exemple de structure de base d'une table HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<!--création de table -->
<table border="1">
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Sexe</th>
</tr>
<tr>
<td>Excellent</td>
<td>Luckner</td>
<td>Masculin</td>
</tr>
<tr>
<td>Paul</td>
<td>Antonine</td>
<td>Féminin</td>
</tr>
</table>
</body>
</html>
A l’intérieur de la table dans la balise d’ouverture,
on peut mettre différents attributs par exemple :
align :
Dans HTML, l'attribut "align"
peut être utilisé pour aligner le contenu d'un tableau (élément
`<table>`) ou d'une cellule de tableau (élément `<td>` ou
`<th>`). Cependant, il est important de noter que l'attribut "align"
est déprécié (obsolète) dans la spécification HTML5 et est remplacé par des
méthodes plus modernes et recommandées pour le positionnement et l'alignement
des éléments. Il est préférable d'utiliser des styles CSS pour l'alignement et
la mise en forme des éléments de tableau.
1. Pour un élément `<table>` :
-
`align="left"` : aligne le tableau à gauche.
-
`align="center"` : centre le tableau horizontalement.
-
`align="right"` : aligne le tableau à droite.
2. Pour un élément `<td>` ou `<th>` :
-
`align="left"` : aligne le contenu de la cellule à gauche.
-
`align="center"` : centre le contenu de la cellule horizontalement.
- `align="right"` : aligne le contenu de la cellule à droite.
bordercolor:
L'attribut "bordercolor" en HTML est utilisé pour spécifier la couleur des bordures d'un élément de tableau (élément `<table>`) ou d'une cellule de tableau (élément `<td>` ou `<th>`). Cet attribut permet de définir la couleur des bordures visibles autour de ces éléments.
<table bordercolor="#164B60"> </table >
bordercolorlight:
L'attribut "bordercolorlight" en
HTML était utilisé dans les versions antérieures pour spécifier la couleur de
la bordure claire (partie supérieure et gauche) d'un élément de tableau ou
d'une cellule de tableau.
<table bordercolorlight="#FF6666 "> </table >
cellpadding:
L'attribut "cellpadding" en HTML
était utilisé dans les versions antérieures pour spécifier l'espace intérieur
(padding) des cellules d'un tableau. Cet attribut permettait de définir la
quantité d'espace vide entre le contenu d'une cellule et ses bordures.
<table cellpadding="3">
</table >
cellspacing:
L'attribut "cellspacing" en HTML
est utilisé pour spécifier l'espace entre les cellules d'un tableau. Cet
attribut permet de définir la quantité d'espace vide entre les cellules
adjacentes dans un tableau.
<table cellspacing="3"> </table >
class:
L'attribut "class" en HTML est
utilisé pour attribuer une classe à un élément HTML. La classe est utilisée
pour identifier et regrouper des éléments similaires afin d'appliquer des
styles CSS ou de les cibler avec du code JavaScript.
<table class="nom de la classe">
</table >
border:
L'attribut "border" en HTML est
utilisé pour spécifier l'épaisseur de la bordure autour d'un élément HTML. Cet
attribut est couramment utilisé pour les éléments de tableau tels que les
éléments `<table>`, `<tr>`, `<td>`, `<th>`, etc., afin
de définir la bordure visible autour de ces éléments.
<table border="2">
</table>
Pour fusionner deux cellules dans une table HTML, vous pouvez utiliser l'attribut `colspan` ou `rowspan` sur l'élément `<td>` (cellule de données) que vous souhaitez fusionner. L'attribut `colspan` est utilisé pour fusionner des cellules horizontalement (sur une même ligne), tandis que l'attribut `rowspan` est utilisé pour fusionner des cellules verticalement (sur plusieurs lignes).
Voici un exemple pour illustrer la fusion de
cellules :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<!-- Fusion des cellules -->
<table border="1">
<tr>
<td>Cellule 1</td>
<td colspan="2">Cellules fusionnées</td>
</tr>
<tr>
<td rowspan="2">Cellule fusionnée</td>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
<tr>
<td>Cellule 5</td>
<td>Cellule 6</td>
</tr>
</table>
</body>
</html>
Dans cet exemple, nous avons une table avec
deux lignes et trois colonnes. Pour fusionner des cellules :
- Pour fusionner horizontalement, nous utilisons `colspan="2"` sur la deuxième cellule de la première ligne pour la fusionner avec la cellule suivante.
- Pour fusionner verticalement, nous utilisons
`rowspan="2"` sur la première cellule de la deuxième ligne pour la
fusionner avec la cellule en dessous.
Il est important de noter que lors de la fusion de cellules, les cellules fusionnées occupent l'espace des cellules fusionnées, ce qui peut affecter la structure de la table et le positionnement des autres cellules. Veillez donc à ajuster le nombre de colonnes et de lignes de la table en conséquence.
En utilisant les balises de table, vous pouvez personnaliser davantage la structure et l'apparence de la table en utilisant des attributs, des styles CSS ou des frameworks de conception tels que Bootstrap.
Création des formulaires
Pour créer un formulaire interactif en HTML avec des champs de saisie, des boutons et d'autres éléments, vous pouvez suivre les étapes suivantes :
1. Utilisez la balise `<form>` pour englober l'ensemble du formulaire. Cette balise sera responsable de la soumission et du traitement des données saisies par l'utilisateur.
2. À l'intérieur de la balise `<form>`, ajoutez des éléments de formulaire tels que les champs de saisie, les boutons, les menus déroulants, etc.
- Pour un champ de saisie texte, utilisez la balise `<input>` avec l'attribut `type="text"`.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label for="nom" >Nom
:</label>
<input type="text"
id="nom" name="nom">
</form>
</body>
</html>
Vous pouvez preciser le nombre de caractères maximum acceptés dans le champ avec l'attribut maxlength=" nombre de caractères ".
<input type="text" id="nom" name="nom" maxlength="3">
- Pour un menu déroulant,
utilisez la balise `<select>` avec des balises `<option>` Ã
l'intérieur pour définir les différentes options.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label
for="choix-couleur">Choisir une couleur :</label>
<select
id="choix-couleur" name="choix-couleur">
<option
value="rouge">Rouge</option>
<option value="vert">Vert</option>
<option value="bleu">Bleu</option>
<option value="jaune">Jaune</option>
</select>
</form>
</body>
</html>
-Pour un
champ de saisie de mot de passe (password)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label
for="password">Mot de passe :</label>
<input type="password"
id="password" name="password">
</form>
</body>
</html>
-Pour un
champ de saisi de numéro
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label for="age">Âge
:</label>
<input type="number"
id="age" name="age">
</form>
</body>
</html>
-Pour un
champ date
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label for="date">Date
:</label>
<input type="date"
id="date" name="date">
</form>
</body>
</html>
-Pour un
champ de radio
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label>
<input type="radio"
name="couleur" value="rouge" checked> Rouge
</label>
<label>
<input type="radio" name="couleur" value="vert"> Vert
</label>
<label>
<input type="radio" name="couleur" value="bleu"> Bleu
</label>
</form>
</body>
</html>
Il est important de noter que
l'utilisation de l'attribut `name` est essentielle pour créer un groupe de
boutons radio. Le même `name` doit être attribué à tous les boutons radio qui
doivent appartenir au même groupe.
-Pour un
champ fichier
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label
for="fichier">Sélectionner un fichier :</label >
<input type="file"
id="fichier" name="fichier">
</form>
</body>
</html>
-Pour un
champ de case à crocher
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label for="option1">Option
1 :</label>
<input type="checkbox" id="option1" name="option1" value="valeur1" checked>
<label for="option2">Option
2 :</label>
<input type="checkbox" id="option2" name="option2" value="valeur2">
<label for="option3">Option
3 :</label>
<input type="checkbox"
id="option3" name="option3" value="valeur3">
</form>
</body>
</html>
-Pour créer un champ de saisie textarea en HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label> Description </label>
<textarea rows="4" cols="50" placeholder="Entrez votre message"></textarea>
</form>
</body>
</html>
L'attribut `rows` définit le nombre de lignes
visibles du champ de texte, tandis que l'attribut `cols` définit le nombre de
colonnes visibles.
- Pour un bouton de soumission, utilisez la balise `<input>` avec l'attribut `type="submit"`.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form action="traitement.php"
method="post">
<!-- Champs de saisie ou
autres éléments du formulaire -->
<input
type="submit" value="Valider">
</form>
</html>
-Pour un bouton annuler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<!-- Champs de saisie ou
autres éléments du formulaire -->
<input type="reset" value="Annuler">
</form>
</html>
Le champ de saisie texte est créé avec la balise `<input>` de type "text", avec un identifiant unique (`id`) et un nom (`name`) pour identifier le champ lors de la soumission du formulaire.
Le menu déroulant est créé avec la balise `<select>`, et les différentes options sont définies à l'intérieur des balises `<option>`. Chaque option a une valeur (`value`) et un texte d'affichage.
Le bouton de soumission est créé avec la balise `<input>` de type "submit" et un texte spécifié dans l'attribut `value`.
L'attribut `action` de la balise `<form>` spécifie l'URL où les données du formulaire seront envoyées pour traitement, et l'attribut `method` spécifie la méthode HTTP utilisée pour envoyer les données (par exemple, "POST" ou "GET").
Les ‘’motifs ‘’ (ou "pattern" en anglais)
En HTML, le terme
"motif" (ou "pattern" en anglais) fait référence à une
expression régulière qui peut être utilisée pour spécifier un format ou une
structure particulière attendue dans les données saisies par l'utilisateur dans
un champ de formulaire.
Le motif est défini Ã
l'aide de l'attribut "pattern" dans la balise d'entrée (input) de
formulaire. L'expression régulière définie dans le motif est évaluée côté
client, c'est-à -dire dans le navigateur web de l'utilisateur, pour vérifier si
la valeur saisie dans le champ de formulaire correspond au format requis.
Le rôle principal du
motif en HTML est de valider les données saisies par l'utilisateur et de s'assurer
qu'elles correspondent à un modèle spécifique. Par exemple, si vous souhaitez
que les utilisateurs saisissent un code postal à cinq chiffres, vous pouvez
définir un motif correspondant à cette condition. Si l'utilisateur saisit un
code postal incorrect, le navigateur affichera un message d'erreur indiquant
que la valeur saisie ne correspond pas au motif spécifié.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label> Code postal </label>
<input
type="text" pattern="[0-9]{5}" title="Veuillez saisir
un code postal à cinq chiffres" required> <br><br>
<input type="submit"
value="Envoyer">
</form>
</body>
</html>
- `[0-9]` : Correspond à un seul chiffre
compris entre 0 et 9.
- `{5}` : Spécifie que le motif précédent doit se répéter exactement 5 fois, ce qui permet d'obtenir un code postal à cinq chiffres.
Dans cet exemple,
l'attribut `pattern` est défini avec l'expression régulière `[0-9]{5}`.
L'attribut `title` est utilisé pour afficher un message d'erreur personnalisé
lorsque le motif n'est pas respecté. L'attribut `required` indique que le champ
de saisie est obligatoire.
Voici un exemple d'utilisation d'un motif pour
la saisie de lettres uniquement :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" pattern="[A-Za-z]+" required title="Seulement des lettres">
<br><br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Dans cet exemple, nous utilisons un champ de
saisie pour le nom. L'attribut `pattern` est défini avec l'expression régulière
`[A-Za-z]+`, qui signifie qu'il doit y avoir une ou plusieurs lettres
alphabétiques (majuscules ou minuscules) dans la saisie.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label> Votre email </label>
<input type="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" title="Veuillez saisir une adresse email valide" required><br><br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
- `[a-zA-Z0-9._%+-]+` : Correspond à une ou
plusieurs occurrences de lettres, chiffres, points, tirets bas, pourcentages et
signes plus ou moins, qui peuvent apparaître avant le symbole @ dans l'adresse
email.
- `@` : Représente le symbole @ obligatoire
dans une adresse email.
- `[a-zA-Z0-9.-]+` : Correspond à une ou
plusieurs occurrences de lettres, chiffres, points et tirets, qui peuvent
apparaître après le symbole @.
- `\.` : Représente le symbole point (.) qui
est échappé pour indiquer qu'il doit être interprété littéralement dans
l'expression régulière.
- `[a-zA-Z]{2,}` : Correspond à deux lettres ou plus qui représentent le domaine de l'adresse email.
Dans cet exemple, l'attribut `type` est défini comme "email", ce qui indique au navigateur qu'il s'agit d'un champ de saisie d'adresse email. L'attribut `pattern` est défini avec l'expression régulière mentionnée ci-dessus.
Placeholder
L'attribut "placeholder" en HTML est
utilisé pour afficher un texte de suggestion ou un exemple dans un champ de
saisie (input) avant que l'utilisateur y entre une valeur. Il fournit une
indication visuelle sur le type d'informations attendues dans le champ sans préremplir
ou valider les données.
Voici un exemple d'utilisation de l'attribut
"placeholder" :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<form>
<label> Votre email </label>
<input type="email" placeholder="Entrez votre email" required><br><br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Désactiver un champ
Pour désactiver un champ, il faut utiliser l'attribut "disabled"
<input type="text" disabled value="Ce champ est désactivé">
On peut cacher un champ avec input type="hidden".Il permet d’envoyer des données sans que l’utilisateur ne doive les remplir ou ne les voie.
<label for="id"> Id </label>
<input type="hidden" id="id" />
Ajouter une page contact.html et une page employes.html
Dans la page de contact, créez un formulaire de contact et dans la page employes, créez une liste d'employés dans une table(tableau) avec de cellules: nom complet, Sexe, poste occupé, téléphone. Insérez au moins 5 employés.
Voici un exemple de formulaire
Lorsqu'un
utilisateur remplit un formulaire et le soumet, les données saisies doivent
être envoyées à un serveur pour être traitées. En HTML, cela se fait en
utilisant l'attribut `action` de la balise `<form>` pour spécifier l'URL
ou le script qui recevra les données, et l'attribut `method` pour spécifier la
méthode HTTP à utiliser pour l'envoi des données.
Il
existe deux méthodes couramment utilisées pour l'envoi de données de formulaire
:
1.
Méthode POST : Lorsque la méthode POST est utilisée, les données du formulaire
sont incluses dans le corps de la requête HTTP et ne sont pas visibles dans
l'URL. Cette méthode est généralement utilisée pour l'envoi de données
sensibles, telles que les mots de passe. Par exemple :
<!-- Champs de saisie et autres éléments
du formulaire -->
<input type="submit"
value="Envoyer">
</form>
2.
Méthode GET : Lorsque la méthode GET est utilisée, les données du formulaire
sont concaténées à l'URL en tant que paramètres de requête. Ces paramètres sont
visibles dans l'URL, ce qui peut poser un problème de sécurité si des données
sensibles sont incluses. La méthode GET est généralement utilisée pour les
formulaires simples avec peu de données. Par exemple :
<!-- Champs de saisie et autres éléments
du formulaire -->
<input type="submit"
value="Envoyer">
</form>
Une
fois que l'utilisateur a soumis le formulaire, le navigateur envoie une requête
HTTP au serveur avec les données du formulaire. Le serveur peut ensuite traiter
ces données, les valider, les enregistrer dans une base de données, envoyer une
réponse, etc., en fonction de la logique d'application mise en place.
Pour
récupérer les données du formulaire côté serveur, vous pouvez utiliser des
langages de programmation côté serveur tels que PHP, Python, Node.js, etc. Ces
langages vous permettent d'accéder aux données envoyées par le formulaire et de
les traiter en fonction de vos besoins.
Par
exemple, en utilisant PHP, vous pouvez accéder aux données du formulaire via le
tableau associatif `$_POST` (pour la méthode POST) ou `$_GET` (pour la méthode
GET). Voici un exemple simple en PHP pour récupérer les données du formulaire :
$nom = $_POST['nom'];
$pays = $_POST['pays'];
// Traiter les données du formulaire...
?>
Votre commentaire svp...