Tutorial Asas DOM: Menggunakan DOM untuk Mengawal Pengetahuan Forms_Basic

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 ;