Créer un formulaire d’inscription accessible est un projet pratique de développement frontend destiné aux personnes qui connaissent les bases des formulaires HTML, de CSS et de JavaScript. Vous créerez une page d’inscription pour un petit atelier artisanal : les visiteurs pourront choisir une séance, remplir le formulaire au clavier et recevoir une confirmation d’un véritable serveur.
Les laboratoires guidés commencent par l’utilisation d’un exemple fonctionnel au clavier, puis développent la mise en page, les retours d’état et l’envoi asynchrone du formulaire. Un défi indépendant applique les mêmes techniques à d’autres séances et relations entre champs. Chaque laboratoire dispose de ses propres fichiers et données préparés.
Ce que vous apprendrez
À la fin du cours, vous saurez :
- associer des libellés visibles, des consignes, des contraintes de saisie et des messages d’erreur pour que les visiteurs sachent quoi renseigner et comment corriger un problème ;
- créer un formulaire adaptatif avec un ordre de lecture clair, un focus clavier visible et des retours qui ne reposent pas uniquement sur la couleur ;
- envoyer des données avec
fetchetasync/await, signaler qu’une requête est en attente et éviter les envois répétés depuis le formulaire pendant ce délai ; - afficher un identifiant de confirmation émis par le serveur uniquement après acceptation de l’inscription et distinguer un champ refusé, une séance complète et une défaillance temporaire du service ;
- conserver les informations saisies après un refus ou un échec, reprendre après la défaillance temporaire étudiée et préserver les inscriptions existantes.
À qui s’adresse ce cours
Ce cours s’adresse aux personnes prêtes à réunir des exercices web individuels pour créer une expérience complète d’inscription à des ateliers.
Prérequis : Connaître les bases des formulaires HTML et de la mise en page CSS, ainsi que les objets, fonctions et événements JavaScript. Vous devez également connaître les bases de la sélection d’éléments du DOM. Vous devez savoir ouvrir et enregistrer les fichiers du projet. Les laboratoires guidés présentent la sémantique des formulaires, la validation, le code asynchrone, les réponses HTTP et la gestion d’état nécessaires avant le défi. React n’est pas nécessaire.
Environnement d’apprentissage : LabEx fournit un environnement de programmation préparé dans le navigateur, un aperçu de page, ainsi qu’une API et une base de données locales fonctionnelles. Les identités et coordonnées utilisées pour les exercices sont fictives. Vous modifiez le frontend ; les libellés du site et les sorties d’exécution restent en anglais.
Questions fréquentes
Vais-je écrire du code ?
Oui. Vous complétez HTML, CSS et JavaScript dans un projet préparé, puis utilisez le formulaire avec de véritables interactions dans le navigateur : saisie au clavier, envoi, refus et reprise après échec.
Vais-je construire le backend ou ses contrôles de sécurité ?
Non. L’API et la base de données sont fournies. Vous faites en sorte que le frontend reflète ce que le serveur a accepté. La validation du navigateur et la désactivation d’un bouton d’envoi n’implémentent pas la sécurité du backend et ne garantissent pas la sûreté des accès concurrents en production.
La réussite du cours certifie-t-elle l’accessibilité ?
Non. Vous pratiquez des comportements précis de libellé, de clavier, de focus et de retour d’information. Une évaluation complète de l’accessibilité dépasse le cadre de ces exercices.
