Menggunakan JavaScript dan formulir

Javascript memiliki banyak peran. Anda dapat menggunakan JavaScript untuk membuat efek khusus. Anda dapat menggunakan JavaScript untuk membuat laman HTML Anda "lebih pintar" dengan memanfaatkan kemampuan pengambilan keputusannya. Dan Anda dapat menggunakan JavaScript untuk menyempurnakan formulir HTML. Penerapan terakhir ini sangat penting. Dari semua topi yang dapat dikenakan JavaScript, fitur pemrosesan formulirnya adalah yang paling dicari dan digunakan.

Tidak ada yang lebih menakutkan di hati seorang penerbit Web selain ketiga surat ini: CGI. CGI (singkatan dari common gateway interface), adalah mekanisme untuk mengangkut data dengan aman dari klien (browser) ke server. Biasanya digunakan untuk mentransfer data dari formulir HTML ke server.

Dengan JavaScript di pihak Anda, Anda dapat memproses formulir sederhana tanpa memanggil server. Dan ketika mengirimkan formulir ke program CGI diperlukan, Anda dapat meminta JavaScript menangani semua persyaratan awal, seperti memvalidasi input untuk memastikan bahwa pengguna telah menandai setiap i. Di kolom ini kita akan melihat lebih dekat pada koneksi bentuk JavaScript, termasuk cara menggunakan objek bentuk JavaScript, cara membaca dan menyetel konten formulir, dan cara memicu peristiwa JavaScript dengan memanipulasi kontrol formulir. Kami juga akan membahas cara menggunakan JavaScript untuk memverifikasi masukan formulir dan mengirimkan formulir ke program CGI.

Mempelajari JavaScript

Artikel ini adalah bagian dari arsip konten teknis JavaWorld. Anda dapat belajar banyak tentang pemrograman JavaScript dengan membaca artikel dalam seri JavaScript , namun perlu diingat bahwa beberapa informasi mungkin sudah usang. Lihat "Menggunakan objek bawaan JavaScript" dan "Men-debug program JavaScript" untuk mengetahui lebih lanjut tentang pemrograman dengan JavaScript.

Membuat formulir

Ada sedikit perbedaan antara formulir HTML lurus dan formulir yang disempurnakan JavaScript. Yang utama adalah bahwa formulir JavaScript bergantung pada satu atau lebih penangan kejadian, seperti onClick atau onSubmit. Ini memanggil tindakan JavaScript saat pengguna melakukan sesuatu di formulir, seperti mengklik tombol. Penangan peristiwa, yang ditempatkan dengan atribut lainnya di tag formulir HTML, tidak terlihat oleh browser yang tidak mendukung JavaScript. Karena sifat ini, Anda sering dapat menggunakan satu formulir untuk JavaScript dan browser non-JavaScript.

Objek kontrol bentuk umum - juga disebut "widget" - termasuk yang berikut ini:

  • Kotak teks untuk memasukkan sebaris teks
  • Tombol tekan untuk memilih tindakan
  • Tombol radio untuk membuat satu pilihan di antara sekelompok opsi
  • Centang kotak untuk memilih atau membatalkan pilihan satu opsi independen

Saya tidak akan repot-repot menghitung semua atribut kontrol ini (widget), dan cara menggunakannya dalam HTML. Hampir semua referensi tentang HTML akan memberi Anda detailnya. Untuk digunakan dengan JavaScript, Anda harus selalu ingat untuk memberikan nama untuk formulir itu sendiri, dan setiap kontrol yang Anda gunakan. Nama memungkinkan Anda untuk mereferensikan objek di halaman JavaScript Anda yang disempurnakan.

Bentuk tipikal terlihat seperti ini. Perhatikan, saya telah memberikan atribut NAME = untuk semua kontrol formulir, termasuk formulir itu sendiri:

 Enter something in the box:

  • FORM NAME = "myform" mendefinisikan dan menamai formulir. Di tempat lain di JavaScript Anda dapat mereferensikan formulir ini dengan nama myform . Nama yang Anda berikan pada formulir terserah Anda, tetapi harus sesuai dengan aturan penamaan variabel / fungsi standar JavaScript (tanpa spasi, tidak ada karakter aneh kecuali garis bawah, dll.).
  • ACTION = "" mendefinisikan bagaimana Anda ingin browser menangani formulir ketika dikirimkan ke program CGI yang berjalan di server. Karena contoh ini tidak dirancang untuk mengirimkan apa pun, URL untuk program CGI dihilangkan.
  • METHOD = "GET" mendefinisikan metode data yang dikirimkan ke server ketika formulir dikirimkan. Dalam hal ini atttibute adalah puffer karena form contoh tidak mengirimkan apapun.
  • INPUT TYPE = "text" mendefinisikan objek kotak teks. Ini adalah markup HTML standar.
  • INPUT TYPE = "button" mendefinisikan objek tombol. Ini adalah markup HTML standar kecuali untuk handler onClick.
  • onClick = "testResults (this.form)" adalah pengendali event - ini menangani sebuah event, dalam hal ini mengklik tombol. Saat tombol diklik, JavaScript menjalankan ekspresi di dalam tanda kutip. Ekspresi tersebut mengatakan untuk memanggil fungsi testResults di tempat lain di halaman, dan meneruskan ke objek formulir saat ini.

Mendapatkan nilai dari objek formulir

Mari bereksperimen dengan mendapatkan nilai dari objek formulir. Muat halaman, lalu ketik sesuatu ke dalam kotak teks. Klik tombol tersebut, dan apa yang Anda ketikkan akan ditampilkan di kotak peringatan.

Daftar 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Berikut cara kerja skripnya. JavaScript memanggil fungsi testResults saat Anda mengklik tombol di formulir. Fungsi testResults melewati objek formulir menggunakan sintaks this.form (kata kunci ini mereferensikan kontrol tombol; formulir adalah properti dari kontrol tombol dan mewakili objek formulir). Saya telah memberikan objek formulir nama formulir di dalam fungsi testResult, tetapi Anda dapat memberi nama apa pun yang Anda suka.

Fungsi testResults sederhana - ini hanya menyalin konten kotak teks ke variabel bernama TestVar. Perhatikan bagaimana isi kotak teks direferensikan. Saya mendefinisikan objek formulir yang ingin saya gunakan (disebut formulir ), objek dalam bentuk yang saya inginkan (disebut kotak input ), dan properti objek yang saya inginkan ( properti nilai ).

Lainnya dari JavaWorld

Ingin lebih banyak tutorial dan berita pemrograman? Dapatkan buletin JavaWorld Enterprise Java dikirim ke kotak masuk Anda.

Menetapkan nilai dalam objek formulir

Properti nilai dari kotak masukan, yang ditunjukkan pada contoh di atas, dapat dibaca dan ditulisi. Artinya, Anda dapat membaca apa pun yang diketik ke dalam kotak, dan Anda dapat menulis kembali data ke dalamnya. Proses pengaturan nilai dalam bentuk objek hanyalah kebalikan dari membacanya. Berikut adalah contoh singkat untuk menunjukkan pengaturan nilai dalam kotak teks formulir. Prosesnya mirip dengan contoh sebelumnya, hanya saja kali ini ada dua tombol. Klik tombol "Baca" dan skrip membaca apa yang Anda ketikkan ke dalam kotak teks. Klik tombol "Tulis" dan skrip menulis frase yang sangat seram ke dalam kotak teks.

Daftar 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • Saat Anda mengklik tombol "Baca", JavaScript memanggil fungsi readText, yang membaca dan menampilkan nilai yang Anda masukkan ke dalam kotak teks.
  • Ketika Anda mengklik tombol "Write", JavaScript memanggil fungsi writeText, yang menulis "Semoga hari Anda menyenangkan!" di kotak teks.

Membaca nilai objek bentuk lainnya

Kotak teks mungkin adalah objek formulir paling umum yang akan Anda baca (atau tulis) menggunakan JavaScript. Namun, Anda dapat menggunakan JavaScript untuk membaca dan menulis nilai dari sebagian besar objek lain (perhatikan bahwa JavaScript saat ini tidak dapat digunakan untuk membaca atau menulis data menggunakan kotak teks sandi). Selain kotak teks, JavaScript dapat digunakan dengan:

  • Kotak teks tersembunyi (TYPE = "hidden").
  • Tombol radio (TYPE = "radio")
  • Kotak centang (TYPE = "checkbox")
  • Area teks ()
  • Daftar ()

Menggunakan Kotak Teks Tersembunyi

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Area teks digunakan untuk entri teks beberapa baris. Ukuran default kotak teks adalah 1 baris dengan 20 karakter. Anda dapat mengubah ukuran menggunakan atribut COLS dan ROWS. Berikut adalah contoh umum area teks dengan kotak teks dengan lebar 40 karakter kali 7 baris:

Anda dapat menggunakan JavaScript untuk membaca konten kotak area teks. Ini dilakukan dengan properti nilai. Berikut ini contohnya: