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

LES DIFFERENTS TYPES D’INPUT ET LES LISTES

L’élément HTML input

L’élément HTML input va nous permettre de créer toutes sortes de champs de formulaire en changeant la valeur de son attribut type.

Nous allons voir ensemble quelques unes des valeurs les plus courantes de l’attribut type.

Input type = "text"

La valeur text va tout simplement nous permettre de créer un champ de saisie mono-ligne dans lequel l’utilisateur entrera des données.

Nous avons déjà vu cette valeur en action lors de la partie précédente.

Formulaire et input type text

Création d’un champ de formulaire avec input type text

Input type = "password"

La valeur password va nous permettre de créer un champ de saisie « sécurisé » pour par exemple demander un mot de passe à nos utilisateurs.

Lorsque l’utilisateur écrit dans le champ, ce qu’il écrit n’est pas affiché en clair mais est remplacé par des astérisques ou des points.

Utilisation d’input type password

Le champ de saisie est crypté

Input type = "date"

La valeur date va être utilisée pour créer des champs de formulaire devant recevoir une date, comme une date de naissance par exemple.

Selon le navigateur utilisé par vos visiteurs, ceux-ci verront peut être une liste de dates à choisir dans le champ input type="date".

Dans l’illustration ci-dessous, par exemple, j’utilise le navigateur Google Chrome :

Input type date

Input type date crée un champ de formulaire de type date

Input type = "email"

La valeur email de l'attribut type va nous permettre de créer un champ de formulaire devant recevoir une adresse email.

Ainsi, certains navigateurs récents vont tester la valeur rentrée dans le champ par l’utilisateur afin de s’assurer que celle-ci a bien la forme d’un email (présence d’un @ par exemple).

Sur les smartphones, le clavier tactile va changer pour ce champ et afficher des touches comme « .com » ou « @ » par exemple.

Input type email

L’input type email nous permet de créer une zone de saisie pour adresse mail

Input type = "url"

La valeur url de l'attribut type va nous permettre de créer une zone de saisie acceptant une URL.

Cela va être utile si l’on souhaite demander l’adresse de son site web à un utilisateur par exemple.

Tout comme pour la valeur email de type, une validation des données pourra être faîte lors de la soumission du formulaire selon le navigateur utilisé.

De plus, là encore, si un utilisateur utilise un smartphone pour remplir le formulaire, son clavier tactile changera pour ce champ en affichant des touches comme « .com » par exemple.

Input type url

L’input type url nous permet de créer une zone de saisie pour un site web

Input type = "number"

La valeur number de l'attribut type va nous permettre de créer une zone de saisie n’acceptant que les nombres.

Selon le navigateur utilisé, une barre de défilement de nombres va apparaître à droite du champ créé.

Input type number

L’input de type number crée une zone de saisie pour les nombres

Input type = "radio"

La valeur radio va nous permettre de créer des boutons de type « radio », c’est-à-dire de demander à l’utilisateur de choisir une option et une seulement dans une liste proposée.

Pour chaque choix possible, il nous faudra utiliser un nouvel input type="radio".

Attention en revanche, dans ce cas et dans ce cas seulement, chacune des options disponibles au sein d’une même zone de choix doit posséder le même attribut name afin que l’on sache qu’il s’agit de la même zone de choix.

Nous distinguerons donc les différents choix possibles au moyen d’un autre attribut : l’attribut value.

Pour plus d’esthétique, nous allons cette fois-ci placer le label après l’élément input (afin d’avoir nos boutons radio alignés avant le texte descriptif).

Input type radio HTML

L’input de type radio crée des zones d’option

Essayer ce code

Input type = "checkbox"

La valeur checkbox de attribut HTML type ressemble à la valeur radio : elle va également nous permettre de créer des options à choisir par nos visiteurs.

Cependant, cette valeur est moins restrictive que radio : en effet, avec radio, l’utilisateur devait absolument choisir une et une seule option.

Avec checkbox, en revanche, l’utilisateur peut ne choisir aucun choix, un choix ou même plusieurs choix.

Tout comme pour les boutons radio, nous allons devoir utiliser le même attribut name pour chaque groupe d’options et différencier les options en soi avec un attribut value.

Input type checkbox

Utilisation d’un élément HTML input de type checkbox

Essayer ce code

Input type = "submit"

Un élément input type="submit" va nous permettre de créer un bouton d’envoi des données du formulaire.

Les données seront envoyées via la méthode précisée dans l’attribut method de l’élément form à l'adresse précisée en valeur de l’attribut action de ce même élément.

Un élément input type="submit" ne va pas nécessiter de name car ce n’est pas un champ de saisie de données utilisateur. Nous allons utiliser un attribut value contenant en valeur le texte qui sera affiché au sein de notre bouton.

Input type submit

On utilise input type submit pour créer un bouton d'envoi de notre formulaire

Les listes d'options des formulaires HTML

Les listes vont permettre à un utilisateur de choisir une valeur dans une liste d’options déroulante.

Pour créer une liste d’options, nous allons cette fois-ci utiliser l’élément HTML select pour définir notre liste en soi, et des éléments option pour définir chaque élément de notre liste.

Nous devrons préciser un attribut name pour notre élément select puis des attributs value pour chaque élément option.

Les listes dans les formulaires HTML

Utilisation des éléments HTML select et option

Essayer ce code

Nous allons encore pouvoir grouper différentes options entre elles au sein d’une liste grâce à l’élément optgroup (pour « option group », ou « groupe d’options »).

Pour chaque groupe d’options, nous préciserons un attribut label (à ne pas confondre avec l’élément label utilisé précédemment). Celui-ci va tenir le même rôle que l’élément label.

Elément HTML optgroup

On groupe les options de notre liste HTML avec optgroup

Essayer ce code

Chapitre précédent

Chapitre suivant