HTML-Formular ausgeblendet-Front-End-Fragen und Antworten-php.cn

HTML-Formular ausgeblendet

WBOY

Freigeben： 2023-05-15 16:05:07

Original

1312 Leute haben es durchsucht

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.

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

Nach dem Login kopieren

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.

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>

Nach dem Login kopieren

Im obigen Code ist das Formular in einem

-Element mit der ID „myForm“ enthalten. Verwenden Sie dann CSS, um das Formular auszublenden. Setzen Sie einfach das Anzeigeattribut auf „none“.

Ein bestimmtes Feld des Formulars ausblenden

Wenn Sie nur ein oder mehrere Felder im Formular ausblenden möchten, können Sie dies mit CSS erreichen. Der folgende Code verbirgt beispielsweise das Texteingabefeld „Passwort“ in der Form:

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

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

Nach dem Login kopieren

Im obigen Code verwenden wir den CSS-Attributselektor, um das Eingabefeld mit dem Namensattribut „Passwort“ auszuwählen und dessen Anzeigeattribut Set festzulegen auf „keine“.

Einen bestimmten Teil des Formulars ausblenden

Manchmal müssen wir das Formular in mehrere Teile unterteilen und dann, nachdem der Benutzer einen Teil ausgefüllt hat, diesen Teil ausblenden und den nächsten Teil anzeigen. Dies kann mit JavaScript erreicht werden. Beispiel:

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

Nach dem Login kopieren

Im obigen Code ist das Formular in zwei Teile unterteilt, nämlich zwei

-Elemente mit den IDs „part1“ und „part2“, wobei „part2“ zunächst auf „display:none“ gesetzt ist; " um diesen Abschnitt auszublenden. Wenn der Benutzer auf die Schaltfläche „Weiter“ klickt, wird die Funktion nextPart() aufgerufen. Diese Funktion setzt die Stile von „part1“ und „part2“ auf „display:none;“ und „display:block;“. und Anzeige.

Zusammenfassung:

Bei der Webentwicklung müssen einige Informationen in HTML-Formularen ausgeblendet werden, was mithilfe von Methoden wie versteckten Elementen, CSS und JavaScript erreicht werden kann. Entwickler können basierend auf den tatsächlichen Anforderungen die geeignete Methode auswählen, um eine bessere Benutzererfahrung zu erzielen.

Das obige ist der detaillierte Inhalt vonHTML-Formular ausgeblendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!