1. Pengantar formulir
Form <Form> adalah salah satu bentuk paling interaktif di halaman web. Ini menerima data pengguna melalui berbagai formulir, termasuk kotak daftar drop-down, tombol radio, kotak centang dan kotak teks. Artikel ini terutama memperkenalkan sifat dan metode yang umum digunakan dalam bentuk.
JavaScript bisa sangat nyaman untuk mengoperasikan formulir, seperti mendapatkan data formulir untuk verifikasi yang efektif, secara otomatis menetapkan nilai untuk bentuk formulir, memproses acara formulir, dll.
Pada saat ini, setiap bentuk diuraikan menjadi objek, yaitu, bentuk objek. Objek -objek ini dapat direferensikan melalui koleksi Dokumen. Misalnya, formulir dengan atribut nama dari Form1 dapat digunakan
Salin kode sebagai berikut: Document.Forms ["Form1"]
Tidak hanya itu, Anda juga dapat merujuk ke objek formulir melalui indeks formulir dalam dokumen. Misalnya
Salin kode sebagai berikut: Document.Forms [1]
Mewakili objek bentuk kedua dalam dokumen referensi
Berikut ini adalah elemen formulir yang berisi beberapa elemen bentuk, setiap elemen memiliki tag label, terikat pada elemen, sehingga dengan mengklik teks, Anda dapat mengaturnya dan memilihnya ke tabel, meningkatkan pengalaman pengguna.
Salinan kode adalah sebagai berikut:
<Form Method = "POST" NAME = "MYFORM1" ACTION = "ADDINFO.ASPX">
<p> <label for = "name"> Harap masukkan nama Anda: </label> <br> <input type = "text" name = "name" id = "name"> </p>
<p> <label for = "passwd"> Harap masukkan kata sandi Anda: </label> <br> <input type = "password" name = "passwd" id = "passwd"> </p>
<p> <label for = "color"> Pilih warna favorit Anda: </label> <br>
<Pilih name = "color" id = "color">
<Option value = "Red"> Red </pection>
<Opsi Value = "Green"> Green </pection>
<Option value = "blue"> Blue </pection>
<Opsi Value = "Yellow"> Yellow </pection>
<Option value = "cyan"> qing </pection>
<Option value = "ungu"> ungu </pection>
</pilih> </p>
<p> Pilih jenis kelamin Anda: <br>
<input type = "Radio" name = "sex" id = "Male" value = "Male"> <label untuk = "pria"> pria </label> <br>
<input type = "Radio" name = "sex" id = "female" value = "female"> <label for = "female"> wanita </label> </p>
<p> Apa yang ingin Anda lakukan: <br>
<input type = "centang kotak" name = "hobby" id = "book" value = "book"> <label for = "book"> bacaan </label>
<input type = "centang kotak" name = "hobby" id = "net" value = "net"> <label for = "net"> di internet </label>
<input type = "centang kotak" name = "hobby" id = "sleep" value = "sleep"> <label for = "sleep"> sleep </label> </p>
<p> <label for = "komentar"> Saya ingin meninggalkan pesan: </label> <br> <textarea name = "komentar" id = "komentar" cols = "30" baris = "4"> </textarea> </p>
<p> <input type = "kirim" name = "btnsubmit" id = "btnsubmit" value = "kirim">
<input type = "reset" name = "btnreset" id = "btnreset" value = "reset"> </p>
</form>
Biasanya setiap elemen bentuk harus memiliki atribut nama dan ID, nama digunakan untuk menyerahkan ke server, dan ID digunakan untuk pengikatan dan penyaringan fungsi.
2. Elemen akses dalam formulir
Elemen dalam formulir, apakah kotak teks, tombol radio, tombol tarik-turun, kotak daftar drop-down atau konten lainnya, disertakan dalam koleksi Formulir Elemen. Anda dapat menggunakan posisi elemen dalam koleksi atau atribut nama elemen untuk mendapatkan referensi ke elemen.
Salinan kode adalah sebagai berikut:
var oform = document.forms ["form1"] // dapatkan formulir
var etextform = oform.elements [0]; // Dapatkan elemen pertama
var etextpasswd = oform.elements ["passwd"] // Dapatkan elemen dengan atribut nama passwd
Mengutip metode yang paling efektif dan intuitif:
Salin kode sebagai berikut: var ethtComments = oform.elements.comments; // Dapatkan elemen dengan komentar atribut nama
3. Properti dan Metode Publik
Semua elemen dalam bentuk (kecuali elemen tersembunyi) memiliki beberapa sifat dan metode umum. Berikut adalah beberapa daftar yang umum digunakan
Salinan kode adalah sebagai berikut:
var oform = document.forms ["form1"]; // dapatkan formulir
var imagestComments = oform.elements.comments; // Dapatkan elemen dengan komentar atribut nama
Peringatan (Oform.Type); // Lihat jenis elemen
var etextpasswd = oform.elements ["passwd"]; // Dapatkan elemen dengan atribut nama passwd
foxtpasswd.focus (); // fokus pada elemen tertentu
4. Pengajuan formulir
Formulir Pengajuan Diisi melalui Tombol atau Gambar dengan Fungsi Tombol
Salinan kode adalah sebagai berikut:
<input type = "kirim" name = "btnsubmit" id = "btnsubmit" value = "kirim">
<input type = "Image" name = "picsubmit" id = "picssubmit" src = "submit.jpg">
Ketika pengguna menekan masuk atau mengklik salah satu tombol, formulir dapat dikirim tanpa kode tambahan. Anda dapat menggunakan atribut tindakan dalam bentuk untuk mendeteksi apakah akan mengirimkan.
Salin kode sebagai berikut: <Form Method = "Posting" Name = "Form1" Action = "JavaScript: ALERT ('Dikirim')"> </form>
Pengguna dapat berulang kali mengklik tombol Kirim selama proses pengiriman karena kecepatan jaringan terlalu lambat. Ini adalah beban besar di server dan dapat dilarang dengan menggunakan atribut yang dinonaktifkan. Misalnya:
Salin kode sebagai berikut: <input type = "tombol" value = "kirim" />