Form adalah salah satu elemen penting dalam web yang digunakan untuk mengumpulkan data dari pengunjung web kita. Misalnya, kita ingin membuat web yang memungkinkan pengunjung untuk login, mendaftar, mengirim pesan, atau mencari informasi. Untuk itu, kita perlu membuat form yang bisa diisi oleh pengunjung dan dikirim ke server untuk diproses lebih lanjut.
|
| Gambar 15.1 : Ilustrasi Membuat Form Sederhana di HTML |
Daftar Isi
Membuat Form Sederhana di HTML
Form dalam HTML bisa dibuat dengan menggunakan tag <form> yang memiliki beberapa atribut penting, yaitu:
actionuntuk menentukan alamat URL dari halaman yang akan memproses data form.methoduntuk menentukan metode pengiriman data form, bisa berupaGETatauPOST.nameuntuk memberikan nama pada form kita, agar bisa diakses oleh JavaScript atau PHP.
Contoh:
<form action="proses.php" method="POST" name="formku">
<!-- isi form di sini -->
</form>Elemen-elemen Form
Di dalam tag <form>, kita bisa menambahkan berbagai elemen form yang sesuai dengan kebutuhan kita. Elemen-elemen form ini bisa berupa:
<input>untuk membuat berbagai jenis inputan, seperti teks, password, checkbox, radio, tombol, dll.<textarea>untuk membuat inputan teks multi-baris.<select>dan<option>untuk membuat inputan pilihan (dropdown).<label>untuk memberikan label atau keterangan pada inputan.<fieldset>dan<legend>untuk membuat grup atau kategori pada inputan.
Mari kita lihat contoh-contoh penggunaan elemen-elemen form ini.
Input Teks
Input teks adalah inputan yang paling umum digunakan dalam form. Input teks bisa dibuat dengan menggunakan tag <input> dengan atribut type="text". Input teks ini bisa digunakan untuk mengisi nama, email, alamat, dll.
Contoh:
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda..." />
Perhatikan bahwa kita juga menggunakan atribut id dan name pada tag <input>. Atribut id digunakan untuk memberikan identitas unik pada inputan, sedangkan atribut name digunakan untuk memberikan nama variabel yang akan dikirim ke server. Atribut placeholder digunakan untuk memberikan teks sementara pada inputan.
Kita juga menggunakan tag <label> untuk memberikan label atau keterangan pada inputan. Tag <label> ini memiliki atribut for yang harus sama dengan atribut id dari inputan yang bersangkutan. Tag <label> ini berguna untuk meningkatkan aksesibilitas dan kemudahan penggunaan form.
Input Password
Input password adalah inputan yang digunakan untuk mengisi data yang sensitif, seperti password atau PIN. Input password bisa dibuat dengan menggunakan tag <input> dengan atribut type="password". Input password ini akan menampilkan karakter-karakter bintang atau bulat sebagai ganti teks yang diinput.
Contoh:
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Masukkan password Anda..." />
Checkbox
Checkbox adalah inputan yang digunakan untuk memilih satu atau lebih pilihan dari beberapa pilihan yang tersedia. Checkbox bisa dibuat dengan menggunakan tag <input> dengan atribut type="checkbox". Checkbox ini akan menampilkan kotak-kotak yang bisa dicentang atau tidak.
Contoh:
<label>Hobi:</label>
<input type="checkbox" id="membaca" name="hobi[]" value="Membaca" />
<label for="membaca">Membaca</label>
<input type="checkbox" id="menulis" name="hobi[]" value="Menulis" />
<label for="menulis">Menulis</label>
<input type="checkbox" id="bermain" name="hobi[]" value="Bermain" />
<label for="bermain">Bermain</label>
Perhatikan bahwa kita menggunakan atribut value untuk memberikan nilai pada setiap checkbox. Nilai ini akan dikirim ke server sebagai data form. Kita juga menggunakan tanda kurung siku ([]) pada atribut name untuk menandakan bahwa inputan ini bisa memiliki lebih dari satu nilai.
Radio
Radio adalah inputan yang digunakan untuk memilih satu pilihan dari beberapa pilihan yang tersedia. Radio bisa dibuat dengan menggunakan tag <input> dengan atribut type="radio". Radio ini akan menampilkan lingkaran-lingkaran yang hanya bisa dipilih satu.
Contoh:
<label>Jenis Kelamin:</label>
<input type="radio" id="laki-laki" name="jenis_kelamin" value="Laki-laki" />
<label for="laki-laki">Laki-laki</label>
<input type="radio" id="perempuan" name="jenis_kelamin" value="Perempuan" />
<label for="perempuan">Perempuan</label>
Perhatikan bahwa kita menggunakan atribut value untuk memberikan nilai pada setiap radio. Nilai ini akan dikirim ke server sebagai data form. Kita juga menggunakan atribut name yang sama untuk semua radio, agar hanya bisa dipilih satu.
Tombol
Tombol adalah inputan yang digunakan untuk melakukan aksi tertentu, seperti mengirim, mereset, atau membatalkan form. Tombol bisa dibuat dengan menggunakan tag <input> dengan atribut type yang bisa berupa submit, reset, atau button.
Contoh:
<input type="submit" name="submit" value="Kirim" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="cancel" value="Batal" />
Perhatikan bahwa kita menggunakan atribut value untuk memberikan teks pada tombol. Teks ini akan ditampilkan pada tombol.
Textarea
Textarea adalah inputan yang digunakan untuk mengisi teks multi-baris, seperti komentar, pesan, atau deskripsi. Textarea bisa dibuat dengan menggunakan tag <textarea> yang memiliki konten teks di antara tag pembuka dan penutup.
Contoh:
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" placeholder="Masukkan pesan Anda..." rows="5" cols="40"></textarea>
Perhatikan bahwa kita juga menggunakan atribut rows dan cols untuk menentukan jumlah baris dan kolom pada textarea. Atribut placeholder digunakan untuk memberikan teks sementara pada textarea.
Select dan Option
Select dan option adalah inputan yang digunakan untuk membuat pilihan (dropdown) yang bisa dipilih oleh pengguna. Select dan option bisa dibuat dengan menggunakan tag <select> yang berisi tag-tag <option> sebagai pilihan-pilihannya.
Contoh:
<label for="kota">Kota:</label>
<select id="kota" name="kota">
<option value="">--Pilih Kota--</option>
<option value="Jakarta">Jakarta</option>
<option value="Bandung">Bandung</option>
<option value="Yogyakarta">Yogyakarta</option>
<option value="Surabaya">Surabaya</option>
</select>
Perhatikan bahwa kita menggunakan atribut value untuk memberikan nilai pada setiap option. Nilai ini akan dikirim ke server sebagai data form. Kita juga bisa menggunakan atribut selected untuk menentukan option mana yang dipilih secara default.
Membuat Form Login
Sebagai contoh, mari kita buat form login yang meminta pengguna untuk mengisi username dan password. Form login ini akan menggunakan beberapa elemen form yang sudah kita pelajari sebelumnya, yaitu:
<input type="text">untuk input username.<input type="password">untuk input password.<input type="checkbox">untuk input remember me.<input type="submit">untuk tombol login.
Berikut ini kode HTML untuk membuat form login:
<form action="login.php" method="POST" name="form_login">
<fieldset>
<legend>Login</legend>
<p>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Masukkan username Anda..." />
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Masukkan password Anda..." />
</p>
<p>
<label><input type="checkbox" id="remember" name="remember" value="remember" /> Remember me</label>
</p>
<p>
<input type="submit" id="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
Perhatikan bahwa kita menggunakan tag <fieldset> dan <legend> untuk membuat grup atau kategori pada form login. Tag <fieldset> ini akan membuat garis di sekeliling form, sedangkan tag <legend> ini akan memberikan teks pada garis tersebut.
Kita juga menggunakan tag <p> untuk membuat paragraf atau baris baru pada setiap elemen form. Ini berguna untuk membuat form terlihat lebih rapi dan mudah dibaca.
Kesimpulan
Form adalah salah satu elemen penting dalam web yang digunakan untuk mengumpulkan data dari pengunjung web kita. Form dalam HTML bisa dibuat dengan menggunakan tag <form> yang memiliki beberapa atribut penting, yaitu action, method, dan name.
Di dalam tag <form>, kita bisa menambahkan berbagai elemen form yang sesuai dengan kebutuhan kita, seperti <input>, <textarea>, <select>, dan lain-lain. Elemen-elemen form ini juga memiliki atribut-atribut yang harus diperhatikan, seperti type, name, value, placeholder, dll.
Dengan menggunakan elemen-elemen form ini, kita bisa membuat form yang beragam dan menarik, seperti form login, form registrasi, form kontak, dll. Form-form ini nantinya akan dikirim ke server untuk diproses lebih lanjut dengan bahasa pemrograman web seperti PHP atau JavaScript.
Demikian artikel tentang Membuat Form dengan HTML. Semoga artikel ini bermanfaat bagi kita dan teman-teman yang ingin belajar HTML dasar. Jika ada pertanyaan atau saran, silakan tulis di kolom komentar di bawah. Terima kasih.