Compte rendu : Atelier Pratique
PAGE DE GARDE :
Réaliser par : MOHAMMAD SAMMARI
MOUSTAFA AL YARUUDI
Exercice 1:
1) Initialisez la balise
en utilisant la méthode POST et l'action imaginaire traitement_login.php.
2) Ajoutez deux champs de saisie () :
a) Le premier pour le nom d'utilisateur (type="text").
b) Le second pour le mot de passe (type="password").
c) Ajoutez un bouton de soumission () intitulé "Se connecter".
Exercice 1.2 : Le Formulaire d'Inscription Complet
Ajoutez des champs modernes et de choix à votre formulaire.
• Ajoutez un champ d'email (type="email") et un sélecteur de date
(type="date").
• Ajoutez un groupe de boutons radio (name="sexe") pour le choix du
sexe ("Homme", "Femme").
• Ajoutez une case à cocher (type="checkbox") pour accepter les
conditions générales d'utilisation (name="cgu").
• Ajoutez une zone de texte multiligne () pour laisser un commentaire.
Questions de synthèses :
1) - GET :
- Les données sont envoyées dans l’URL (après le ?).
- Visible dans la barre d’adresse.
- Limité en taille de données.
- Moins sécurisé (car visible).
- Utilisé pour des requêtes simples, comme des recherches ou navigation (pas
de modification côté serveur).
- POST :
- Les données sont envoyées dans le corps de la requête.
- Invisible dans l’URL.
- Aucune limite de taille significative.
- Plus sécurisé pour envoyer des infos sensibles (ex: mots de passe).
- Utilisé pour modifier le serveur : enregistrement, inscription, connexion,
etc.
Quand utiliser POST ?
- Lorsque tu envoies des données sensibles.
- Lorsque les données sont trop longues.
- Lorsque tu veux modifier ou enregistrer des infos sur le serveur.
2)
- Balise utilisée : <input type="radio">
- Attribut crucial :
→ name : Tous les boutons radio qui partagent le même nom sont groupés,
et un seul peut être sélectionné dans ce groupe.
Exercice 2.1 : Manipulation du Box Model
Style CSS
Exercice 2.2
Questions de syntheses :
o . Différence entre Slider Margin et
Slider Padding (section "Box Model")
:
- Slider Margin :
- Le margin (marge extérieure) ajoute de l'espace à l'extérieur de
l’élément HTML, entre cet élément et les autres autour de lui.
- Quand vous manipulez le slider Margin, vous déplacez l’élément
loin des autres, sans affecter son contenu ou son contour.
- Slider Padding :
- Le padding (remplissage intérieur) ajoute de l’espace à l’intérieur
de l’élément, entre le contenu et la bordure.
- Manipuler le slider Padding agrandit l’espace autour du texte ou
du contenu interne, sans déplacer l’élément lui-même.
2. Différence entre un sélecteur
- Sélecteur de classe (.ma-classe) :
- Cible tout élément HTML possédant l’attribut class="ma-classe".
- Ex. : .rouge sélectionne tous les éléments avec class="rouge".
- Sélecteur de descendant (div p) :
- Cible tous les éléments <p> qui se trouvent à l’intérieur d’un
<div>.
- Ex. : div p ne sélectionnera un paragraphe que s’il est contenu
dans une div.
Dans l’expérience, on voit que :
- .rouge applique un style à tous les éléments marqués par cette
classe.
- div p applique le style uniquement aux paragraphes dans une div,
et pas aux autres paragraphes.
.3) Positionnement et Mise en Page (Référence : Sections
"Positionnement" et "Flexbox" de l'application web).
3.1)
3.2)
a.
b.
c.
Questions de Synthèse:
1)Lorsque vous appliquez position: absolute; à la boîte cible dans l'outil
Testeur de Positionnement CSS, vous remarquez que :
La "Boîte 3 (Static)" remonte et prend la place de la boîte cible.
Pourquoi ?
Parce qu’un élément avec position: absolute; sort du flux normal du document.
Cela signifie :
- Il n’occupe plus d’espace dans la mise en page.
- Les autres éléments (comme "Boîte 3") se comportent comme si la boîte cible
n’existait pas à cet emplacement.
Ainsi, "Boîte 3", qui est en position static (la valeur par défaut), se repositionne
automatiquement juste après la "Boîte 1", en ignorant la boîte cible.
2)
En Flexbox, les propriétés qui contrôlent l’alignement sont :
- justify-content : contrôle l’alignement sur l’axe principal (horizontal par
défaut).
- align-items : contrôle l’alignement sur l’axe secondaire (vertical par défaut).
Exercice 4.1 : Transition de Couleur
Exercier 4.2 : Animation avec Keyframes:
1)
2,3)