Exercice débutant en HTML

Académie 🎓
1

Bonjour à tous la communauté ! :wave:
Voici ma version de l’exercice débutant en HTML. Dites-moi ce que vous en pensez, voici le code source de la page :

<!DOCTYPE html>
<html lang="fr">
  <!-- * Basic page elements-->
  <head>
    <title>Exercice débutant HTML</title>
    <meta charset="utf-8" />
  </head>

  <!-- * Body of the page-->
  <body>
    <!-- Page header-->
    <header>
      <h1>Bienvenue sur la page de contact</h1>
      <p>
        Cette page vous permet de contacter Maxence, développeur informatique
        dans le domaine du WEB (front-end).<br />
        Remplissez le formulaire ci-dessous pour le contacter.
      </p>
    </header>

    <!-- * Main element of the page-->
    <main>
      <!-- Page form-->
      <form id="form">
        <!-- TODO Question = name-->
        <div>
          <label for="name">Votre nom :</label>
          <input type="text" id="name" name="user_name" required />
        </div>

        <!-- TODO Question = email-->
        <div>
          <label for="mail">Quelle est votre adresse mail ? :</label>
          <input type="email" id="mail" name="user_mail" required />
        </div>

        <!-- TODO Long text message-->
        <div>
          <label for="msg">Quel est votre message ? :</label>
          <textarea
            id="msg"
            name="user_message"
            required
            minlength="10"
            maxlength="225"
          ></textarea>
        </div>

        <!-- TODO Countries list-->
        <div>
          <label for="countries_select"
            >Quel est votre pays de résidence ? :</label
          >
          <select name="Pays" id="countries_select" required>
            <option value="">Choisissez une option</option>
            <option value="France">France 🥖</option>
            <option value="Espagne">Espagne 🔰</option>
            <option value="Royaume-Uni">Royaume-Uni 👑</option>
            <option value="Italie">Italie 🔹</option>
            <option value="Chine">Chine 💢</option>
            <option value="USA">États-Unis 🗽</option>
          </select>
        </div>

        <!-- TODO Accept the General Terms of Use-->
        <div>
          <label for="GTU"
            >Vous devez accepter les Conditions Générales d'Utilisation pour
            envoyer votre formulaire !</label
          >
          <input type="checkbox" id="GTU" name="user_acceptGTU" required />
        </div>

        <!-- TODO Send button-->
        <button type="submit" name="button" form="form">
          Envoyer le formulaire
        </button>
      </form>
    </main>
  </body>
</html>

:pushpin: PS : Ne prenez pas en compte de ce qui est marqué dans les commentaires, parfois, il y a « TODO », c’est pour moi, ne vous inquiétez pas !

2

C’est propre @Maxence
Tu peux aussi englober tes inputs dans tes inputs pour les termes légaux par exemple, cela permettra de les cocher en cliquant sur leurs textes.

Bon courage pour la suite !

3

Merci pour ta réponse Alexis !

Je n’ai pas compris ce que tu veux dire sur mes inputs. Peux-tu être plus précis s’il te plaît, ou mieux, as-tu un exemple :question:

4

En très gros : tu peux faire :

<label for="GTU">Vous devez accepter les Conditions Générales d'Utilisation pour envoyer votre formulaire !
    <input type="checkbox" id="GTU" name="user_acceptGTU" required />
</label>

Tu auras un autre exemple dans le second paragraphe ici : <label> - HTML (HyperText Markup Language) | MDN

5

Très bien, j’ai compris !
Mes div ne sont pas forcément obligatoires, la balise peut tout intégrer elle-même.

Je prends note ! Merci à toi !