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 Tidak | Atribut & 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