Bagaimana untuk mendapatkan semula nilai daripada semua jenis Input HTML dalam JavaScript

Blog ini menerangkan cara menggunakan JavaScript untuk mendapatkan semula nilai daripada jenis input yang berbeza dalam bentuk HTML mengikut id mereka.

Jenis Input dan Kaedah Dapatkan Semula

1. Input Teks

• Kod HTML:

  <input type="text">



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

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

• Penjelasan: Mendapatkan semula nilai yang dimasukkan dalam medan input teks.

---

2. Input E-mel

• Kod HTML:

  <input type="email">



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

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

• Penjelasan: Mendapatkan semula e-mel yang dimasukkan oleh pengguna. Medan ini mengharapkan format e-mel yang sah.

---

3. Input Kata Laluan

• Kod HTML:

  <input type="password">



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

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

• Penjelasan: Mendapatkan semula teks yang dimasukkan dalam medan input kata laluan.

---

4. Input Nombor

• Kod HTML:

  <input type="number">



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

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

• Penjelasan: Mendapatkan semula nombor yang dimasukkan dalam medan input.

---

5. Input Tarikh

• Kod HTML:

  <input type="date">



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

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

• Penjelasan: Mendapatkan semula tarikh yang dipilih dalam format YYYY-MM-DD.

---

6. Butang Radio

• Kod HTML:

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

• Penjelasan: Mendapatkan semula nilai butang radio yang dipilih. Jika tiada yang dipilih, ia akan mengembalikan null.

---

7. Kotak semak

• Kod HTML:

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

• Penjelasan: Mendapatkan semula semua nilai kotak semak yang dipilih sebagai tatasusunan. Jika tiada kotak pilihan dipilih, ia mengembalikan tatasusunan kosong.

---

8. Jatuh turun (Pilih)

• Kod HTML:

  <select>

• JavaScript Code:

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

• Penjelasan: Mendapatkan semula nilai yang dipilih daripada menu lungsur turun.

---

9. Textarea

• Kod HTML:

  <textarea>

• JavaScript Code:

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

• Penjelasan: Mendapatkan semula teks yang dimasukkan dalam medan textarea.

---

Contoh: Skrip Lengkap

Berikut ialah contoh yang mendapatkan semula nilai daripada semua jenis input dalam bentuk:

  <input type="text">

• JavaScript Code:

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

---

Cara Penggunaan

1. Tambahkan elemen borang HTML pada halaman web anda dengan atribut id yang ditentukan.
2. Gunakan coretan JavaScript yang sepadan untuk mendapatkan semula nilai daripada input.
3. Data yang dikumpul boleh dilog atau dihantar ke pelayan untuk pemprosesan selanjutnya.

---

Dokumentasi ini menyediakan rujukan yang jelas untuk bekerja dengan pelbagai jenis input dalam HTML dan mengumpul nilainya menggunakan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan semula nilai daripada semua jenis Input HTML dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!