Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

ORGANISER ET METTRE EN FORME UN FORMULAIRE

Organiser un formulaire : l’élément HTML fieldset

L’élément HTML fieldset va nous permettre de regrouper certains éléments d’un formulaire HTML entre eux, afin de créer différentes « sections » pour notre formulaire et de le structurer.

Pour donner un nom à chaque section, nous allons utiliser l’élément HTML legend à l’intérieur de fieldset.

Les éléments HTML fieldset et legend

On groupe les éléments de notre formulaire avec fieldset

Essayer ce code

Mettre en forme un formulaire grâce au CSS

Maintenant que nous avons fait le tour des éléments et des attributs indispensables aux formulaires, et que nous savons créer des formulaires assez complets en HTML, nous allons pouvoir mettre en forme nos formulaires avec le CSS.

Pour cela, nous allons commencer par harmoniser nos lignes grâce aux propriétés width et height.

Ensuite, nous allons rajouter des padding et margin pour aérer nos formulaires et nous allons mettre en forme nos textes.

Nous allons également modifier la couleur de fond de nos différentes sections afin de bien les différencier.

Voici donc le code CSS que je vous propose. A votre niveau, vous devriez être capable de comprendre ce code tout seul. Notez que nous utilisons la pseudo classe :hover pour que l’utilisateur puisse mieux se repérer dans le formulaire.

On crée un formulaire complet en HTML

Mise en forme d’un formulaire en CSS

On utilise nos connaissances en CSS pour mettre en forme notre formulaire

Essayer ce code

Chapitre précédent

Chapitre suivant