Rumah hujung hadapan web tutorial js Tutorial Asas DOM: Menggunakan DOM untuk Mengawal Pengetahuan Forms_Basic

Tutorial Asas DOM: Menggunakan DOM untuk Mengawal Pengetahuan Forms_Basic

May 16, 2016 pm 04:18 PM
dom

1. Pengenalan borang

Borang<borang> ialah salah satu borang yang paling interaktif pada halaman web Ia menerima data pengguna melalui pelbagai borang, termasuk kotak senarai lungsur, butang radio, kotak semak dan kotak teks digunakan atribut dan kaedah
Anda boleh mengendalikan borang dalam JavaScript dengan mudah, seperti mendapatkan data borang untuk pengesahan yang berkesan, memberikan nilai secara automatik kepada medan borang, memproses acara borang, dsb.
Pada masa ini, setiap borang dihuraikan menjadi objek, iaitu objek bentuk Objek ini boleh dirujuk melalui koleksi document.forms Contohnya, borang dengan atribut nama form1 boleh menggunakan

Salin kod Kod adalah seperti berikut:
document.forms["form1"]

Bukan itu sahaja, anda juga boleh merujuk objek borang melalui indeksnya dalam dokumen. Contohnya

Salin kod Kod adalah seperti berikut:
document.forms[1]

mewakili objek bentuk kedua dalam dokumen rujukan

Berikut ialah borang yang mengandungi berbilang elemen borang Setiap elemen mempunyai teg label dan terikat pada elemen Dengan cara ini, borang boleh ditetapkan dan dipilih dengan mengklik pada teks, yang meningkatkan pengalaman pengguna.

Salin kod Kod adalah seperti berikut:

<form method="post" name="myForm1" action="addInfo.aspx">
<p><label untuk="name">Sila masukkan nama anda:</label><br><input type="text" name="name" id="name">&lt ; /p>
<p><label untuk="passwd">Sila masukkan kata laluan anda:</label><br><input type="password" name="passwd" id="passwd">&lt ; /p>
<p><label untuk="color">Sila pilih warna kegemaran anda:</label><br>
<pilih name="color" id="color">
<nilai pilihan="red">红</option>
<nilai pilihan="hijau">Hijau</option>
<nilai pilihan="blue">biru</option>
<nilai pilihan="kuning">黄</option>
<nilai pilihan="cyan">青</option>
<nilai pilihan="ungu">ungu</option>
</select></p>
<p>Sila pilih jantina anda:<br>
<input type="radio" name="sex" id="male" value="lelaki"><label untuk="lelaki">lelaki</label><br>
<input type="radio" name="sex" id="female" value="female"><label for="female">female</label></p>
<p>Apakah yang anda suka lakukan:<br>
<input type="checkbox" name="hobby" id="book" value="book"><label for="book">Membaca</label>
<input type="checkbox" name="hobby" id="net" value="net"><label for="net">online</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">sleep</label></p>
<p><label untuk="komen">Saya ingin meninggalkan mesej:</label><br><textarea name="comments" id="comments" cols="30" rows= "4" ></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
<input type="reset" name="btnReset" id="btnReset" value="Reset"></p>
</form>

Biasanya setiap elemen borang harus mempunyai atribut nama dan id, nama digunakan untuk menyerahkannya kepada pelayan, dan id digunakan untuk penjilidan dan penapisan fungsi.

2. Akses elemen dalam bentuk

Elemen dalam borang, sama ada kotak teks, butang radio, butang lungsur, kotak senarai lungsur atau kandungan lain, disertakan dalam koleksi elemen borang. Anda boleh menggunakan kedudukan elemen dalam koleksi atau atribut nama elemen untuk Dapatkan rujukan kepada elemen ini.

Salin kod Kod adalah seperti berikut:

var oForm = document.forms["form1"]//Dapatkan borang
          var otextForm = oForm.elements[0]; //Dapatkan elemen pertama
           var otextPasswd = oForm.elements["passwd"] //Dapatkan elemen yang namanya atribut passwd

Kaedah yang paling berkesan dan intuitif untuk digunakan adalah dipetik:

Salin kod Kod adalah seperti berikut:
var otextcomments = oForm.elements.comments; atribut nama sebagai elemen ulasan

3. Harta dan kaedah awam

Semua elemen dalam bentuk (kecuali elemen tersembunyi) mempunyai beberapa atribut dan kaedah biasa. Berikut adalah beberapa yang biasa digunakan

Salin kod Kod adalah seperti berikut:

var oForm = document.forms["form1"]; //Dapatkan borang
                 var otextcomments = oForm.elements.comments; //Dapatkan elemen yang atribut namanya ialah ulasan
               makluman(oForm.type); //Lihat jenis elemen
                var otextPasswd = oForm.elements["passwd"]; //Dapatkan elemen yang atribut namanya ialah passwd
             otextPasswd.focus(); //Fokus pada elemen tertentu

4. Penyerahan borang

Penyerahan dalam borang dilengkapkan melalui butang atau imej dengan fungsi butang

Salin kod Kod adalah seperti berikut:

<input type="submit" name="btnsubmit" id="btnSubmit" value="Submit">
           <input type="image" name="picSubmit" id="picSSubmit" src="Submit.jpg">

Apabila pengguna menekan kekunci Enter atau mengklik salah satu butang, penyerahan borang boleh dilengkapkan tanpa kod tambahan. Anda boleh menyemak sama ada untuk menyerahkan melalui atribut tindakan dalam borang.

Salin kod Kod adalah seperti berikut:
<form method="post" name="form1 " action="javascript:alert('submited')"></form>

Semasa proses menyerahkan borang, pengguna boleh mengklik butang hantar berulang kali kerana kelajuan rangkaian yang perlahan, yang merupakan beban besar pada pelayan Tingkah laku ini boleh dilarang dengan menggunakan atribut yang dilumpuhkan. Contohnya:

Salin kod Kod adalah seperti berikut:
<input type="button" value="Hantar " /&gt ;

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah cara untuk mendapatkan nod DOM dalam Vue3 Apakah cara untuk mendapatkan nod DOM dalam Vue3 May 11, 2023 pm 04:55 PM

Apakah cara untuk mendapatkan nod DOM dalam Vue3

Panduan manipulasi DOM dalam PHP Panduan manipulasi DOM dalam PHP May 21, 2023 pm 04:01 PM

Panduan manipulasi DOM dalam PHP

Apakah maksud vue dom? Apakah maksud vue dom? Dec 20, 2022 pm 08:41 PM

Apakah maksud vue dom?

Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya May 12, 2023 pm 01:28 PM

Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya

Apakah objek dom dan bom? Apakah objek dom dan bom? Nov 13, 2023 am 10:52 AM

Apakah objek dom dan bom?

Apakah perbezaan antara bom dan dom Apakah perbezaan antara bom dan dom Nov 13, 2023 pm 03:23 PM

Apakah perbezaan antara bom dan dom

Ringkasan terkini acara DOM JavaScript biasa! Ringkasan terkini acara DOM JavaScript biasa! Aug 07, 2022 am 11:05 AM

Ringkasan terkini acara DOM JavaScript biasa!

Bagaimana untuk mengubah suai dom dalam refs bertindak balas Bagaimana untuk mengubah suai dom dalam refs bertindak balas Jan 06, 2023 am 11:19 AM

Bagaimana untuk mengubah suai dom dalam refs bertindak balas

See all articles