Exercices les formulaires en PHP : Série 03
Exercice les formulaires en PHP : Série 03
-
Objectifs
- Etre capable de créer des formulaires en HTML, et traiter les données entrées par l’utilisateur `a l’aide d’un script PHP.
-
Exercice 01
-
Énoncé
- Créer une petite calculatrice permettant d’effectuer des opérations arithmétiques élémentaires (addition, soustraction, multiplication , division et modulo ainsi que le reste de la division) sur deux opérandes.
- Afficher un formulaire permettant, dans l’ordre, de saisir le premier opérande, puis de sélectionner l’opération parmi une liste (champ SELECT), enfin de saisir le second opérande. Associez à ce formulaire un script pour effectuer le calcul et ensuite pour afficher le résultat après la soumission du formulaire.
- Vérifier qu’on ne peut pas faire une division par 0 (c.à.d. empêcher l’utilisateur de faire la division par 0 en rentrant 0 dans le deuxième champ).
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 02
-
Énoncé
-
HTML
- On souhaite créer un formulaire (représenté par la figure ci-dessous) de paiement
- Ce formulaire est divisé en trois grandes sections:
- Les informations sur la personne ;
- Les informations sur l’adresse ;
- Les informations sur la carte de crédit. :
- Utiliser les attributs et types d’entrée du HTML5 pour créer des champs qui aient du sens, et éviter d’utiliser trop de class et de id inutiles, voici une liste non exhaustive des attributs et types à utiliser :
- email, pour le champ email ;
- tel, pour le champ téléphone ;
- number, pour le numéro de carte et le code de sécurité ;
- required, pour les champs à saisie obligatoire ;
- placeholder, pour donner des indications à l’intérieur de certains champs ;
- autofocus, pour permettre une focalisation sur le premier champ de saisie lorsque la page est chargée.
- Chaque section du formulaire sera insérée dans son propre fieldset. En ce qui concerne les boutons radio qui permettent de choisir le type de carte de crédit, placer ces options dans un autre fieldset imbriqué.
- utiliser une liste ordonnée pour regrouper chaque couple label / input (étiquette du champ / données à y entrer). Cela fournira une sorte de point d’accroche pour appliquer un style de façon sémantique, tout en rendant le formulaire plus lisible s’il est affiché alors que les feuilles de styles ne sont pas appliquées.
-
CSS
- Donner un cadre par défaut, en remettant à zéro les marges et les espacements des éléments, et indiquer une police par défaut pour la page.
- Appliquer un style (background, border-radius, padding, width….) à l’élément form qui entoure les champs de saisie.
- Enlever la bordure de l’élément fieldset, puis ajouter de la marge en bas. Grâce à la pseudo-classe :last-of-type, enlever la marge en bas du dernier fieldset.
- Passer les legend en grand et en gras, et appliquer un text-shadow vert clair pour obtenir un petit effet sympa supplémentaire
- utiliser des compteurs générés automatiquement pour les legend.
- Pour ajouter un compteur à un élément, il faut utiliser l’un des pseudo-éléments :before ou :after pour ajouter du contenu via les feuilles de style. Voici comment faire :
- créer un compteur en utilisant la propriété counter-reset sur l’élément form ;
- appeler le compteur avec la propriété content (en gardant le nom que nous avons créé auparavant) ;
- avec la propriété counter-increment, indiquer qu’à chaque élément qui correspond à notre sélecteur, ce compteur sera augmenté de 1.
- Ajouter des coins arrondis, avec bordure et fond semi-transparents aux éléments liste.
- Pour le reste des tâches essayer d’être fidèle au graphique ci-dessous.
-
PHP
- Validez la page obtenue par un script sur une page séparée « formulaire-valid.php » en testant les contraintes suivantes :
- Tous les champs sont obligatoires.
- Dans le cas où un champ présente un problème (laissé vide par exemple), alors il faut conserver les valeurs déjà saisis au sein de formulaires.
- Si tous les champs sont valides, alors on affichera les informations saisis par l’utilisateur.
-
Figures
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 03
-
Énoncé
- Faire une calculette simple avec deux champs texte, une liste déroulante pour choisir l’addition, la soustraction, la division ou la multiplication et un bouton résultat.
- Il faudrait que le résultat s’affiche dans la même page que le formulaire.
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
