Bagaimana untuk menambah kotak input dalam javascript

Dengan peningkatan aplikasi web moden, JavaScript telah menjadi bahagian yang sangat diperlukan dalam pembangunan web. Salah satu kegunaan utama salah satunya adalah untuk berinteraksi dengan pengguna untuk mengumpul data atau menerima input daripada pengguna. Dalam artikel ini, kami akan mendalami cara menambah kotak input dalam JavaScript untuk mengumpul data yang dimasukkan pengguna.

1. Mencipta kotak input menggunakan HTML

Cara paling mudah untuk menambah kotak input dalam JavaScript ialah dengan menggunakan elemen <input> dalam HTML. Di bawah ialah contoh kotak input asas yang mencipta kotak teks dan menyediakan ruang letak untuk membimbing pengguna menaip nilai yang dikehendaki.

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" placeholder="请输入您的姓名">
  <br>
  <input type="submit" value="提交">
</form>

Dalam contoh di atas, kami menggunakan elemen <form> untuk mencipta borang yang mengandungi kotak input teks. Elemen <label> ialah tag label yang digunakan untuk mengenal pasti kandungan yang diwakili oleh kotak teks. Dalam kes ini, atribut <label>'s for sepadan dengan atribut id kotak input untuk mengikat kedua-duanya bersama-sama. Atribut <input> teg type menentukan jenis kotak input yang sepatutnya, seperti kotak input teks, butang radio, kotak semak, dsb.

Dalam aplikasi yang lebih praktikal, anda biasanya akan menggunakan borang dengan berbilang kotak input untuk mengumpul data pengguna. Berikut ialah contoh penggunaan butang radio dan kotak teks berbilang baris:

<form>
  <label>请选择性别:</label>
  <br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
  <br>
  <br>
  <label for="phone">电话号码:</label>
  <br>
  <input type="tel" id="phone" name="phone" maxlength="11">
  <br>
  <br>
  <label for="msg">留言:</label>
  <br>
  <textarea id="msg" name="msg" rows="5"></textarea>
  <br>
  <input type="submit" value="提交">
</form>

Dalam contoh ini, kami menggunakan elemen <input> untuk mencipta butang radio dan kotak input telefon. Kami juga menggunakan elemen <textarea> untuk membuat kotak teks berbilang baris.

2. Buat kotak input menggunakan JavaScript

Selain mentakrifkan kotak input dalam HTML, anda juga boleh menggunakan JavaScript untuk mencipta dan menambah kotak input secara dinamik. Seperti yang anda akan lihat dalam contoh di bawah, kotak input boleh dibuat dan ditambah menggunakan kaedah createElement() dan appendChild().

let form = document.createElement('form');
let label = document.createElement('label');
let input = document.createElement('input');
let submit = document.createElement('input');

label.textContent = "请输入您的邮箱地址:";
input.type = "email";
input.id = "email";
input.name = "email";
submit.type = "submit";
submit.value = "提交";

form.appendChild(label);
form.appendChild(input);
form.appendChild(submit);

document.body.appendChild(form);

Dalam contoh di atas, kami mula-mula mencipta elemen createElement() dan tiga elemen anak menggunakan kaedah <form>: elemen <label>, elemen <input> dan butang serah. Kami kemudian menetapkan teks dan nilai atribut bagi elemen <label> dan <input>, dan akhirnya menambah semua elemen pada elemen appendChild() menggunakan kaedah <form>. Akhir sekali, kami menambah elemen <form> pada badan dokumen.

3. Dapatkan data daripada kotak input

Setelah kotak input anda telah dibuat, anda biasanya perlu mendapatkan data input pengguna. Dalam JavaScript, anda boleh menggunakan atribut value untuk mengakses nilai kotak input, seperti coretan kod berikut:

let nameInput = document.getElementById('name');
let name = nameInput.value;
console.log(name);

Dalam kod di atas, kami mula-mula menggunakan kaedah getElementById() untuk cari kotak input "nama" ID, dan kemudian baca atribut value untuk mendapatkan nilai dalam kotak input. Kami menyimpan nilai dalam pembolehubah dan mencetaknya dalam konsol.

Selain mendapatkan data kotak input teks, anda juga boleh menggunakan teknik yang sama untuk mendapatkan nilai jenis kotak input lain seperti butang radio, kotak semak dan lungsur turun menu. Berikut ialah beberapa contoh:

let genderInput = document.querySelector('input[name="gender"]:checked');
let gender = genderInput.value;
console.log(gender);

let checkboxInput = document.getElementById('agree');
let isChecked = checkboxInput.checked;
console.log(isChecked);

let selectInput = document.getElementById('language');
let language = selectInput.value;
console.log(language);

Dalam kod di atas, kami menggunakan kaedah querySelector() untuk memilih elemen butang radio dengan pilihan yang dipilih dan gunakan atribut checked untuk mendapatkan keadaan yang dipilih daripada elemen kotak semak , dan gunakan atribut value untuk mendapatkan nilai yang dipilih bagi elemen menu lungsur.

Kesimpulan

Sama ada anda mentakrifkan kotak input dalam HTML atau menciptanya dalam JavaScript, anda boleh menggunakan teknik di atas untuk mengakses dan mendapatkan data dalam kotak input.

Dalam aplikasi sebenar, anda biasanya perlu mengesahkan data yang dimasukkan oleh pengguna untuk memastikan kesahihannya. Anda juga boleh menggunakan JavaScript untuk menukar sifat dan gaya kotak input dan borang secara dinamik untuk menjadikannya lebih menarik dan mudah digunakan.

Semoga artikel ini membantu anda menambah kotak input dalam JavaScript supaya anda boleh mendapatkan data daripada pengguna dengan lebih mudah.

Atas ialah kandungan terperinci Bagaimana untuk menambah kotak input dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!