Deux élèves rendent le même écran de connexion

<div class="champ">
  <div>Courriel</div>
  <input type="text" placeholder="Courriel">
</div>
<div class="bouton" onclick="envoyer()">Envoyer</div>

Ce qu'il aurait pu voir.

• La touche Entrée n'envoie rien. Il n'y a pas de <form> : aucun formulaire, donc aucun envoi automatique. Tout repose sur le clic.
• Cliquer sur le mot « Courriel » ne fait rien. Un <div> n'est pas un <label> : il n'est associé à aucun champ.

Ce qu'il ne pouvait pas voir en regardant l'écran.

• Le champ n'a pas de name : même avec un formulaire, rien ne serait transmis. Yanis a « testé » en regardant la page, pas en regardant la requête.
• Le bouton n'en est pas un. Un <div> muni d'un onclick ne reçoit pas le focus au clavier, ne s'active ni par Entrée ni par Espace, et n'est pas annoncé comme bouton par un lecteur d'écran. Il n'est utilisable qu'à la souris, par quelqu'un qui voit.

Un cinquième point, mineur : type="text" au lieu de type="email" prive le navigateur de la vérification élémentaire de forme et, sur mobile, du clavier adapté. Et le placeholder n'est pas un libellé : il disparaît dès la première frappe, au moment précis où l'on voudrait relire ce qu'on est censé saisir.

La version correcte.

<form action="/connexion" method="post">
  <label for="courriel">Courriel</label>
  <input type="email" id="courriel" name="courriel" required>

  <button type="submit">Envoyer</button>
</form>

Ce que montre cet exercice : « ça marche, j'ai testé » veut dire ici « cela ressemble à ce que j'attendais, sur ma machine, avec ma souris ». Trois des quatre défauts ne se voient pas à l'écran. Une page se contrôle dans l'onglet réseau du navigateur — qu'est-ce qui part ? — et au clavier seul, sans toucher la souris.