Cours HTML/CSS – 15 Octobre 2025

Introduction

Prochain cours : évaluation.

Au programme d’aujourd’hui : les formulaires, la position CSS, et peut-être une introduction à Flexbox.

Les formulaires

Au programme aujourd’hui : formulaire, CSS position, et peut-être Flexbox.

Zones de saisie et backend

Les zones de saisie permettent de collecter des données. Ces données sont envoyées à un serveur (backend), qui les traite. Pour l’instant, nous n’aborderons pas le backend.

L’élément <form>

Le formulaire contient tous les champs de saisie. Les attributs principaux :

• action → indique où les données doivent être envoyées.
• method → fortement recommandé pour éviter d’afficher les données dans l’URL (ex. POST).
  • GET → envoie les données dans l’URL (moins sécurisé, utile pour recherches).
  • POST → envoie les données dans le corps de la requête (plus sûr).
• enctype="multipart/form-data" → utilisé si le formulaire contient autre chose que du texte (ex. fichiers).

Les champs de saisie

On précise le type du champ pour aider le navigateur :

<input type="email">
<input type="password">
<input type="number">
<input type="date">

Le type indique ce qui est attendu et permet d’éviter les erreurs.

Bouton submit

Le bouton submit permet de soumettre le formulaire. ⚠️ Attention à ne pas confondre button et input type="submit" :

<input type="submit" value="OK">

L’attribut value définit le texte affiché sur le bouton.

Attribut hidden

hidden permet de masquer des éléments à l’utilisateur, pour confort visuel ou pour transmettre des informations inutiles à l’utilisateur final. ⚠️ Ce n’est pas un mécanisme de sécurité.

<input type="hidden" name="info" value="valeur">

Checkbox et radio

<input type="checkbox"> <!-- choix multiple -->
<input type="radio">    <!-- choix unique -->

Placeholder et label

Le placeholder guide l’utilisateur mais n’est pas suffisant : il disparaît si l’utilisateur tape un espace et peut être difficile à lire (gris clair sur fond blanc). Exemple de format attendu : jj/mm/aaaa.

<label for="texte">Texte :</label>
<input type="text" id="texte" name="texte" placeholder="jj/mm/aaaa">

L’attribut name nomme la valeur pour le backend. Pas besoin de label pour les boutons submit.

Fieldset et legend

Ces balises permettent de regrouper des champs pour une meilleure organisation et pour faciliter le traitement côté backend :

<fieldset>
    <legend>Informations personnelles</legend>
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom">
</fieldset>

Position CSS

Il faut comprendre le flux : la manière dont les éléments s’affichent et s’enchaînent par défaut dans la page.

La propriété position permet de modifier le comportement d’un élément dans ce flux.

Position relative

.element {
    position: relative;
    top: 10px;
    left: 0;
}

➡️ Cela déplace l’élément par rapport à sa position d’origine dans le flux (ici, 10px vers le bas).

Position absolute

.element {
    position: absolute;
    top: 10px;
}

Relative et absolute fonctionnent ensemble :

• absolute positionne l’élément par rapport à son premier parent “positionné”.
• Si aucun parent n’est positionné, le repère devient le document html.
• relative peut être utilisée sans décalage, simplement pour créer un repère pour un élément absolute.

Ce type de positionnement est souvent un dernier recours : il existe d’autres méthodes plus modernes pour la mise en page.

Position fixed

fixed retire aussi l’élément du flux, mais le positionne par rapport à la fenêtre (viewport).

Exemple typique : un bouton “Retour en haut” positionné à 10px de la droite et 100px du haut.

.back-to-top {
    position: fixed;
    right: 10px;
    top: 100px;
}

➡️ Les valeurs de top, left, right, bottom peuvent être négatives.

Position sticky

sticky est un positionnement hybride entre relative et fixed.

⚠️ À utiliser avec précaution : un header complet en sticky n’est pas recommandé. De plus, une nav sticky doit disposer d’un espace libre pour pouvoir “coller” au scroll.

Voir experimentations dans le projet html2 : lien vers projet html 2

Tableau d’explication détaillé sur les sélecteurs CSS

Introduction à Flexbox

Faute de temps, Flexbox n’a été qu’évoqué rapidement. Cependant :

• Avec Chrome (ou tout autre navigateur moderne), on peut utiliser l’inspecteur de code pour tester et modifier les attributs de flex en temps réel.
• Flexbox permet de positionner, aligner et distribuer les éléments de manière dynamique et flexible.