Form adalah elemen membuat formulir yang digunakan oleh pengguna untuk memasukan data yang dikirim ke peladen (server) untuk diproses. Form HTML paling sering Anda ketemui dibila masuk dan daftar pada halaman web. Jadi ini sangat penting untuk Anda pelajari dan paling sering digunakan kalau Anda memulai untuk membuat halaman daftar aplikasi web.
Daftar isi:
Catatan: Pada pembahasan form, saya akan menggunakan elemen-elemen form yang paling sering digunakan saat membuat aplikasi web. Jadi Anda bisa belajar lebih dalam lagi dibeberapa layanan tutorial lainnya.
Form sederhana
Pada contoh berikut saya memberikannya sedikit lengkap, sebagai awal contoh form HTML. Berikut contoh sederhananya:
<form method="POST">
<p>
<label for="email">Alamat email</label><br>
<input type="email" name="email" id="email">
</p>
<p>
<label for="password">Kata sandi</label><br>
<input type="password" name="password" id="password">
</p>
<p>
<button type="submit">Masuk</button>
</p>
</form>
Penjelasan singkat:
- Tag
<form>
adalah elemen yang digunakan untuk membuat formulir HTML yang di input oleh pengguna. - Tag
<label>
digunakan untuk judul bagi banyak elemen form dan memiliki atributfor
yang harus sama dengan atributid
dari tag<input>
untuk mengikat mereka bersama-sama. - Tag
<input>
adalah elemen formulir yang paling banyak digunakan dan akan ditampilkan berdasarkan type atributnya.
Catatan: Saya menggunakan tag
<p>
dan<br>
pada form agar ada jarak dari keduanya.
Atribut form
Setiap kali menggunakan form Anda harus mengenal atribut yang terpenting agar Anda tidak kebingungan jika ada kendala yang terjadi. Seperti field dari input berkas tidak tampil di BackEnd. Berikut atribut yang sering digunakan:
Atribut method pada form
Atribut method menentukan method HTTP untuk digunakan ketika mengirim data formulir, ada 2 nilai bawaan yaitu GET
dan POST
berikut penjelesannya:
-
GET
digunakan untuk formulir yang dapat dikirim sebagai variabel URL. -
POST
digunakan sebagai transaksi HTTP POST.
Secara bawaan jika Anda tidak menggunakan atribut method
, maka sebenarnya Anda menggunakan method="GET"
sebagai bawaannya. Berikut contohnya:
<form method="POST">
...
</form>
Catatan: Jika Anda ingin mengirim sebuah formulir sensitif maka saya sarankan untuk menggunakan nilai
POST
.
Atribut action pada form
Atribut action digunakan untuk melakukan tindakan ketika formulir dikirim ke peladen. Saya contohkan dengan PHP salah satu BackEnd sisi peladen, Berikut contohnya:
<form action="action.php">
...
</form>
Atribut enctype pada form
Atribut enctype menentukan bagaimana suatu data harus dienkode ketika pengiriman ke peladen, akan tetapi atribut ini dikhususkan untuk atribut method
bernilai POST
. Berikut nilai bawaannya:
-
application/x-www-form-urlencoded
ini nilai bawaan. -
multipart/form-data
gunakan ini jika formulir berisi tag<input>
dengantype=file
. -
text/plain
diperkenalkan pada versi HTML5 untuk tujuan debugging.
Berikut contohnya:
<form enctype="multipart/form-data">
<input type="file">
</form>
Elemen form
Elemen form memiliki 11 elemen untuk membuat formulir sesuai kebutuhan Anda, tetapi saya akan pratekan beberapa saja dari 11 elemen tersebut.
Elemen select pada form
Elemen <select>
untuk membuat daftar secara drop-down, perlu diketahui ada beberapa atribut yang tidak kalah penting untuk Anda, yaitu selected
, multiple
, atau size
. Berikut contohnya:
<label for="buah">Buah</label>
<select name="buah" id="buah">
<optgroup label="Pilih buah">
<option hidden>Pilih buah</option>
<option value="durian">Durian</option>
<option value="jeruk">Jeruk</option>
<option value="semangka">Semangka</option>
</optgroup>
</select>
Elemen textarea pada form
Elemen <textarea>
digunakan untuk formulir multi-line seperti kolom untuk alamat, deskripsi, atau semisalnya. Berikut contohnya:
<label for="alamat">Alamat</label>
<textarea name="alamat" id="alamat" cols="30" rows="10"></textarea>
Elemen button pada form
Elemen <button>
mendifinisikan tombol yang dapat diklik yang memiliki atribut type dengan nilai button
, menu
, submit
, dan reset
. Berikut contohnya:
<button type="submit">Submit</button>
Jenis tipe input HTML
Tipe atau atribut type pada tag <input>
ada 22 nilai bawaannya, maka Anda bisa menyesuaikan untuk kepeluan apa menggunakan nilai tipe tersebut. Saya akan berikan contoh yang sering digunakan.
Tipe text input
Tipe text digunakan untuk input teks dan baris, berikut contohnya:
<input type="text" name="text">
Tipe email input
Tipe email digunakan untuk alamat email, berikut contohnya:
<input type="email" name="email">
Tipe password input
Tipe password digunakan untuk kata sandi, berikut contohnya:
<input type="password" name="password">
Tipe search input
Tipe search digunakan untuk bidang pencarian teks biasa, berikut contohnya:
<input type="search" name="search">
Bonus tutorial form HTML
Berikut saya sajikan agar Anda bisa menambahkan wawasan dengan contoh berikut:
Form halaman register
<form method="POST">
<p>
<label for="nama">Nama Lengkap</label><br>
<input type="text" name="nama" id="nama" placeholder="Tulis namamu...">
</p>
<p>
<label for="email">Alamat Email</label><br>
<input type="email" name="email" id="email" required>
</p>
<p>
<label for="password">Kata Sandi</label><br>
<input type="password" name="password" id="password" placeholder="******">
</p>
<p>
<label for="confirm_password">Konfir Kata Sandi</label><br>
<input type="password" name="confirm_password" id="confirm_password" placeholder="******">
</p>
<p>
<button type="submit">Daftar</button>
</p>
</form>
Hasilnya:
<form method="POST"> <p> <label for="nama">Nama Lengkap</label><br> <input type="text" name="nama" id="nama" placeholder="Tulis namamu..."> </p> <p> <label for="email">Alamat Email</label><br> <input type="email" name="email" id="email"> </p> <p> <label for="password">Kata Sandi</label><br> <input type="password" name="password" id="password" placeholder="******"> </p> <p> <label for="confirm_password">Konfir Kata Sandi</label><br> <input type="password" name="confirm_password" id="confirm_password" placeholder="******"> </p> <p> <button type="button">Daftar</button> </p> </form>Form pencarian seperti e-commerce
<form method="GET">
<p>
<label for="cari">Cari Barang</label><br>
<input type="search" name="cari" id="cari" placeholder="Silakan cari sesuatu...">
</p>
<p>
<label>Kondisi</label><br>
<label for="kondisi1">
<input type="radio" name="kondisi" id="kondisi1"> Baru
</label>
<label for="kondisi2">
<input type="radio" name="kondisi" id="kondisi2"> Bekas
</label>
</p>
<p>
<label>Penawaran</label><br>
<label for="penawaran1">
<input type="checkbox" name="penawaran" id="penawaran1"> Gratis ongkir
</label>
<label for="penawaran2">
<input type="checkbox" name="penawaran" id="penawaran2"> Diskon
</label>
<label for="penawaran3">
<input type="checkbox" name="penawaran" id="penawaran3"> COD
</label>
</p>
</form>
Hasilnya:
<form method="GET"> <p> <label for="cari">Cari Barang</label><br> <input type="search" name="cari" id="cari" placeholder="Silakan cari sesuatu..."> </p> <p> <label>Kondisi</label><br> <label for="kondisi1"> <input type="radio" name="kondisi" id="kondisi1"> Baru </label> <label for="kondisi2"> <input type="radio" name="kondisi" id="kondisi2"> Bekas </label> </p> <p> <label>Penawaran</label><br> <label for="penawaran1"> <input type="checkbox" name="penawaran" id="penawaran1"> Gratis ongkir </label> <label for="penawaran2"> <input type="checkbox" name="penawaran" id="penawaran2"> Diskon </label> <label for="penawaran3"> <input type="checkbox" name="penawaran" id="penawaran3"> COD </label> </p> </form>Form daftar diri
<form method="POST">
<fieldset>
<legend>Daftar diri Anda</legend>
<p>
<label for="nama">Nama Lengkap</label><br>
<input type="text" name="nama" id="nama" placeholder="Tulis namamu...">
</p>
<p>
<label for="telepom">Nomor Telepon</label><br>
<input type="tel" name="telepom" id="telepom" value="08xxxxx">
</p>
<p>
<label for="agama">Agama</label><br>
<select name="agama" id="agama">
<optgroup label="Pilih agama">
<option hidden>Pilih agama</option>
<option>Islam</option>
<option>Protestan</option>
<option>Katolik</option>
<option>Hindu</option>
<option>Buddha</option>
<option>Konghucu</option>
</optgroup>
</select>
</p>
<p>
<label for="jurusan">Jurusan</label><br>
<input list="jurusan" name="jurusan" placeholder="Cari jurusan">
<datalist id="jurusan">
<option>Teknik Informatika</option>
<option>Sistem Informasi</option>
<option>Manajemen Informatika</option>
</datalist>
</p>
<p>
<label for="alamat">Alamat</label><br>
<textarea name="alamat" id="alamat" cols="30" rows="10">Jl. Kebenaran</textarea>
</p>
</fieldset>
</form>
Hasilnya:
<form method="POST"> <fieldset> <legend>Daftar diri Anda</legend> <p> <label for="nama">Nama Lengkap</label><br> <input type="text" name="nama" id="nama" placeholder="Tulis namamu..."> </p> <p> <label for="telepom">Nomor Telepon</label><br> <input type="tel" name="telepom" id="telepom" value="08xxxxx"> </p> <p> <label for="agama">Agama</label><br> <select name="agama" id="agama"> <optgroup label="Pilih agama"> <option hidden>Pilih agama</option> <option>Islam</option> <option>Protestan</option> <option>Katolik</option> <option>Hindu</option> <option>Buddha</option> <option>Konghucu</option> </optgroup> </select> </p> <p> <label for="jurusan">Jurusan</label><br> <input list="jurusan" name="jurusan" placeholder="Cari jurusan"> <datalist id="jurusan"> <option>Teknik Informatika</option> <option>Sistem Informasi</option> <option>Manajemen Informatika</option> </datalist> </p> <p> <label for="alamat">Alamat</label><br> <textarea name="alamat" id="alamat" cols="30" rows="10">Jl. Kebenaran</textarea> </p> </fieldset> </form>Sumber: