Formulaires HTML & compléments CSS

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Formulaires HTML & compléments CSS

Notes de cours

  • Sites web dynamiques et envoi de données
    • Rappels sur l’intérêt des sites dynamiques
    • Transmission de données du client au serveur
  • Formulaires HTML
    • Fonctionnement général des formulaires HTML
    • Détails sur des widgets particuliers (boutons radio, select…)
    • Style et validation côté client

Travail personnel

Objectifs

Le TP consiste en un exercice très simple de manipulation des formulaires, et d'un autre un peu plus compliqué, plutôt destiné à celles et ceux qui sont à l'aise ou ont choisi le parcours développement : si ce n'est pas votre cas, pas la peine de trop insister…

Exercice 1 — Formulaire simple

Un corrigé de cet exercice est disponible (archive).

On dispose d'une page qui affiche une table de multiplication. Cette page utilise le paramètre d'URL borne pour contrôler la taille de la table.

  1. Essayer différentes valeurs du paramètre.
  2. Créer une page HTML formulaire.html contenant un formulaire avec un champ texte et un bouton de soumission contenant le texte « Afficher ». Le résultat devrait ressembler à la figure suivante.
    Un formulaire HTML très simple
  3. Ajouter une étiquette au champ texte, qui dit « Taille de la table : ».
    Un formulaire HTML avec un label
    S'assurer qu'un clic sur l'étiquette place le curseur dans le champ texte.
  4. Faire en sorte que lors de la soumission, les données du formulaires soient transmises à l'URL https://ensweb.users.info.unicaen.fr/tp/mult/multiplication.php, en passant le contenu du champ texte comme valeur du paramètre borne.
  5. Optionnel : empêcher l'internaute de soumettre le formulaire si le champ texte ne contient pas un entier positif. De la même façon, empêcher la soumission si l'entier n'est pas entre 1 et 100.

Exercice 2 — Formulaire plus avancé

Un corrigé de cet exercice est disponible (archive).

Un formulaire HTML
  1. Écrire une page HTML contenant un formulaire correspondant au modèle ci-dessus.
  2. Lors d'un clic sur « Envoyer », les données doivent être transmises à l'URL https://ensweb.users.info.unicaen.fr/tp/formulaire-salutation/recup.php par la méthode POST. Cette page attend les données suivantes :
    • nom, une chaîne de caractères quelconque ;
    • couleur, une chaîne de caractères parmi rouge, vert et bleu ;
    • langue, un tableau de chaînes de caractères parmi fr, en et de.
    Faire en sorte que la page fonctionne correctement avec les données entrées par l'internaute dans votre formulaire.
  3. Optionnel (sort du cadre du cours) : refaire la page de récupération, en essayant d'imiter le comportement de celle qu'on vous a donnée.