Membaca Nilai Input
Akses nilai dari input teks, kotak centang, dan pilihan.
Membaca Nilai Input adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.
Bekerja dengan Data Formulir
Formulir mengumpulkan masukan pengguna melalui kolom seperti kotak teks, kotak centang, tombol radio, dan daftar tarik-turun. Setiap jenis menyediakan datanya dengan cara yang sedikit berbeda.
input.value
Kolom masukan berbasis teks menyediakan isi terkininya melalui properti value, yang selalu berupa string.
const name = document.querySelector("#name");
console.log(name.value);value Selalu Berupa String
Bahkan masukan berupa angka tetap mengembalikan string. Lakukan konversi secara eksplisit saat Anda memerlukan angka.
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
Masukan angka dan tanggal menyediakan valueAsNumber, yang langsung mengembalikan angka (atau NaN jika kosong/tidak valid).
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
Kotak centang melaporkan keadaannya melalui properti boolean checked, bukan value.
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or falseTombol Radio
Untuk kelompok tombol radio, cari tombol yang dicentang. Properti checked mengidentifikasi pilihan yang dipilih.
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");Nilai select
Daftar tarik-turun dengan satu pilihan menyediakan opsi yang dipilih melalui value.
const country = document.querySelector("#country");
console.log(country.value);Pilihan Ganda
Untuk pilihan ganda, baca selectedOptions lalu petakan ke nilai-nilainya.
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);Peristiwa input
Dengarkan peristiwa input untuk merespons setiap penekanan tombol atau perubahan secara waktu nyata.
name.addEventListener("input", (e) => {
console.log(e.target.value);
});Peristiwa change
Peristiwa change dipicu saat kolom kehilangan fokus setelah nilainya berubah, atau langsung untuk kotak centang dan daftar pilihan.
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormData mengumpulkan semua kolom bernama dari sebuah formulir sekaligus, sehingga ideal untuk dikirim ke server.
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));Pemeriksaan Cepat
Baca kotak centang dengan benar.
Ringkasan
Baca masukan teks melalui value (selalu berupa string; gunakan valueAsNumber untuk angka), kotak centang/tombol radio melalui checked, dan daftar tarik-turun melalui value atau selectedOptions. Berikan respons terhadap peristiwa input (setiap perubahan) atau peristiwa change (saat perubahan diterapkan), lalu kumpulkan semuanya sekaligus dengan FormData.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Membaca Nilai Input” gratis?
Ya — teks lengkap “Membaca Nilai Input” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Membaca Nilai Input”?
Akses nilai dari input teks, kotak centang, dan pilihan. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai JavaScript Academy?
Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Membaca Nilai Input” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?
Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Membaca Nilai Input
- Peristiwa submit
- Validasi di Sisi Klien
- API Validasi Batasan