PhpBB Lab Académie

Présenter les quatre champs de texte, la légende et le bouton de Contact en réutilisant les propriétés connues, laisser le message grandir et nettoyer le CSS du projet.

Un formulaire cohérent, sans remplacer ses contrôles

Les quatre champs de texte ont déjà une largeur souple et leurs labels sont sur leur propre ligne. Le groupe radio, la case copie et le bouton conservent leur comportement HTML.

Nous allons terminer leur présentation et organiser styles.css. Le traitement du message n’est toujours pas installé : CSS n’envoie pas d’e-mail et ne rend pas la copie opérationnelle.

1. Présenter uniquement les champs de texte

Dans .champ-texte, ajoutez padding: 0.75rem;, border: 0.125rem solid #64748b;, color: #1f2937; et background-color: #ffffff;.

Toutes ces propriétés ont déjà été utilisées sur les notes ou le tableau. Ici, la classe limite leur portée aux trois inputs de saisie et au textarea. Les radios et copie ne reçoivent ni la largeur de 100% ni ce padding.

La typographie héritée depuis input, textarea, button reste en place. Le contour de focus reste extérieur : ne le supprimez pas quand vous ajoutez une bordure.

2. Donner une hauteur de départ au message, pas un plafond

La propriété min-height fixe une hauteur minimale. Ajoutez textarea { min-height: 8rem; resize: vertical; }.

resize: vertical conserve, dans les navigateurs qui offrent cette interaction, la possibilité d’agrandir la zone verticalement sans déformer la largeur du formulaire. Une hauteur minimale n’est pas une hauteur maximale.

Un textarea natif ne grandit pas automatiquement avec chaque ligne saisie grâce à ces seules règles : il peut garder une barre de défilement interne. Nous n’ajoutons pas de script d’agrandissement automatique dans ce cours.

3. Garder une légende lisible

Dans fieldset, conservez min-width: 0; et ajoutez la bordure #64748b et padding: 1rem;. Dans legend, ajoutez max-width: 100%; et font-weight: bold;.

La question Comment préférez-vous être contacté ? (obligatoire) reste entière. Nous ne raccourcissons pas son texte et ne remplaçons pas ses radios par des éléments dessinés en CSS.

4. Présenter le bouton d’envoi

Le button Envoyer le message reçoit padding: 0.75rem;, border: 0.125rem solid #163b65;, color: #ffffff; et background-color: #163b65;.

La paire blanc sur bleu foncé inverse une paire déjà contrôlée et garde le même ratio de contraste. Pour button:hover, utilisez background-color: #1f2937;. La couleur du texte reste blanche ; il faut donc contrôler aussi cette paire.

Le focus de la leçon précédente reste actif. Un bouton mis en forme n’est pas un traitement serveur : gardez type="submit" mais testez uniquement les comportements HTML avec des valeurs fictives.

5. Ranger sans modifier le comportement

Regroupez la feuille sous des commentaires : Base commune, En-tête et navigation, Titres et contenu, Notes, Image et tableau, Formulaire, Liens et focus, Pied de page, Adaptation.

Conservez un seul bloc ordinaire par sélecteur et gardez la media query mobile-first après la base. Supprimez les essais colorés de p et p.introduction et tout ancien bloc @media max-width du menu. Ne supprimez pas les propriétés qui ont encore un rôle réel.

Les commentaires ne changent pas le rendu. Déplacer une règle en conflit peut, lui, changer le résultat : comparez les trois pages après le rangement. La dernière leçon fournira la correction de référence complète et une vérification finale du même site.

Les règles à compléter pour Contact :

.champ-texte {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem;
    border: 0.125rem solid #64748b;
    color: #1f2937;
    background-color: #ffffff;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

fieldset {
    min-width: 0;
    border: 0.125rem solid #64748b;
    padding: 1rem;
}

legend {
    max-width: 100%;
    font-weight: bold;
}

button {
    padding: 0.75rem;
    border: 0.125rem solid #163b65;
    color: #ffffff;
    background-color: #163b65;
}

button:hover {
    background-color: #1f2937;
}

Étape 1

Complétez .champ-texte avec le padding, la bordure et les couleurs, en conservant sa largeur souple.

Étape 2

Ajoutez min-height: 8rem; et resize: vertical; sur textarea. Vérifiez qu’un long message reste consultable sans déborder de la page.

Étape 3

Complétez fieldset et legend sans supprimer leur structure ou la question.

Étape 4

Présentez button puis button:hover avec les valeurs indiquées. Vérifiez son contour au clavier.

Étape 5

Rangez styles.css avec des commentaires, retirez les essais et vérifiez les trois pages. Le cours se termine ensuite sur ce même projet.

Les quatre saisies, le groupe de choix et le bouton partagent maintenant la présentation du site. Min-height donne un minimum, resize autorise un ajustement vertical disponible selon le navigateur. Une feuille rangée conserve les comportements déjà vérifiés.