Recopier le code suivant dans un fichier que vous nommerez index.html
.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Les formulaires en HTML</title>
</head>
<body>
<h1>Les formulaires en html</h1>
<!-- Le formulaire ci-dessous -->
<form method="GET">
<input type="text" name="nom" placeholder="Entrer votre nom">
<button type="submit">Envoyer les données</button>
</form>
</body>
</html>
Enregistrer ce fichier puis l’ouvrir dans le navigateur grâce en lançant le serveur fourni par votre professeur: python http_server.py
.
Entrer une valeur dans le formulaire et appuyer sur le bouton pour le soumettre et observer la barre d’adresse du navigateur.
Supprimer les paramètres présents dans l’URL et modifier la méthode du formulaire en POST"
eu lieu de GET
et observer ou sont placés les valeurs du formulaire dans l’onglet réseau de la console de développement.
Poursuivre votre apprentissage actif pour créer un formulaire complet en utilisant ces pages de MDN:
Comment structurer un formulaire HTML? pour ajouter des balises <fieldset>
, <legend>
et <label>
.
Les contrôles de formulaire natifs pour ajouter des entrées:
<input type="button">
,<input type="checkbox">
,<input type="file">
,<input type="hidden">
,<input type="image">
,<input type="password">
,<input type="radio">
,<input type="reset">
,<input type="submit">
,<input type="text">
, ainsi que les attributs readonly
, disabled
, placeholder
, size
, maxlength
, spellcheck
.Les types de champs de formulaire HTML5
Les autres contrôles de formulaire
<textarea>
<select>
.Mise en forme des formulaires HTML
Ne traiter que la mise en forme des éléments dits «bons»:
<form>
<fieldset>
<label>
<output>
<input>
<button>
Pseudo-classes relatives à l’interface utilisateur
required
optionnal
.valid
invalid
.disabled
.checked
.Envoyer et extraire les données des formulaires
Cette partie sera traitée dans le prochain chapitre.