Cara Membuat Form HTML Sederhana Dengan Notepad
"Artikel ini berisi Cara Membuat Form HTML Pemesanan Sederhana Dengan Notepad"
8 min read
Membuat form HTML adalah salah satu pelajaran dasar dalam belajar web desain sebelum menghubungkannya dengan form php. Pada tutorial HTML dasar ini, kita akan belajar cara membuat form HTML sederhana dengan notepad.
 |
| Cara Membuat Form HTML Sederhana Dengan Notepad |
Apa itu form? Singkatnya form itu adalah sebuah formulir. Dalam dunia maya, form digunakan untuk mendaftar atau bergabung dengan sebuah situs web. Untuk lebih jelasnya, silahkan lihat contoh form di https://m.facebook.com.
Jika Anda belum login otomatis maka Anda diharuskan untuk mendaftar atau login untuk dapat menuju ke Facebook. Saat Anda melihat kotak untuk menginput username dan password, itulah yang dinamakan form. Meskipun situs buatan Mark tersebut sudah lebih rapi tapi tetap saja itu dibangun dengan beberapa tag HTML.
Saat membuat form HTML sederhana di bawah ini, saya menuliskannya pada aplikasi Notepad bawaan Windows 10.
Contoh Form HTML Type Checkbox
Kode berikut ini untuk membuat form pemesanan barang dengan HTML. Fungsi dari checkbox sendiri bisa membuat seseorang untuk memilih beberapa opsi.
<html>
<head>
<title>
</title>
<body>
<form action="proses.php" method="post">
Pesan Barang : </br>
<input type="checkbox" name="Barang1" value="Sepatubola">Sepatu Bola <br/>
<input type="checkbox" name="Barang2" value="tassekolah"> Tas Sekolah <br/>
<input type="checkbox" name="barang3" value="gitar"> Gitar Yamaha <br/>
<input type="checkbox" name="barang4" value="Buku"> Buku Panduan <br/>
<br/><input type="submit" value="submit" name="Bsubmit">
<input type="reset" value="reset" nama="Breset">
</form>
</body>
</html>
Pada script di atas, kita juga melihat ada atribut action proses,php. Tapi kita akan membahas tentang itu pada tutorial belajar pemrograman web yang akan datang.
Selain tag form dengan type checkbox juga terdapat tag input. Tag input ini akan menyerupai tampilan tag button. Input di sini bukan untuk menginput suatu nilai melainkan untuk mensubmit ataupun mereset pilihan yang sudah dibuat pada form pemesanan HTML.
Cara Membuat Form HTML Type Radio
Berbeda dengan type checkbox di atas, form HTML dengan type radio menyediakan beberapa opsi tapi hanya bsia dipilih satu.
<html>
<head>
<title>
</title>
<body>
<form>
Nilai Pemrograman HTML membuat Form :
<input type="radio" name="penilaian1" value="baik" checked>Baik -
<input type="radio" name="penilaian2" value="cukup" checked>Cukup -
<input type="radio" name="penilaian3" value="kurang" checked>Kurang -
</form>
</body>
</html>
Type radio pada form HTML juga digunakan pada pilihan jenis kelamin.
Contoh Form HTML Type Dropdown
Form yang satu ini adalah form yang familiar digunakan dalam situs web toko online. Baik Shopee, Tokopedia, dan situs e-commerce lainnya, pasti menggunakan tag HTML type dropdown menu. Contohnya saat memilih Provinsi dan lain-lain
Berikut contoh script HTML-nya. Langsung copas aja ke notepad dan save as dengan type data all files dan nama ekstensi .html,
<html>
<head>
<title>
</title>
<body>
<form action="proses.php" method="post" name="input">Kota : <br/>
<select name="asal" size="1">
<option value="Palopo">Palopo
<option value="Belopa">Belopa
<option value="Masamba">Masamba</select>
<p>Detail lengkap alamat Anda :<br/>
<textarea name="Komentar" rows="5" cols="50"></textarea>
</form>
</body>
</html>
Tipe form HTML ini menyediakan berbagai opsi tapi hanya dapat dipilih satu dan tampilannya dalam bentuk list. Cara kerjanya sama saja dengan menu dropdown pada blog ini.
Pada script di atas juga terdapat tag textarea. Tag ini berfungsi untuk memasukkan data dalam bentuk teks panjang.
Jika kamu tahu, sebenarnya banyak juga fungsi dari tag HTML textarea ini tapi tidak akan dijelaskan secara rinci. Intinya, semua kota warna biru yang saya gunakan untuk meletakkan contoh script HTML di blog ini juga menggunakan tag textarea yang telah dipercantik dengan CSS.
Contoh Cara Membuat Form HTML Pendaftaran
Ini merupakan contoh script form HTML yang cukup lengkap tapi masih memiliki tampilan yang sangat simple.
<html>
<head>
<title>Formulir Kursus
</title>
<body>
<p><b>Formulir Pendaftaran Kursus</b>
<form action=" " method="post" name="form_kursus">
<table width="100%">
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama" size="39"></td>
</tr>
<tr><td>Jenis Kelamin</td><td>:</td>
<td><input type="radio" name="jkl" value="L" checked>Laki-laki
<input type="radio" name="jkl" value="p">Perempuan</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type="text" name="alamat" size="39"></td></tr>
<tr><td>Provinsi</td>
<td>:</td>
<td><select size="1" name="provinsi">
<option value="Jabar">Jawa Barat</option>
<option value="Jateng">Jawa Tengah</option>
<option value="Jatim">Jawa Timur</option></select></td></tr>
<tr><td>Pilihan Kursus</td>
<td>:</td>
<td><input type="checkbox" name="kursus" value="Inggris">Bahasa Inggris</br>
<input type="checkbox" name="kursus" value="Komputer">Komputer</td></tr>
<tr><td>Komentar</td>
<td>:</td>
<td><textarea name="komentar" rows="5" cols="50"></textarea>
</tr>
</table>
<p><input type="submit" value="submit" name="Submit"><input type="reset" value="reset" name="Breset"></p>
</form>
</body>
</html>
Script terakhir ini adalah script hasil gabungan ketiga contoh script HTML di atas. Contoh ini bisa digunakan untuk membuat form pendaftaran sederhana di blog ataupun website. Namun HTML yang lebih cantik harus digabungkan dengan CSS dan juga Javascript untuk mengerjakan tugas yang tidak dapat dilakukan oleh HTML sendiri.
Sangat penting untuk mengetahui form HTML dan cara membuatnya. Mulai dari Gmail, Facebook, Twitter atau situs pendaftaran apapun di internet pastinya menggunakan form HTML. Bedanya dengan contoh di atas, mereka telah menggabungkannya dengan bahasa pemrograman PHP dan lain-lain dan menghubungkannya dengan database.
Sumber Modul Praktikum Pemrograman HTML Laboratorium Komputer UNCP
Tidak perlu aplikasi tambahan untuk coding script HTML kecuali jika memang berniat terjun ke dunia desain web, setidaknya harus punya Notepad++, Sublime text, dan aplikasi text editor lainnya untuk membangun halaman HTML.
Demikianlah artikel tentang cara membuat form HTML sederhana dengan notepad. Semoga bermanfaat!