Website yang baik itu website yang bisa membuat penggunanya menjadi lebih interaktif. Tidak hanya untuk membaca informasi saja, website dapat disebut interaktif apabila memungkinkan penggunanya dapat melakukan sesuatu di dalamnya. Interaksi yang biasanya dilakukan pada website selain mengklik ialah mengetik.
Banyak aktivitas yang bisa dilakukan oleh pengguna dalam sebuah website dengan mengetik, mulai dari login ke sebuah akun, memposting sesuatu, berkomunikasi dengan teman, dan sebagainya. Dari berbagai aktivitas mengetik tersebut, user berinteraksi dengan komponen form.
Membuat Form Pada HTML
Dalam sebuah website, dikenal yang namanya form. Sesuai uraian saya diatas, form ini berguna untuk mendapatkan informasi dari pengguna. Contoh, pada saat ingin login ke facebook, Anda mengisikan alamat email dan password pada kotak putih yang kemudian mengklik sebuah tombol berwarna biru. Ketiga elemen tersebut dikelompokkan dan dinamai “form login”.
Untuk membuat form pada sebuah halaman web, ketikkan script ini di file html Anda :
[sourcecode language=”plain”]
<html>
<head>
<title>Belajar Membuat Form Pada HTML – Makinrajin</title>
</head>
<body>
<form>
<!– Elemen yang ada pada form –>
</form>
</body>
</html>
[/sourcecode]
Dalam tag <form> sendiri, terdapat 2 atribut pokok yang sering digunakan, yaitu action dan method.
Atribut action berfungsi untuk mengirimkan data yang ada pada inputan ke sebuah script (biasanya PHP) yang kemudian akan diproses lebih lanjut. Berikut ini adalah contoh penulisan atribut action pada tag <form>.
[sourcecode language=”plain”]
<form action=”login.php” … >
<!– Elemen yang ada pada form –>
</form>
[/sourcecode]
Sedangkan method ialah metode atau cara yang digunakan dalam mengirimkan data ke action yang dituju. Atribut method hanya memiliki 2 value saja, yakni GET dan POST. Method GET, data yang dikirimkan akan nampak pada URL / Address bar. Sedangkan POST datanya tersembunyi. Berikut adalah cara menulis method pada <form>.
[sourcecode languauge=”plain”]
<form action=”login.php” method=”GET”>
<!– Elemen yang ada pada form –>
</form>
[/sourcecode]
Pada form yang ada pada sebuah halaman web, terdapat berbagai elemen / objek yang memungkinkan pengguna dapat berinteraksi, diantaranya adalah :
-
Input Text
Elemen input text ini berfungsi untuk memungkinkan pengguna mengetikkan sesuatu yang panjangnya relatif pendek, misalnya nama, email, dan kata sandi. Untuk membuat input text, ketikkan script ini pada HTML Anda
[sourcecode language=”plain”]
<input type=’text’ name=’nama’ placeholder=’Nama’>
[/sourcecode]
Penjelasan :
- <input : ialah atribut yang menunjukkan bahwa elemen ini adalah inputan
- type : tipe dari elemen input. Karena di bagian ini kita bahas input text, maka value-nya adalah “text”
- name : menamai inputan, nanti ada kaitannya dengan pemrosesannya
- placeholder : memunculkan text dalam input yang akan hilang ketika input sudah ada isi / value-nya
-
Input Radio
Input radio fungsinya untuk menyuruh pengguna memilih salah satu dari beberapa opsi yang ada. Yang paling umum kita jumpai radio ini untuk memilih jenis kelamin dan memilih jawaban dari sebuah pertanyaan.
[sourcecode language=”plain”]
<input type=”radio” name=”gender” value=”pria”> Pria
<input type=”radio” name=”gender” value=”wanita”> Wanita
[/sourcecode]
Penjelasan :
- Value : memberikan isi dari sebuah input secara default. Karena input radio hanya dapat di-klik, maka kita harus memberikan value-nya secara default. Atribut ini juga dapat diterapkan pada elemen input yang lain
-
Input Checkbox
Fungsinya hampir sama seperti radio, yakni memilih opsi. Bedanya jika di radio user hanya bisa memilih satu opsi saja, kalau checkbox bisa lebih dari satu opsi. Biasanya, kita jumpai pada rules agreement
[sourcecode language=”plain”]
<input type=”checkbox”> I agree with Rules Agreement
[/sourcecode]
-
Input Date
Bentuknya hampir mirip dengan input text, namun data yang dapat dimasukkan melalui inputan ini hanya berupa format tanggal saja. Ketika input ini di-klik, maka muncul sebuah box semacam kalender yang disebut datepicker, fungsinya buat memudahkan user dalam memilih tanggal.
[sourcecode language=”plain”]
<input type=”date” name=”tanggal” placeholder=”Pilih tanggal”>
[/sourcecode]
-
Input Email
Sekilas tidak ada yang berbeda dengan input text, baik dari bentuknya maupun format inputannya. Meskipun formatnya sama, input ini mampu memfilter yang diketikkan pengguna itu adalah alamat email. Kalau bukan alamat email, maka form tidak mau action.
[sourcecode language=”plain”]
<input type=”email” name=”email” placeholder=”E-Mail”>
[/sourcecode]
-
Input Password
Masih berkutat di input yang jelas dari segi wujud tidaklah berbeda. Pada input password, bedanya dengan text hanya dari inputan yang tampil itu berupa bintang-bintang atau bulat-bulat. Ya karena biar kata sandi yang dimasukkan itu gak dilihat orang lain disekitarnya.
[sourcecode language=”plain”]
<input type=’password’ name=’katasandi’>
[/sourcecode]
-
Input Number
Masih di input lagi. Yang membedakan input number ialah format masukannya yang hanya mengijinkan angka saja, selain itu tidak dibolehkan.
[sourcecode language=”plain”]
<input type=’number’ name=’angka’>
[/sourcecode]
-
Textarea
Mirip seperti input box, tetapi textarea ini dipakai untuk menuliskan teks yang notabene value-nya lebih banyak dari input text. Biasanya, textarea dipakai buat menuliskan catatan yang bernilai banyak.
[sourcecode language=”plain”]
<textarea cols=”10” rows=”6” placeholder=”Alamat rumah”></textarea>
[/sourcecode]
Penjelasan :
- cols : menentukan panjang kesamping (lebar) dari textarea
- rows : menentukan panjwang kebawah (tinggi) dari textarea
-
Select
Elemen select fungsinya sama dengan input radio, namun bentuknya yang berbeda. Jika di radio munculnya terlihat sedikit berantakan, maka di elemen select ini terlihat lebih simpel, karena opsi-opsinya disembunyikan pada sebuah box dropdown.
[sourcecode language=”plain”]
<select name=”opsi”>
<option>Opsi Pertama</option>
<option>Opsi Kedua</option>
</select>
[/sourcecode]
Penjelasan :
- Tag option merupakan opsi-opsi yang akan ditampilkan pada dropdown select
-
Button
Dalam sebuah form, harus ada sebuah tombol yang ketiika diklik akan mengeksekusi inputan ke action yang dituju.
[sourcecode language=”plain”]
<button>Login</button>
[/sourcecode]
Jika elemen button ini ada di dalam <form>, maka dia akan mengeksekusi form sesuai dengan action-nya. Tapi kalau tidak mau seperti ini, bisa ditambah atribut type=”button” di dalam tag button.
[sourcecode language=”plain”]
<button type=”button”>Tombol biasa</button>
[/sourcecode]
type=”button” ini fungsinya untuk menandakan bahwa tombol ini bukanlah tombol submit, melainkan hanya sebuah tombol biasa.
Selain itu, Anda juga bisa membuat button dengan menggunakan tag seperti di bawah ini :
[sourcecode language=”plain”]
<input type="button" value="Daftar">
[/sourcecode]
Untuk value nya itu adalah tulisan di dalam tombol yang Anda buat. Jika Anda mengisi value dengan tulisan “Daftar” maka tulisan di dalam button / tombol itu adalah “Daftar”.
-
Input Submit
Penulisan tag input submit ini adalah sebagai berikut :
[sourcecode language=”plain”]
<input type="submit" name="daftar" value="Daftar">
[/sourcecode]
Memang secara sekilas output yang dihasilkan sama dengan tag input type button maupun tag button. Yang membedakan adalah proses di dalamnya. Tag input submit ini digunakan untuk mengirim inputan dari user. Lebih jelasnya Anda membaca artikel tentang perbedaan method POST dan GET pada PHP.
Latihan Membuat Form di HTML
Di atas kita sudah belajar mengenai form yang ada di HTML. Hanya omong kosong belaka jika belajarnya hanya sekedar membaca tanpa mencobanya. Maka dari itu, sekarang kita praktekkan bagaimana cara membuat formulir pendaftaran menggunakan HTML.
Pertama, buatlah sebuah script HTML dan ketikkan ini di text editor favorit Anda :
[sourcecode language=”plain”]
<html>
<head>
<title>Formulir Pendaftaran – Makinrajin</title>
</head>
<body>
<form action=”mendaftar.php” method=”get”>
Nama : <input type=”text” name=”nama”></br>
Email : <input type=”email” name=”email”></br>
Password : <input type=”password” name=”password”></br>
Telepon : <input type=’number’ name=’telepon’></br>
Jenis kelamin :
<select name=’gender’>
<option value="L">Laki-laki</option>
<option value="P">Perempuan</option>
</select></br>
Alamat : <textarea cols=’12’ rows=’6’ name=’alamat’></textarea></br>
<input type="submit" name="daftar" value="Daftar">
</form>
</body>
</html>
[/sourcecode]
Kemudian simpan di desktop aja, supaya mudah kita mencarinya. Simpan dengan ekstensi *.html. Kemudian, buka file-nya menggunakan web browser dan akan terlihat seperti gambar ini
Oh iya, di situ ada tag </br>. Jika Anda belum tahu, Anda bisa membaca artikel tentang penjelasan tag </br> dan tag <p>.
Hasil form di atas masih sangat sederhana dan belum bisa melakukan proses pendaftaran. Anda bisa merapikannya dengan menggunakan tabel HTML. Sedangkan agar form tersebut bisa melakukan proses pendaftaran, Anda perlu belajar PHP.
Nah, tutorial cara membuat form pada HTML sudah selesai. Anda bisa memodifikasi form yang telah Anda buat dan apabila ada kesulitan bisa ditanyakan di kolom komentar.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development