Membuat Form

Formulir HTML diperlukan, bila Anda ingin mengumpulkan beberapa data dari pengunjung situs. Misalnya, selama pendaftaran pengguna, Anda ingin mengumpulkan informasi seperti nama, alamat email, kartu kredit, dll.

Formulir akan mengambil masukan dari pengunjung situs dan kemudian akan mempostingnya ke aplikasi back-end seperti CGI, ASP Script atau skrip PHP dll. Aplikasi back-end akan melakukan pemrosesan yang diperlukan pada data yang diteruskan berdasarkan logika bisnis yang ditentukan di dalamnya aplikasi.

Ada berbagai elemen formulir yang tersedia seperti bidang teks, bidang teks, menu drop-down, tombol radio, kotak centang, dll.

Tag HTML <form> digunakan untuk membuat formulir HTML dan memiliki sintaks berikut -

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Atribut Formulir

Selain atribut umum, berikut adalah daftar atribut formulir yang paling sering digunakan -

No.Atribut & Deskripsi
1

tindakan

Skrip backend siap untuk memproses data yang Anda lewati.

2

metode

Metode yang akan digunakan untuk mengunggah data. Yang paling sering digunakan adalah metode GET dan POST.

3

target

Tentukan jendela atau bingkai target tempat hasil skrip akan ditampilkan. Dibutuhkan nilai seperti _blank, _self, _parent dll.

4

enctype

Anda dapat menggunakan atribut enctype untuk menentukan bagaimana browser mengkodekan data sebelum mengirimkannya ke server. Nilai yang memungkinkan adalah -

application / x-www-form-urlencoded - Ini adalah metode standar yang digunakan sebagian besar formulir dalam skenario sederhana.

mutlipart / form-data - Digunakan ketika Anda ingin mengupload data biner dalam bentuk file seperti gambar, file kata dll.

Catatan - Anda dapat merujuk ke Perl & CGI untuk detail tentang cara kerja unggahan data formulir.

Kontrol Formulir HTML

Ada berbagai jenis kontrol formulir yang dapat Anda gunakan untuk mengumpulkan data menggunakan formulir HTML -

  • Kontrol Input Teks
  • Kontrol Kotak Centang
  • Kontrol Kotak Radio
  • Pilih Kontrol Kotak
  • File Pilih kotak
  • Kontrol Tersembunyi
  • Tombol yang Dapat Diklik
  • Tombol Kirim dan Atur Ulang

Kontrol Input Teks

Ada tiga jenis input teks yang digunakan pada formulir -

  • Kontrol input teks satu baris - Kontrol ini digunakan untuk item yang hanya memerlukan satu baris input pengguna, seperti kotak pencarian atau nama. Mereka dibuat menggunakan tag <input> HTML .

  • Kontrol input kata sandi - Ini juga merupakan input teks satu baris tetapi menyembunyikan karakter segera setelah pengguna memasukkannya. Mereka juga dibuat menggunakan tag HTMl <input>.

  • Kontrol input teks multi-baris - Ini digunakan ketika pengguna diminta untuk memberikan detail yang mungkin lebih panjang dari satu kalimat. Kontrol input multi-baris dibuat menggunakan tag HTML <textarei> .

Kontrol masukan teks satu baris

Kontrol ini digunakan untuk item yang hanya memerlukan satu baris input pengguna, seperti kotak pencarian atau nama. Mereka dibuat menggunakan tag <input> HTML.

Contoh

Berikut adalah contoh dasar input teks satu baris yang digunakan untuk mengambil nama depan dan nama belakang -

<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

Atribut

Berikut adalah daftar atribut tag <input> untuk membuat kolom teks.

No.Atribut & Deskripsi
1

Tipe

Menunjukkan jenis kontrol masukan dan untuk kontrol masukan teks akan disetel ke teks .

2

Nama

Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.

3

Nilai

Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol.

4

Ukuran

Memungkinkan untuk menentukan lebar kontrol input teks dalam hal karakter.

5

panjang maksimal

Memungkinkan untuk menentukan jumlah karakter maksimum yang dapat dimasukkan pengguna ke dalam kotak teks.

Kontrol masukan kata sandi

Ini juga merupakan input teks satu baris tetapi menutupi karakter segera setelah pengguna memasukkannya. Mereka juga dibuat menggunakan tag <input> HTML tetapi atribut tipe disetel ke kata sandi .

Contoh

Berikut adalah contoh dasar dari input kata sandi satu baris yang digunakan untuk mengambil kata sandi pengguna -

<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

Atribut

Berikut adalah daftar atribut tag <input> untuk membuat field password.

No. Atribut & Deskripsi
1

Tipe

Menunjukkan jenis kontrol masukan dan untuk kontrol masukan kata sandi akan disetel ke kata sandi .

2

nama

Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.

3

nilai

Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol.

4

ukuran

Memungkinkan untuk menentukan lebar kontrol input teks dalam hal karakter.

5

panjang maksimal

Memungkinkan untuk menentukan jumlah karakter maksimum yang dapat dimasukkan pengguna ke dalam kotak teks.

Kontrol Input Teks Beberapa Baris

Ini digunakan ketika pengguna diminta untuk memberikan detail yang mungkin lebih panjang dari satu kalimat. Kontrol input multi-baris dibuat menggunakan tag HTML <textarei>.

Contoh

Berikut adalah contoh dasar dari input teks multi-baris yang digunakan untuk mengambil deskripsi item -

<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

Atribut

Berikut adalah daftar atribut dari tag <textarei>.

No.Atribut & Deskripsi
1

nama

Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.

2

baris

Menunjukkan jumlah baris kotak area teks.

3

cols

Menunjukkan jumlah kolom kotak area teks

Kontrol Kotak Centang

Kotak centang digunakan ketika lebih dari satu opsi diperlukan untuk dipilih. Mereka juga dibuat menggunakan tag <input> HTML tetapi atribut tipe disetel ke kotak centang. .

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan dua kotak centang -

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

Atribut

Berikut adalah daftar atribut untuk tag <checkbox>.

No.Atribut & Deskripsi
1

Tipe

Menunjukkan jenis kontrol masukan dan untuk kontrol masukan kotak centang itu akan disetel ke kotak centang. .

2

nama

Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.

3

nilai

Nilai yang akan digunakan jika kotak centang dipilih.

4

diperiksa

Setel untuk dicentang jika Anda ingin memilihnya secara default.

Kontrol Tombol Radio

Tombol radio digunakan ketika dari banyak pilihan, hanya satu pilihan yang diperlukan untuk dipilih. Mereka juga dibuat menggunakan tag <input> HTML tetapi atribut tipe disetel ke radio .

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan dua tombol radio -

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

Atribut

Berikut adalah daftar atribut untuk tombol radio.

Sr TidakAtribut & Deskripsi
1

Tipe

Menunjukkan jenis kontrol masukan dan untuk kontrol masukan kotak centang itu akan diatur ke radio.

2

nama

Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.

3

nilai

Nilai yang akan digunakan jika kotak radio dipilih.

4

diperiksa

Setel untuk dicentang jika Anda ingin memilihnya secara default.

Pilih Kontrol Kotak

Kotak pilih, juga disebut kotak drop-down yang menyediakan opsi untuk mendaftar berbagai opsi dalam bentuk daftar drop-down, dari mana pengguna dapat memilih satu atau lebih opsi.

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan satu kotak drop-down

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

Atribut

Berikut adalah daftar atribut penting dari tag <select> -

No.Atribut & Deskripsi
1

nama

Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.

2

ukuran

Ini dapat digunakan untuk menampilkan kotak daftar gulir.

3

banyak

Jika disetel ke "beberapa" maka izinkan pengguna untuk memilih beberapa item dari menu.

Berikut adalah daftar atribut penting dari tag <option> -

No.Atribut & Deskripsi
1

nilai

Nilai yang akan digunakan jika opsi di kotak kotak pilih dipilih.

2

terpilih

Menentukan bahwa opsi ini harus menjadi nilai yang dipilih pertama kali saat halaman dimuat.

3

label

Cara alternatif untuk memberi label opsi

Kotak Unggah File

Jika Anda ingin mengizinkan pengguna untuk mengunggah file ke situs web Anda, Anda perlu menggunakan kotak unggah file, juga dikenal sebagai kotak pilih file. Ini juga dibuat menggunakan elemen <input> tetapi atribut type disetel ke file .

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan satu kotak unggah file -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

Atribut

Berikut adalah daftar atribut penting dari kotak unggah file -

No.Atribut & Deskripsi
1

nama

Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.

2

menerima

Menentukan jenis file yang diterima server.

Kontrol Tombol

Ada berbagai cara dalam HTML untuk membuat tombol yang dapat diklik. Anda juga dapat membuat tombol yang dapat diklik menggunakan tag <input> dengan menyetel atribut type-nya ke tombol . Atribut type dapat mengambil nilai berikut -

No.Jenis & Deskripsi
1

Kirimkan

Ini membuat tombol yang secara otomatis mengirimkan formulir.

2

reset

Ini membuat tombol yang secara otomatis mengatur ulang kontrol formulir ke nilai awalnya.

3

tombol

Ini membuat tombol yang digunakan untuk memicu skrip sisi klien saat pengguna mengklik tombol itu.

4

gambar

Ini membuat tombol yang dapat diklik tetapi kita dapat menggunakan gambar sebagai latar belakang tombol.

Contoh

Berikut adalah contoh kode HTML untuk formulir dengan tiga jenis tombol -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

Kontrol Formulir Tersembunyi

Kontrol formulir tersembunyi digunakan untuk menyembunyikan data di dalam halaman yang nantinya dapat didorong ke server. Kontrol ini bersembunyi di dalam kode dan tidak muncul di halaman sebenarnya. Misalnya, formulir tersembunyi berikut digunakan untuk menyimpan nomor halaman saat ini. Ketika pengguna akan mengklik halaman berikutnya maka nilai kontrol tersembunyi akan dikirim ke server web dan di sana akan memutuskan halaman mana yang akan ditampilkan berikutnya berdasarkan halaman saat ini yang dilewati.

Contoh

Berikut adalah contoh kode HTML untuk menunjukkan penggunaan kontrol tersembunyi -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

Silahkan anda coba untuk membuat file file html diatas, dan anda jalankan pada browser anda agar dapat memahami arti dari tiap tiap baris kode yang anda tuliskan.

Selamat Belajar


Last modified: Monday, 14 June 2021, 8:05 AM