So rufen Sie Werte aus allen Arten von HTML-Eingaben in JavaScript ab

In diesem Blog wird erläutert, wie Sie mithilfe von JavaScript Werte aus verschiedenen Eingabetypen in einem HTML-Formular anhand ihrer ID abrufen.

Eingabetypen und Abrufmethoden

1. Texteingabe

• HTML-Code:

  <input type="text">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const textValue = document.getElementById('textInput').value;

• Erklärung: Ruft den im Texteingabefeld eingegebenen Wert ab.

---

2. E-Mail-Eingabe

• HTML-Code:

  <input type="email">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const emailValue = document.getElementById('emailInput').value;

• Erklärung: Ruft die vom Benutzer eingegebene E-Mail-Adresse ab. Dieses Feld erwartet ein gültiges E-Mail-Format.

---

3. Passworteingabe

• HTML-Code:

  <input type="password">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const passwordValue = document.getElementById('passwordInput').value;

• Erklärung: Ruft den im Passwort-Eingabefeld eingegebenen Text ab.

---

4. Zahleneingabe

• HTML-Code:

  <input type="number">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const numberValue = document.getElementById('numberInput').value;

• Erklärung: Ruft die im Eingabefeld eingegebene Nummer ab.

---

5. Datumseingabe

• HTML-Code:

  <input type="date">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const dateValue = document.getElementById('dateInput').value;

• Erklärung: Ruft das ausgewählte Datum im Format JJJJ-MM-TT ab.

---

6. Optionsfeld

• HTML-Code:

  <input type="radio">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const radioValue = document.querySelector('input[name="radioInput"]:checked')?.value || null;

• Erklärung: Ruft den Wert des ausgewählten Optionsfelds ab. Wenn keine ausgewählt ist, wird null zurückgegeben.

---

7. Kontrollkästchen

• HTML-Code:

  <input type="checkbox">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const checkboxValues = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);

• Erklärung: Ruft alle ausgewählten Kontrollkästchenwerte als Array ab. Wenn keine Kontrollkästchen aktiviert sind, wird ein leeres Array zurückgegeben.

---

8. Dropdown (Auswählen)

• HTML-Code:

  <select>

• JavaScript Code:

  const dropdownValue = document.getElementById('dropdownInput').value;

• Erklärung: Ruft den ausgewählten Wert aus dem Dropdown-Menü ab.

---

9. Textbereich

• HTML-Code:

  <textarea>

• JavaScript Code:

  const textareaValue = document.getElementById('textareaInput').value;

• Erklärung: Ruft den im Textbereichsfeld eingegebenen Text ab.

---

Beispiel: Komplettes Skript

Hier ist ein Beispiel, das Werte aus allen Eingabetypen in einem Formular abruft:

  <input type="text">

• JavaScript Code:

  const textValue = document.getElementById('textInput').value;

---

Anleitung

1. Fügen Sie die HTML-Formularelemente mit den angegebenen ID-Attributen zu Ihrer Webseite hinzu.
2. Verwenden Sie das entsprechende JavaScript-Snippet, um Werte aus den Eingaben abzurufen.
3. Die gesammelten Daten können protokolliert oder zur weiteren Verarbeitung an einen Server gesendet werden.

---

Diese Dokumentation bietet eine klare Referenz für die Arbeit mit verschiedenen Eingabetypen in HTML und das Sammeln ihrer Werte mithilfe von JavaScript.

Das obige ist der detaillierte Inhalt vonSo rufen Sie Werte aus allen Arten von HTML-Eingaben in JavaScript ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!