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 ff9c23ada1bcecdd1a0fb5d5a0f18437 avec l'identifiant "myForm". Utilisez ensuite CSS pour masquer le formulaire, définissez simplement l'attribut d'affichage sur "aucun".

3. Masquer un certain champ du formulaire

Si vous souhaitez uniquement masquer un ou plusieurs champs du formulaire, vous pouvez utiliser CSS pour y parvenir. Par exemple, le code suivant masque la zone de saisie de texte « mot de passe » sous la forme :

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

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

Dans le code ci-dessus, nous utilisons le sélecteur d'attribut CSS pour sélectionner la zone de saisie avec l'attribut de nom « mot de passe » et définissons son attribut d'affichage Set à "aucun".

4. Masquer une certaine partie du formulaire

Parfois, nous devons diviser le formulaire en plusieurs parties, puis une fois que l'utilisateur a rempli une partie, masquer cette partie et afficher la partie suivante. Ceci peut être réalisé en utilisant JavaScript. Par exemple :

<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>

Dans le code ci-dessus, le formulaire est divisé en deux parties, à savoir deux éléments dc6dce4a544fdca2df29d5ac0ea9906b avec les identifiants "part1" et "part2", où "part2" est initialement défini sur "display:none" ; " pour masquer cette section. Lorsque l'utilisateur clique sur le bouton "Suivant", la fonction nextPart() sera appelée. Cette fonction définit les styles de "part1" et "part2" sur "display:none;" et "display:block;" pour les masquer. et affichage.

Résumé :

Dans le développement Web, certaines informations dans les formulaires HTML doivent être masquées, ce qui peut être réalisé en utilisant des méthodes telles que les éléments cachés, CSS et JavaScript. Les développeurs peuvent choisir la méthode appropriée en fonction des besoins réels pour obtenir une meilleure expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!