HTML-Formular ausgeblendet

HTML-Formular ist ein häufig verwendetes Tool in der Webentwicklung, mit dem Benutzer Daten eingeben und an den Server senden können. Im Formular müssen einige Informationen vom Benutzer ausgefüllt und angezeigt werden, während andere Informationen ausgeblendet werden müssen. In diesem Artikel erfahren Sie, wie Sie HTML-Formulare ausblenden.

1. Formularelemente ausblenden

In HTML-Formularen gibt es ein Element namens „versteckte Elemente“. Seine Funktion besteht darin, bestimmte Elemente auf der Seite auszublenden, ohne das Seitenlayout zu beeinträchtigen. Ein einfacher Code für versteckte Elemente lautet wie folgt:

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

Dieser Code erstellt ein verstecktes Texteingabefeld mit dem Namensattribut „id“ und dem Wertattribut „123“. Wenn der Benutzer das Formular absendet, wird auch der Wert des ausgeblendeten Elements an den Server übermittelt.

2. Das gesamte Formular ausblenden

Manchmal müssen wir das gesamte Formular ausblenden, was mit CSS erreicht werden kann. Der folgende Code verbirgt beispielsweise das Formular auf der Seite:

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

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

Im obigen Code ist das Formular in einem

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