


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

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel ini membincangkan useeffect dalam React, cangkuk untuk menguruskan kesan sampingan seperti pengambilan data dan manipulasi DOM dalam komponen berfungsi. Ia menerangkan penggunaan, kesan sampingan yang biasa, dan pembersihan untuk mencegah masalah seperti kebocoran memori.

Lazy memuatkan kelewatan memuatkan kandungan sehingga diperlukan, meningkatkan prestasi web dan pengalaman pengguna dengan mengurangkan masa beban awal dan beban pelayan.

Artikel ini menerangkan algoritma perdamaian React, yang dengan cekap mengemas kini DOM dengan membandingkan pokok DOM maya. Ia membincangkan manfaat prestasi, teknik pengoptimuman, dan kesan terhadap pengalaman pengguna. Kira -kira: 159

Artikel ini membincangkan kari dalam JavaScript, teknik yang mengubah fungsi multi-argumen ke dalam urutan fungsi argumen tunggal. Ia meneroka pelaksanaan kari, faedah seperti aplikasi separa, dan kegunaan praktikal, meningkatkan kod baca

Fungsi pesanan yang lebih tinggi dalam JavaScript meningkatkan ketabahan kod, kebolehgunaan semula, modulariti, dan prestasi melalui abstraksi, corak umum, dan teknik pengoptimuman.

Artikel ini menerangkan USEContext dalam React, yang memudahkan pengurusan negara dengan mengelakkan penggerudian prop. Ia membincangkan faedah seperti keadaan terpusat dan penambahbaikan prestasi melalui pengurangan semula yang dikurangkan.

Artikel membincangkan penyambungan komponen reaksi ke kedai redux menggunakan Connect (), menerangkan MapStateToprops, MapdispatchToprops, dan kesan prestasi.

Artikel membincangkan menghalang tingkah laku lalai dalam pengendali acara menggunakan kaedah pencegahanDefault (), faedahnya seperti pengalaman pengguna yang dipertingkatkan, dan isu -isu yang berpotensi seperti kebimbangan aksesibiliti.
