Les formulaires sont l'épine dorsale de l'interaction utilisateur sur les pages web. Ils permettent aux utilisateurs de partager des informations, d'interagir avec le contenu et de réaliser des actions essentielles, comme des achats ou des recherches, transformant ainsi les sites web statiques en expériences dynamiques.

Ce cours se concentrera sur le balisage des formulaires. À la fin, vous serez capable de créer des formulaires fonctionnels qui améliorent l'interaction utilisateur.

Voici un exemple rapide d'un formulaire simple en action :

<html lang="en">
  <head>
    <style>
      .border-container {
        border-radius: 10px;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }

      .form1 {
        width: 400px;
        background-color: #fff;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .title1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
        border-bottom: 2px solid #ff8a00;
        padding-bottom: 5px;
      }

      .label1 {
        font-size: 16px;
        color: #666;
        display: block;
        margin-top: 20px;
      }

      .input1 {
        width: 340px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .input1:focus,
      .input1:hover {
        outline: none;
        border-color: #ff8a00;
        box-shadow: 0 0 5px rgba(255, 138, 0, 0.5);
      }

      .input1[type="submit"] {
        background-color: #ff8a00;
        color: #fff;
        border: none;
        cursor: pointer;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        width: 100px;
        display: block;
        margin: 30px auto 0 auto;
      }

      .input1[type="submit"]:hover {
        background-color: #d27204;
      }
    </style>
    <link
      href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&amp;family=Montserrat:wght@400;500;600;700&amp;family=Play:wght@400;700&amp;family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;family=Ubuntu+Mono&amp;family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&amp;family=Inter:wght@400;500;600;700&amp;display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 18px;
        font-weight: 400;
        box-sizing: border-box;
        vertical-align: baseline;
      }
      body {
        font-family: "Hind Siliguri", sans-serif;
        line-height: 1;
        height: 100%;
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
        max-width: 550px;
        margin: 0 auto;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body class="body1" style="padding: 1.5px 0">
    <div class="border-container">
      <form class="form1" onsubmit="return false">
        <h3 class="title1">Primary Contact</h3>
        <label class="label1" for="name">First Name</label>
        <input class="input1" type="text" />
        <label class="label1" for="sirname">Last Name</label>
        <input class="input1" type="text" id="sirname" />
        <label class="label1" for="phone">Phone Number</label>
        <input class="input1" type="tel" id="phone" />
        <label class="label1" for="mail">Email</label>
        <input class="input1" type="email" id="mail" />
        <input class="input1" type="submit" value="Submit" />
      </form>
    </div>
  </body>
</html>


Les formulaires comme celui-ci permettent aux utilisateurs de se connecter et d'interagir avec votre site web. Plongeons dans les formulaires fonctionnels !

> Remarque
>
> Ce cours se concentre sur la création de balisage et la mise en forme des éléments de formulaire. À la fin, vous saurez comment permettre l'interaction et l'engagement des utilisateurs.
>
> Cependant, le traitement des données soumises via les formulaires - comme le stockage dans une base de données ou l'utilisation de langages côté serveur tels que JavaScript (Node.js), Python, PHP ou Go - n'est pas couvert dans ce cours.

Apprenez les bases du HTML (HyperText Markup Language), le fondement du développement web. Ce cours convivial pour les débutants couvre les balises, les attributs, les éléments et la structuration des pages web. Acquérez des compétences pratiques dans la création de titres, de paragraphes, de listes, d'images, de liens, de formulaires et de tableaux. Explorez les meilleures pratiques, l'optimisation et l'accessibilité web. Commencez votre parcours de développement web avec HTML.

Explorez le fonctionnement interne du web. Apprenez comment les données circulent à travers les réseaux, découvrez le rôle des protocoles et démêlez les mystères des adresses IP et des noms de domaine. Acquérez une compréhension approfondie de la manière dont les navigateurs web et les serveurs communiquent pour fournir du contenu web.

Découvrez le pouvoir des balises pour structurer le contenu, des titres et paragraphes aux listes et tableaux. Apprenez à améliorer les éléments avec des attributs.

Le cœur de la structure d'un document HTML. Apprenez les composants d'un document HTML, y compris la déclaration doctype, l'en-tête et le corps. Comprenez le but de chaque élément et comment ils contribuent à la structure globale d'une page web.

Rendez une page web plus attrayante à l'aide de médias tels que des images, de l'audio et de la vidéo. Travaillez avec des données tabulaires structurées sous forme de tableaux.

Explorez la polyvalence des formulaires HTML. Apprenez à concevoir des formulaires intuitifs et conviviaux en exploitant des concepts et techniques clés. Découvrez comment les formulaires permettent l'interaction utilisateur et la soumission de données sur les sites web.

HTML Ultime

Introduction aux Formulaires