formulaire HTML masqué-Questions et réponses frontales-php.cn

formulaire HTML masqué

WBOY

Libérer： 2023-05-15 16:05:07

original

1346 Les gens l'ont consulté

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.

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

Copier après la connexion

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.

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>

Copier après la connexion

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

avec l'identifiant "myForm". Utilisez ensuite CSS pour masquer le formulaire, définissez simplement l'attribut d'affichage sur "aucun".

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>

Copier après la connexion

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

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>

Copier après la connexion

Dans le code ci-dessus, le formulaire est divisé en deux parties, à savoir deux éléments

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!