formulaire HTML masqué

Le formulaire HTML est un outil couramment utilisé dans le développement Web, qui permet aux utilisateurs de saisir des données et de les soumettre au serveur. Dans le formulaire, certaines informations doivent être renseignées et affichées par l'utilisateur, tandis que certaines informations doivent être masquées. Cet article explique comment masquer les formulaires HTML.

1. Masquer les éléments du formulaire

Il existe un élément dans les formulaires HTML appelé "éléments cachés". Sa fonction est de masquer les éléments spécifiés sur la page sans affecter la mise en page. Un simple code d'élément masqué est le suivant :

<input type="hidden" name="id" value="123">

Ce code crée une zone de saisie de texte masquée avec un attribut de nom de "id" et un attribut de valeur de "123". Lorsque l'utilisateur soumet le formulaire, la valeur de l'élément masqué est également soumise au serveur.

2. Masquer l'intégralité du formulaire

Parfois, nous devons masquer l'intégralité du formulaire, ce qui peut être réalisé en utilisant CSS. Par exemple, le code suivant masque le formulaire sur la page :

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<style>
#myForm {
  display: none;
}
</style>

Dans le code ci-dessus, le formulaire est contenu dans un élément

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<style>
input[name="password"] {
  display: none;
}
</style>

<form>
  <div id="part1">
    <input type="text" name="name">
    <input type="email" name="email">
    <button onclick="nextPart()">Next</button>
  </div>
  <div id="part2" style="display:none;">
    <input type="password" name="password">
    <button type="submit">Submit</button>
  </div>
</form>

<script>
function nextPart() {
  document.getElementById("part1").style.display = "none";
  document.getElementById("part2").style.display = "block";
}
</script>