Panduan Membuat Form di HTML
Membuat Form HTML - Form merupakan salah satu bentuk pengumpulan data maupun informasi yang terdiri dari pertanyaan-pertanyaan singkat yang harus diisi oleh user atau pengunjung website. Selain itu, form juga dapat digunakan untuk membuat formulir registrasi maupun login ke website tertentu.
Untuk membuat form menggunakan bahasa HTML dapat mengunakan element HTML yaitu <form> ... </form>. Dalam element form tersebut, harus ditambahkan element lain sesuai dengan jenis inputan yang dipakai yaitu element <input>, <label>, <textarea>, <select>, dan <button>. Kesemua element tadi akan kita bahas satu persatu.
Perlu diingat bahwa formulir HTML tidak cukup hanya dengan membuat form nya saja, perlu program tambahan untuk memproses data tersebut, sehingga dibutuhkan atribut tambahan pada element form yaitu action untuk menentukan aksi yang akan dilakukan saat data dikirim. Format penulisan element menjadi:
<form action="action_page.php">
<!-- Form field -->
</form>Membuat Form HTML - Element Label
Element pertama yang kita bahas adalah label. Element label difungsikan untuk menambahkan informasi maupun keterangan terkait dengan jenis inputan yang digunakan pada form HTML. Elemen label selalu disandingkan dengan element input yang dipakai. Tag yang digunakan untuk membuat label adalah <label> … </label>. Element label dapat ditambahkan dengan atribut lain seperti for=”value” untuk menghubungkan label dengan element lain pada form. Contoh penggunaan element <label> kita sertakan dengan element lain pada form di bawah ini.
Membuat Form HTML - Element Input
Element input banyak digunakan pada pembuatan form HTML dan berfungsi sebagai inputan data maupun informasi lain yang dibutuhkan. Tag yang digunakan untuk membuat element ini adalah <input> tanpa tag penutup. Tag pembuka yang tidak memiliki pasangan tag penutup biasa kita sebut dengan istilah self closing tag.
Ada banyak jenis inputan atau text fields yang dapat kita gunakan untuk membuat form pada HTML, kita ambil beberapa jenis text fields yang biasa dipakai dalam pembuatan form yaitu:
Element input dengan type=”text” <input type="text">, menerima input berapa text singkat seperti nama, username, alamat, tempat lahir, dan lain-lain. Contoh:
<form>
<label for="fname">First Name :</label><br>
<input type="text" name="fname" id="fname"><br>
<label for="lname">Last Name :</label><br>
<input type="text" name="lname" id="lname"><br><br>
<input type="submit">
</form>
Element input dengan type=”password” <input type="password">, berfungsi untuk menerima input berupa password yang disamarkan dengan tanda titik. Contoh:
<form>
<label for="uname">Username :</label><br>
<input type="text" name="uname" id="uname"><br>
<label for="pwd">Password :</label><br>
<input type="password" name="pwd" id="pwd"><br><br>
<input type="submit">
</form>
Element input dengan type=”radio” <input type="radio">, input berupa radio button (memilih salah satu opsi yang telah disediakan). Contoh:
<h2>Pendidikan Terakhir :</h2>
<form>
<input type="radio" name="pendidikan" id="D3" value="Diploma 3">
<label for="D3">Diploma 3 (D3)</label><br>
<input type="radio" name="pendidikan" id="S1" value="Strata 1">
<label for="S1">Strata 1 (S1)</label><br>
<input type="radio" name="pendidikan" id="S2" value="Strata 2">
<label for="S2">Strata 2 (S2)</label><br><br>
<input type="submit">
</form>
Element input dengan type=”checkbox” <input type="checkbox">, input berupa checkbox atau centang (dapat memilih lebih dari satu opsi yang telah disediakan). Contoh:
<h2>Bahasa Pemrograman yang dikuasai :</h2>
<form>
<input type="checkbox" name="lang" id="lang1" value="HTML">
<label for="lang1">HTML</label><br>
<input type="checkbox" name="lang" id="lang2" value="CSS">
<label for="lang2">CSS</label><br>
<input type="checkbox" name="lang" id="lang3" value="JS">
<label for="lang3">Javascript</label><br><br>
<input type="submit">
</form>
Element input dengan type=”number” <input type="number">, menerima input berupa nomor atau angka. Tambahkan atribut min (angka minimal), max (angka maksimal). Contoh:
<h2>Tinggi dan berat badan :</h2>
<form>
<label for="tinggi">Tinggi Badan :</label>
<input type="number" name="badan" id="tinggi" value="150" min="150" max="200"> cm <br><br>
<label for="berat">Berat Badan :</label>
<input type="number" name="badan" id="berat" value="50" min="50" max="150"> kg <br><br>
<input type="submit">
</form>
Element input dengan type=”date” <input type="date">, menerima input berapa tanggal. Contoh:
<form>
<label for="day">Tanggal Lahir :</label><br>
<input type="date" name="day" id="day">
</form>Element input dengan type=”email” <input type="email">, menerima input berupa alamat email. Contoh:
<form>
<label for="email">Alamat Email :</label><br>
<input type="email" name="email" id="email" value="example@domain.com">
</form>Elemen input dengan type="tel" <input type="tel">, menerima input berupa nomor telepon. Tambahkan atribut pattern untuk format nomor telepon. Contoh:
<form>
<label for="hp">Nomor Telepon :</label><br>
<input type="tel" name="hp" id="hp" pattern="+62 - [0-9]{3} - [0-9]{4} - [0-9]{3}" value="+62">
</form>
Element input dengan type="file" <input type="file">, menerima input berupa file maupun dokumen. Contoh:
<h2>Upload berkas pendukung :</h2>
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit">
</form>
Element input dengan type="submit" <input type="submit">, menerima input berupa submit. Contoh:
<form>
<input type="submit" value="Kirim">
</form>Elemen input dengan type="reset" <input type="reset">, menerima input berupa reset. Contoh:
<form>
<input type="reset">
</form>Selain type input di atas, masih terdapat type inputan lain yaitu:
- <input type="color">
- <input type="datetime-local">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="range">
- <input type="search">
- <input type="time">
- <input type="url">
- <input type="week">
Membuat Form HTML - Element Textarea
Textarea merupakan element yang memiliki fungsi sama dengan element input dengan type=”text” yaitu menerima input berupa text, perbedaanya textarea dapat menerima lebih banyak karakter teks. Textarea biasa difungsikan untuk inputan berupa isian lengkap maupun komentar.
Untuk membuat element ini gunakan tag <textarea> … </textarea>. Ukuran textarea dapat dicustom dengan menambahkan atribut row dengan value berupa jumlah baris yang diinginkan, dan atribut cols untuk lebar textarea yang digunakan. Contoh membuat textarea dengan jumlah baris 5 dengan lebar textarea 50:
<h2>Tuliskan komentar Anda di sini.</h2>
<form>
<textarea name="komentar" rows="5" cols="50"></textarea><br><br>
<input type="submit">
</form>
Selain cara di atas, dapat juga dengan menambahkan atribut style, contoh membuat textarea dengan lebar 300px dan tinggi 200px
<form>
<textarea name="komentar" style="width: 300px; height: 200px;"></textarea>
</form>Membuat Form HTML - Element Select
Element select berfungsi untuk membuat form dalam bentuk list dropdown. Penggunaan element form jenis ini biasa difungsikan untuk membuat form dengan banyak opsi atau pilihan, misalnya nama kota atau provinsi. Untuk membuat element select dibutuhkan tag <select> ... </select>, sedangkan untuk menambahkan opsinya gunakan tag <option> ... </option>. Contoh:
<h2>Asal Kabupaten / Kota</h2>
<form>
<label for="city">Kabupaten/Kota :</label>
<select id="city">
<option value="Kayong Utara">Kayong Utara</option>
<option value="Ketapang">Ketapang</option>
<option value="Mempawah">Mempawah</option>
<option value="Pontianak">Pontianak</option>
<option value="Sambas">Sambas</option>
<option value="Sanggau">Sanggau</option>
<option value="Singkawang">Singkawang</option>
<option value="Sintang">Sintang</option>
</select><br><br>
<input type="submit">
</form>
Secara default, opsi yang muncul di form select adalah opsi pertama. Kita bisa menentukan opsi mana yang inign di tampilkan pada form select dengan menggunakan atribut selected. Misalnya opsi Pontianak ditampilkan pada form select, buat elementnya menjadi:
<option value="Pontianak" selected>Pontianak</option>Menampilkan jumlah opsi yang muncul di form select dapat kita atur dari jumlah default 1 menjadi lebih dari satu. Gunakan atribut size untuk menggunakan fungsi ini. Contoh:
<form>
<label for="city">Asal Kabupaten/Kota :</label>
<select id="city" size="4">
<option value="Kayong Utara">Kayong Utara</option>
<option value="Ketapang">Ketapang</option>
<option value="Mempawah">Mempawah</option>
<option value="Pontianak" selected>Pontianak</option>
<option value="Sambas">Sambas</option>
<option value="Sanggau">Sanggau</option>
<option value="Singkawang">Singkawang</option>
<option value="Sintang">Sintang</option>
</select>
</form>Di element select, kita juga dapat memilih lebih dari satu opsi atau disebut dengan multiple select dengan menambahkan atribut multiple pada element select seperti contoh berikut:
<h2>Asal Kabupaten / Kota</h2>
<form>
<label for="city">Kabupaten/Kota :</label>
<select id="city" size="4" multiple>
<option value="Kayong Utara">Kayong Utara</option>
<option value="Ketapang">Ketapang</option>
<option value="Mempawah">Mempawah</option>
<option value="Pontianak" selected>Pontianak</option>
<option value="Sambas">Sambas</option>
<option value="Sanggau">Sanggau</option>
<option value="Singkawang">Singkawang</option>
<option value="Sintang">Sintang</option>
</select><br><br>
<input type="submit">
</form>
Element Button
Sesuai namanya, element button digunakan untuk membuat tombol yang dapat diklik. Fungsinya tergantung dari atribut yang digunakan, bisa sumbit, reset, login, atau tombol yang mengarah ke halaman paling atas pada website. Biasanya element ini diintegrasikan dengan fungsi javascript untuk menciptakan perilaku dari button tersebut.
Untuk membuat element button gunakan tag <button> ... </button>. Contoh membuat element button dengan type berupa submit:
<button type="submit" onclick="alert('Terima kasih sudah berpartisipasi dalam survei ini.')">Kirim</button>
Element Fieldset dan Legend
Element terakhir yang akan kita bahas adalah fieldset dan legend. Element <fieldset> berfungsi untuk mengelompokkan (grouping) element form sedangkan <legend> berfungsi menampilkan judul dari group form tersebut. Contoh mengelompokkan nama awal, akhir, dan alias kedalam group nama lengkap:
<form>
<fieldset>
<legend>Nama Lengkap :</legend>
<label for="fname">Nama Awal :</label><br>
<input type="text" name="fname" id="fname" value="Rino"><br>
<label for="lname">Nama Akhir :</label><br>
<input type="text" name="lname" id="lname" value="Safrizal"><br>
<label for="alias">Nama Panggilan :</label><br>
<input type="text" name="alias" id="alias" value="Abugaza_"><br><br>
<input type="submit" value="Kirim">
</fieldset>
</form>
Contoh Membuat Form dengan HTML
Sekarang kita coba gabungkan beberapa jenis form di atas sehingga menjadi satu buah form. Biar formulir kelihatan lebih rapi kita gunakan element <table> seperti contoh berikut ini:
<h2>Formulir Pendaftaran Pelatihan Pemrograman Dasar :</h2>
<form action="action_page.php">
<table>
<tr>
<td><label for="nama">Nama Lengkap</label></td>
<td>:</td>
<td><input type="text" name="nama" id="nama"></td>
</tr>
<tr>
<td><label for="NIK">Nomor Induk Kependudukan</label></td>
<td>:</td>
<td><input type="number" name="NIK" id="NIK"></td>
</tr>
<tr>
<td><label for="lahir">Tempat Lahir</label></td>
<td>:</td>
<td><input type="text" name="lahir"></td>
</tr>
<tr>
<td><label for="date">Tanggal Lahir</label></td>
<td>:</td>
<td><input type="date" name="date" id="date"></td>
</tr>
<tr><td><label for="kota">Asal Kabupaten/Kota</label></td>
<td>:</td>
<td>
<select id="kota">
<option value="Bengkayang">Bengkayang</option>
<option value="Kayong Utara">Kayong Utara</option>
<option value="Ketapang">Ketapang</option>
<option value="Kubu Raya">Kubu Raya</option>
<option value="Landak">Landak</option>
<option value="MElawi">Melawi</option>
<option value="Mempawah">Mempawah</option>
<option value="Pontianak">Pontianak</option>
<option value="Putussibau">Putussibau</option>
<option value="Sambas">Sambas</option>
<option value="Sanggau">Sanggau</option>
<option value="Sekadau">Sekadau</option>
<option value="Singkawang">Singkawang</option>
<option value="Sintang">Sintang</option>
</select>
</td>
</tr>
<tr>
<td><label for="pendidikan">Pendidikan Terakhir</label></td>
<td>:</td>
<td>
<input type="radio" name="pendidikan" id="pendidikan" value="Diploma 3">
<label for="D3">Diploma 3</label>
<input type="radio" name="pendidikan" id="pendidikan" value="Strata 1">
<label for="S1">Strata 1</label>
<input type="radio" name="pendidikan" id="pendidikan" value="Strata 2">
<label for="S2">Strata 2</label>
</td>
</tr>
<tr>
<td><label for="hp">Nomor Telepon</label></td>
<td>:</td>
<td><input type="tel" name="hp" id="hp" value="+62"></td>
</tr>
<tr>
<td><label for="email">Alamat Email</label></td>
<td>:</td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="lang">Pelatihan yang dipilih</label></td>
<td>:</td>
<td>
<input type="checkbox" name="diklat" id="lang1" value="HTML">
<label for="lang">HTML</label>
<input type="checkbox" name="diklat" id="lang2" value="CSS">
<label for="lang">CSS</label>
<input type="checkbox" name="diklat" id="lang3" value="Javascript">
<label for="lang">Javascript</label>
</td>
</tr>
<tr>
<td>Alasan singkat mengikuti pelatihan</td>
<td>:</td>
<td><textarea style="width: 250; height: 100;"></textarea></td>
</tr>
<tr>
<td><label for="cv">Upload Dokumen CV</label></td>
<td>:</td>
<td><input type="file" name="CV" id="CV"></td>
</tr>
<tr>
<td>
<br>
<button type="submit" onclick="alert('Terima kasih sudah mendaftar pelatihan ini.')">Kirim</button>
<input type="reset">
</td>
</tr>
</table>
</form>
Belum ada Komentar untuk "Panduan Membuat Form di HTML"
Posting Komentar