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

CREER UN FORMULAIRE SIMPLE

Les éléments de formulaire

Le HTML met à notre disposition une série d'éléments qui vont nous permettre de créer nos formulaires.

Ces différents éléments vont nous permettre de définir le formulaire en soi, de créer des zones de saisie de texte courtes ou longues, de proposer des zones d'options à nos utilisateurs, etc.

Les formulaires vont être l’occasion pour nous de découvrir de nombreux éléments. Voici la liste des éléments que nous allons étudier dans les parties suivantes :

Elément Définition
form Définit un formulaire
input Définit un champ de données pour l’utilisateur
label Définit une légende pour un élément input
textarea Définit un champ de texte long
select Définit une liste de choix
optgroup Définit un groupe d’options dans une liste
option Définit une option dans une liste
fieldset Permet de regrouper les éléments d’un formulaire en différentes parties
legend Ajoute une légende à un élément fieldset

L’élément form

Pour définir un formulaire en HTML, nous allons utiliser l’élément form qui signifie « formulaire » en anglais.

Cet élément form va avoir besoin de deux attributs pour fonctionner normalement : les attributs method et action.

L’attribut method va indiquer comment doivent être envoyées les données saisies par l’utilisateur. Cet attribut peut prendre deux valeurs : get et post.

Ces deux valeurs vont correspondre aux deux choix que nous avons : soit faire transiter les données par l’URL afin de pouvoir ensuite les traiter, soit les envoyer par HTTP post transaction.

Concrètement, si l’on choisit l’envoi via l’URL (avec la valeur get), nous serons limités dans la quantité de données pouvant être envoyées et surtout les données vont être envoyées en clair. Evitez donc absolument d’utiliser cette méthode si vous demandez des mots de passe ou toute information sensible dans votre formulaire.

En choisissant l’envoi de données via post transaction HTTP (avec la valeur post), nous ne sommes plus limités dans la quantité de données pouvant être envoyées et les données ne sont visibles par personne. C’est donc généralement la méthode que nous utiliserons.

L’attribut action va lui nous servir à préciser l’adresse relative de la page dans laquelle les données doivent être traitées. Ce sera généralement un fichier PHP. Nous n’allons pas créer ce fichier dans ce cours, mais je vous propose pour les exemples suivants de faire comme si ce fichier existait et de l’appeler « traitement.php ».

Voici donc le squelette d’un formulaire HTML :

L’élément form, à la base des formulaires HTML

Les éléments HTML input, textarea et label

L’élément input est l’élément le plus utilisé dans les formulaires HTML. Il va nous permettre de créer la majorité des champs de notre formulaire.

L’élément input se présente sous la forme d’une balise orpheline et possède un attributtype auquel on va pouvoir donner de nombreuses valeurs.

En changeant la valeur de l’attribut type, nous allons changer le type de données qui vont pouvoir être envoyées via notre élément input et allons ainsi par exemple pouvoir créer un champ de saisie de texte mono-ligne, un champ contenant des zones d’options ou encore le bouton permettant l’envoi des données du formulaire rentrées par l’utilisateur.

L’élément textarea va nous permettre de créer un champ de texte multi-lignes, pouvant accueillir par exemple un commentaire ou une présentation d’un utilisateur. Cet élément est également communément utilisé au sein des formulaires HTML.

Finalement, nous allons utiliser l’élément label pour décrire à l’utilisateur ce qu’il doit rentrer dans chaque champ du formulaire. Nous allons lier un label à un élément de formulaire grâce aux attributs for (pour le label) et id (pour l’élément de formulaire).

Il faudra donner strictement la même valeur aux attributs for et id afin de « lier » entre eux un label et un élément de formulaire. Vous pouvez donner la valeur que vous voulez, mais essayez de rester cohérent et logique dans la mesure du possible.

L’attribut name

Nous allons également devoir préciser un attribut name pour chaque élément de notre formulaire demandant des informations à un utilisateur.

Cet attribut name va nous permettre, par la suite, de reconnaître le contexte de chaque donnée envoyée par l’utilisateur afin de pouvoir les traiter efficacement.

En effet, sans attribut name, nous recevrions des données mais ne saurions pas quoi en faire, ne sachant pas à quel champ elles appartiennent.

Cet attribut est donc indispensable. Vous pouvez une nouvelle fois lui attribuer la valeur souhaitée. Seule restriction : cette valeur doit être unique afin de bien pouvoir identifier chaque champ.

Créer un formulaire HTML simple

Nous allons créer notre premier formulaire en HTML. Dans ce formulaire, nous allons demander :

  • Un pseudonyme à l’utilisateur, avec un input de type « text » ;
  • Une présentation, avec un élément textarea.

Nous penserons également à créer un label pour chaque information demandée ainsi qu’un bouton d’envoi des données du formulaire.

Voici comment on va procéder :

Création d’un premier formulaire simple en HTML

Un premier formulaire sans mise en forme CSS

Essayer ce code

Analysons et décortiquons le code ci-dessus. Tout d’abord, on définit un élément form avec ses deux attributs method et action.

Comme méthode d’envoi de données, nous choisissons « post » et nous précisons la page de traitement en valeur de l’attribut action. Evidemment, nous ne savons pas pour le moment créer la page « traitement.php », n’essayez donc pas d’appuyer sur le bouton d’envoi du formulaire, vous aurez une erreur.

A l’intérieur du formulaire, on utilise un premier élément input type="text" pour créer le champ de soumission du pseudo. On pense bien à préciser un attribut name pour cet élément avec une valeur unique par rapport aux autres name des autres éléments.

Ensuite, on crée un premier élément label pour indiquer à l’utilisateur ce qu’il doit remplir dans le champ. Une nouvelle fois, on pense à lier notre label à notre input en utilisant deux attributs for et id et en leur donnant la même valeur.

Pour le champ de présentation, on utilise un élément textarea qui nous permet de gérer des textes longs. Là encore, nous devons préciser un attribut name car le champ va recevoir des données de l’utilisateur et nous créons également un label allant avec notre texarea.

Finalement, nous devons créer le bouton d’envoi de notre formulaire. Pour cela, on utilise input type="submit". On n’utilise pas d’attribut name ici car il n’y a aucune entrée de données par l’utilisateur (ce n’est pas un champ mais un bouton).

Nous n’avons pas besoin non plus de label pour notre bouton d’envoi : nous préférerons indiquer un attribut value et préciser une valeur qui s’affichera dans le bouton même.

Voilà, nous venons de créer notre premier formulaire ensemble. Pour le moment, vous remarquerez que c’est un peu rudimentaire. Pas d’inquiétude, nous allons enrichir ce formulaire au fur et à mesure et finalement le styliser en CSS.

Chapitre précédent

Chapitre suivant