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 comentaires
  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

AMELIORER UN FORMULAIRE AVEC LES ATTRIBUTS HTML

De nouveaux attributs pour notre formulaire

Nous avons vu dans les parties précédentes quelques attributs indispensables pour les éléments de formulaire comme par exemple l’attribut name.

Cependant, il existe de nombreux autres attributs HTML disponibles qui vont nous permettre d’améliorer notre formulaire.

Je vous propose de découvrir les attributs suivants :

Attribut Rôle
Autocomplete Permet l'autocomplétion d'un champ
Autofocus Force le focus sur un champ
Min et Max Permettent de définir une valeur minimale et maximale pour un champ
Placeholder Donne des indications sur les données attendues
Checked Pré-coche une case
Selected Pré-sélectionne une option dans une liste
Required Force le remplissage d'un champ

L’attribut HTML autocomplete

L’attribut autocomplete va nous permettre de finir automatiquement le remplissage d’un champ en se basant sur les informations entrées précédemment dans d’autres formulaires par l’utilisateur.

Cet attribut peut prendre deux valeurs : on (le champ va s’auto compléter) et off.

L’attribut autocomplete en HTML

Utilisation d’autocomplete en HTML

Essayer ce code

L’attribut autofocus

L’attribut HTML autofocus va nous permettre d’attribuer automatiquement le focus sur un élément lors du chargement de la page.

Le « focus » correspond au fait d’avoir sa barre d’écriture (le "curseur" de la souris) automatiquement présente dans le champ en question.

Il n’est pas obligatoire de préciser une valeur pour cet attribut, puisqu'il n'en possède qu'une qui est "autofocus". Cependant, une nouvelle fois, je vous conseille de toujours écrire un attribut avec sa valeur afin de bien se rappeler qu'un attribut possède toujours une valeur.

Attribut HTML autofocus

Utilisation de l’attribut HTML autofocus

Essayer ce code

Les attributs HTML min et max

Les attributs HTML min et max vont nous permettre de préciser les valeurs minimale et maximale attendues pour un champ. Ces attributs seront généralement utilisés avec un élément input type="number".

Attributs HTML min et max

Utilisation des attributs HTML min et max

Essayer ce code

L’attribut HTML placeholder

L’attribut HTML placeholder va nous permettre de donner un exemple de remplissage d’un champ dans le champ lui même.

La valeur donnée au placeholder apparaitra sous forme de valeur grise, à moitié transparente.

Dès que l’utilisateur cliquera dans le champ, la valeur du placeholder disparaitra.

Attribut HTML placeholder

Utilisation de l’attribut HTML placeholder

Essayer ce code

Les attributs HTML checked et selected

L’attribut HTML checked va nous permettre respectivement de pré-cocher une ou plusieurs zones d’option selon le type d’élément input utilisé.

L’attribut HTML selected va lui occuper le même rôle pour l’élément select, c’est-à-dire pour les listes d’option de nos formulaires.

Les attributs HTML checked et selected

Utilisation de checked et de selected dans les formulaires HTML

Essayer ce code

L’attribut HTML required

L’attribut HTML required va nous permettre de rendre un champ de formulaire obligatoire : si l’utilisateur n’a pas rempli ce champ, le formulaire ne pourra pas être envoyé.

Une nouvelle fois, il n’est pas strictement nécessaire de préciser de valeur pour cet attribut (comme il n'en possède qu'une, elle est dite implicite).

Attention cependant, cet attribut n’est pas supporté ni par les vieilles version d’Internet Explorer (<9), ni par Safari. Nous utiliserons donc Chrome pour le tester dans ce cours.

Attribut HTML required

Utilisation de l’attribut HTML required

Essayer ce code

Ici, j’ai essayé d’envoyer le formulaire sans remplir de valeur dans mon champ pseudo. Comme celui-ci possède un attribut required, le navigateur n’envoie pas le formulaire et m’indique à la place que je dois remplir le champ en question.

Chapitre précédent

Chapitre suivant