Cara menambah borang menggunakan JavaScript

Dengan perkembangan Internet, borang telah menjadi bahagian yang sangat diperlukan dalam reka bentuk web. Borang membolehkan pengguna berinteraksi dengan tapak web, menyerahkan data dan banyak lagi. Dalam pembangunan web, kita boleh menggunakan teknologi seperti HTML, CSS, dan JavaScript untuk mencipta borang yang ringkas dan jelas. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menambah borang.

1. Elemen borang

Apabila menggunakan JavaScript untuk menambah borang, anda perlu terlebih dahulu memahami elemen borang, seperti yang ditunjukkan di bawah:

1. Elemen input: digunakan untuk menerima input pengguna Pelbagai teks dan nilai, seperti kotak teks, kotak radio, kotak semak, butang, dsb.
2. elemen textarea: digunakan untuk menerima input teks berbilang baris.
3. elemen pilih: digunakan untuk menerima menu lungsur.
4. elemen label: digunakan untuk menandakan elemen bentuk.

2. Acara borang

Apabila menambah borang, anda juga perlu memahami acara borang dalam JavaScript. Berikut ialah beberapa peristiwa borang yang biasa digunakan:

1. peristiwa onchange: Peristiwa ini dicetuskan apabila nilai elemen bentuk berubah.
2. acara onfocus: Acara ini dicetuskan apabila pengguna memilih elemen borang.
3. acara kabur: Peristiwa ini dicetuskan apabila elemen bentuk hilang fokus.
4. acara semasa hantar: Acara ini dicetuskan apabila borang diserahkan.

3. Tambahkan borang

1. Buat elemen borang

Dalam JavaScript, anda boleh mencipta elemen borang dengan mencipta elemen HTML. Sebagai contoh, kita boleh menggunakan kod berikut untuk mencipta kotak teks:

var textbox = document.createElement("input");
textbox.type = "text";

2. Tambah elemen borang pada HTML

Selepas mencipta elemen borang, kita perlu tambah mereka Ditambah pada HTML. Kotak teks boleh ditambah pada teg badan HTML menggunakan kod berikut:

document.body.appendChild(textbox);

3. Mendengar acara bentuk

Untuk menjadikan borang interaktif, kita perlu menyediakan Tambah pendengar acara kepada elemen. Contohnya, anda boleh menggunakan kod berikut untuk menambah pendengar acara onchange untuk kotak teks:

textbox.onchange = function() {
  // 在这里添加代码来响应事件
};

4. Sahkan input borang

Apabila menambah borang, anda juga perlu memastikan bahawa input pengguna Nilai memenuhi keperluan. Sebagai contoh, kami boleh menggunakan kod berikut untuk mengesahkan sama ada kandungan yang dimasukkan dalam kotak teks ialah nombor:

textbox.onchange = function() {
  if (isNaN(this.value)) {
    alert("请输入数字！");
  }
};

5. Serahkan borang

Akhir sekali, kami perlu menambah fungsi menghantar borang. Butang hantar boleh dibuat menggunakan kod berikut:

var submitBtn = document.createElement("button");
submitBtn.type = "submit";
submitBtn.onclick = function() {
  // 在这里添加提交表单的代码
};

Kemudian tambahkan butang pada HTML:

document.body.appendChild(submitBtn);

Pada ketika ini, kami telah berjaya menambah borang JavaScript yang ringkas .

4. Ringkasan

Dalam artikel ini, kami memperkenalkan kaedah menambah borang dengan JavaScript, termasuk mencipta elemen borang, menambah elemen borang pada HTML, mendengar acara borang, mengesahkan input dan penyerahan borang Borang dll. Melalui kaedah ini, kami boleh mencipta borang interaktif untuk menjadikan pengguna berinteraksi dengan laman web dengan lebih mudah dan cepat.

Atas ialah kandungan terperinci Cara menambah borang menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!