Artikel ini menunjukkan kepada Anda contoh kontrol formulir JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Contoh 1: Iterasi melalui semua kontrol formulir
<script type = "text/javascript"> // Transfer fungsi formulir getValues () {var f = document.forms [0]; // Dapatkan bentuk elemen dom var = f.elements; // Dapatkan semua array kontrol var str = ''; // split string // loop traversal untuk (var i = 0; i <elements.length; i ++) {var e = elemen [i]; // Kontrol saat ini STR += E.Value; // nilai kontrol split str += '/n'; // pemisah split} alert (str); //Show the result with a prompt box}</script><form> Text box: <input type="text" name="myText"/> <br/> Radio box: <input type="radio" name="myRadio" value="1"/>1 <input type="radio" name="myRadio" value="2"/>2 <br/> Drop-down list: <select name="mySelect"> <option value = ""> == Harap pilih == </tiption> <option value = "1"> 1 </tiption> <option value = "2"> 2 </tiption> </tect> <br/> <input type = "tombol" value = "getValues ()"/> </form>Contoh 2: Mengakses kontrol tertentu melalui nama kontrol
<script type = "text/javascript"> // akses kontrol spesifik melalui fungsi nama kontrol getFormDom () {var f = document.forms [0]; // dapatkan bentuk dom var mytext = f.mytext; // Dapatkan Kontrol DOM dengan nama // Permintaan nama kontrol dan peringatan nilai (myText.name + ":" + myText.Value); } </script> <sorm> kotak teks: <input type = "text" name = "myText"/> <br/> <input type = "Tombol" value = "getControl" ontClick = "getFormDom ()"/> </form>Contoh 3: Dapatkan jumlah kotak teks dalam formulir
<script type = "text/javascript"> // Dapatkan jumlah kotak teks dalam fungsi formulir getInputCount () {var f = document.forms [0]; // Dapatkan bentuk elemen dom var = f.elements; // Dapatkan semua array kontrol var count = 0; // stat total angka // loop traversal untuk (var i = 0; i <elements.length; i ++) {// kontrol arus var e = elemen [i]; // apakah itu kotak teks jika (e.tagname == 'input' && e.type == 'teks') {count ++; // Jumlah total ditambahkan dengan sendirinya}} // Gunakan kotak prompt untuk menampilkan peringatan hasil ("kotak teks memiliki total:" + hitungan + "s"); } </script>Contoh 4: Metode pengiriman untuk memodifikasi formulir
Atribut metode menentukan metode HTTP (GET atau POST) yang digunakan saat mengirimkan formulir. Saat menggunakan GET, data formulir terlihat di bilah alamat halaman, dan posting lebih aman karena data yang dikirimkan di bilah alamat halaman tidak terlihat.
<script type = "text/javaScript"> // Ubah fungsi metode pengiriman formulir odifymethod () {var f = document.forms [0]; // Dapatkan bentuk metode dom var = f.mymethod.value; // metode yang dipilih f.method = metode; // Ubah metode pengiriman yang dipilih // Gunakan kotak prompt untuk menampilkan peringatan hasil ("Metode pengiriman saat ini dari formulir:" + Metode); } </script> <form method = "POST"> Pilih metode pengiriman: <pilih name = "mymethod"> <option value = ""> == Pilih == </pection> <option value = "get"> get </pection> <option value = "post"> POST </pect> </teksi> <br/> <input type "value =" MODICH "MODICH (value"/MODICH (MODICH (MODICH/MODICH/MODICH/MODICH/MODICH/MODICH/MODICH/MODI. " </form>Contoh 5: Tentukan secara dinamis atribut tindakan formulir
Atribut Tindakan mendefinisikan tindakan yang dilakukan ketika formulir diserahkan.
Adalah praktik umum untuk mengirimkan formulir ke server untuk menggunakan tombol kirim.
Biasanya, formulir dikirimkan ke halaman web di server web.
Jika atribut tindakan dihilangkan, tindakan akan diatur ke halaman saat ini.
<script type = "text/javaScript"> // Dinamis Tentukan atribut tindakan dari fungsi Form ModifyAction () {var f = document.forms [0]; // dapatkan bentuk dom var newurl = f.newurl.value; // Metode yang dipilih f.action = newurl; // Ubah alamat tindakan dari formulir yang dikirimkan // gunakan kotak prompt untuk menampilkan peringatan hasil ("Tindakan saat ini dari formulir:" + f.action); } </script> <form method = "post"> Pilih metode kirim: <input type = "text" name = "newUrl"/> <br/> <input type = "tombol" value = "Modifikasi tindakan kirim" onClick = "ModifyAction ()"/> </form>Contoh 6: Kontrol Fokus Selektif Dinamis
<script type = "text/javascript"> // kotak radio pertama adalah fokus fokus fokus () {var f = document.forms [0]; // dapatkan bentuk dom var myradio = f.myradio; // Dapatkan kotak radio myradio [0] .focus (); //The first radio box gets focus}</script><form> Text box: <input type="text" name="myText"/> <br/> Radio box: <input type="radio" name="myRadio" value="1"/> <input type="radio" name="myRadio" value="2"/> <br/> Drop-down list: <select name="mySelect"> <option value="">==Please SELECT == </option> <Option value = "1"> 1 </pection> <option value = "2"> 2 </pection> </schect> <br/> <input type = "Tombol" value = "Kotak radio pertama adalah fokus" onClick = "focusIt ()"/> </form>Contoh 7: Inisialisasi nilai semua kontrol dalam bentuk ke keadaan awal
<script type = "text/javascript"> // menginisialisasi nilai semua kontrol dalam formulir ke fungsi status awal () {var f = document.forms [0]; // Dapatkan bentuk dom f.reset (); // Gunakan fungsi reset ()} </script>Contoh 8: Batch Tambahkan penjelasan ke semua kontrol formulir
<script type = "text/javascript"> // batch deskripsi untuk semua kontrol formulir fungsi batchcomment () {var f = document.forms [0]; // Dapatkan bentuk dom var anak -anak = f.childnodes; // Dapatkan semua elemen anak dari bentuk var newarr = []; // Tentukan array elemen baru var j = 0; // Tentukan subskrip untuk array elemen baru // loop melalui elemen anak untuk (var i = 0; i <children.length; i ++) {var e = anak -anak [i]; // elemen anak saat ini newarr [j ++] = e; // Tambahkan ke array baru // Tentukan apakah itu kontrol jika (e.tagname == 'input' || e.tagname == 'pilih') {// Tambahkan node dengan Deskripsi Teks Var Text = Document.CreateTextNode ("Item ini diperlukan"); newarr [j ++] = teks; // Tambahkan node untuk array baru}} // hapus konten formulir yang ada f.innerhtml = ''; // deskripsi batch untuk (var i = 0; i <newarr.length; i ++) {// Tambahkan elemen lama dan deskripsi node ke dalam bentuk f.AppendChild (newarr [i]); }}} </script>Contoh 9: Gunakan kontrol tersembunyi untuk menambahkan parameter ke formulir
<script type = "text/javascript"> // fungsi function showparams () {// Atur nilai variabel tersembunyi. Nilai ini juga dapat ditentukan melalui nilai dokumen nilai tag.Forms [0] .MyHidden.Value = 'I Am Hidden'; // Tentukan variabel splicing karakter var str = 'parameter yang dikirimkan oleh formulir termasuk:'; // parameter tahun split str + = '/n tahun:' + document.forms [0] .myyear.value; // Parameter Nama Parameter STR + = '/N Nama:' + Document.Forms [0] .myname.value; // Parameter tersembunyi STR + = '/NHIDE variabel:' + Document.Forms [0] .MyHidden.Value; waspada (str); //Display the value of the character} </script> <form> <input type="hidden" name="myhidden"/> Year: <select name="myyear"> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> </select> <br/><br/> Name: <input type="text" name = "myName"/> <br/> <br/> <input type = "Tombol" value = "kirim" ontClick = "showparams ();"/> </form>Contoh 10: centang semua kotak centang
<script type = "text/javaScript"> // centang semua fungsi fungsi centang (c) {// Dapatkan semua kotak centang var arr = document.geteLementsbyname ('myname'); if (c) {// Pilih semua kotak centang untuk (var i = 0; i <arr.length; i ++) {arr [i] .Checked = true; // pilih}} else {// sebaliknya, jangan pilih semua // transfer semua kotak untuk (var i = 0; i <arr.length; i ++) {arr [i]. Minat Anda: <br> <input type = "centang kotak" name = "myall" onClick = "checkall (this.checked)" /> pilih semua <br> <input type = "centang kotak" nama = "myname" /> pilih semua <input type = "centang" nama myname " /> Pilih semua <input type =" centang = "myname" /MyName /> Pilih semua <input type = "myname"Contoh 11: Tetapkan gaya yang menarik untuk kontrol fokus formulir
<script type = "text/javascript"> function init () {var f = document.forms [0]; // Dapatkan bentuk elemen dom var = f.elements; // Dapatkan semua array kontrol var str = ''; // split string // loop traversal untuk (var i = 0; i <elements.length; i ++) {var e = elemen [i]; // Kontrol Saat Ini E.onfocus = function () {// Tentukan callback gaya untuk fokus // Ubah perbatasan menjadi merah this.style.border = '1px solid red'; } e.onblur = function () {// Memanggil fokus this.style.border = ''; // Kembalikan gaya perbatasan asli}}}} </script>Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.