Assalamu’alaikum wr wb.
Kesempatan kita pada saat ini yaitu membuat form menggunakan html, dimana sebelumnya kita juga pernah membuat artikel dasar – dasar dari html. Sekarang kita lanjutkan ke level berikutnya yaitu membuat form html.
Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima masukkan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemograman web.
Form biasa digunakan untuk beberapa keperluan seperti untuk halaman login, transaksi jual – beli, mengumpulkan informasi, dan lain sebagainya. Form sangatlah penting dan sangat sering kita temui, sebagai contoh ketika kita ingin membuat sebuah akun social media maka hal yang pertama kita lakukan yaitu mengisi biodata terlebih dahulu, tempat kita mengisi biodata tersebut disebut dengan form pendaftaran.
Tidak terlalu sulit untuk memahami form ya, selanjutnya kita akan membuat tutorial membuat form dengan menggunakan sintaks – sintaks yang terdapat pada html.
Untuk membuat form dalam html kita mengunakan tag <form> ditutupkan dengan </form>.
Ok lanjut saja ke tutorialnya.
#Pertama
Kita akan membuat sebuah file dengan judul index.html dan text editor yang kita gunakan adalah notepad.
#Kedua
Silahkan buka file index.html yang sudah kita buat sebelumnya, langsung saja kita buat terlebih dahulu struktur dari html.
Tag html slalu dibuka dengan <> dan ditutup dengan </>
<html>
<head>
<title>Form Pendaftaran</title>
</head>
<body>
</body>
</html>
Html
Merupakan tag pembuka dari dokumen html.
Head
Merupakan tag yang digunakan untuk memberikan informasi dari dokumen index yang kita buat.
Title
Merupakan tag yang digunakan untuk memberikan judul pada halaman.
Body
Merupakan body dari dokumen html. Segala sesuatu yang ingin ditampilkan di dokumen hmtl disimpan dalam tag body.
#Ketiga
Sebelum kita membuat formnya kita akan membuat table dulu supaya tampilan dari form kita lebih rapi dan teratur.
Kita akan menggunakan 2 tabel supaya form kita buat lebih rapi.
<body>
<table border="1" bgcolor="grey" name="tabelpertama">
<tr>
<td><h2><center>Form Pedaftaran</center></td>
</tr>
<tr>
<td>
<form>
<table name="tabelkedua">
<tr>
<td>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
<table border="1" bgcolor="grey" name="tabelpertama">
<tr>
<td><h2><center>Form Pedaftaran</center></td>
</tr>
<tr>
<td>
<form>
<table name="tabelkedua">
<tr>
<td>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
Table 1
Untuk membuat table kita mengunakan tag <table>.
border > untuk membuat garis dari tabel tersebut dan 1 merupakan ukuran tebal dari garis tabel.
bgcolor > merupakan tag untuk membuat background dari tabel.
name > untuk memberi nama
Karena kita mengunakan dua tabel kita beri nama tabel pertama.
TR / Table Row
Untuk membuat sebuah baris dalam tabel kita gunakan tag tr.
TD / Table Data
Untuk membuat sebuah kolom dalam tabel kita gunakan tag td.
Heading
Untuk membuat judul biasanya kita gunakan tag heading ukuran dari heading mulai dari h1 - h6, Ukuran yang kita gunakan adalah h2.
Center
Untuk membuat teks rata tengah
Form
Merupakan tag yang digunakan untuk membuat form
Table 2
Posisi tabel kedua berada dalam kolom kedua dalam tabel pertama.
#Keempat
Sekarang kita edit pada bagian tabel kedua
Kita buat tempat untuk menginput nama.
<tr>
<td><label for="nama"> Nama Lengkap </label></td>
<td> : </td>
<td>
<input type="text" name="nama" id="nama" size="20px">
</td>
</tr>
<td><label for="nama"> Nama Lengkap </label></td>
<td> : </td>
<td>
<input type="text" name="nama" id="nama" size="20px">
</td>
</tr>
Label
Tag label digunakan untuk memberikan keterangan saja, tidak berpengaruh pada tampilan.
Input
Tempat kita akan memasukkan nama, maka kita pilih type nya text.
#Kelima
Kita buat kolom untuk menginput Tempat dan tanggal lahir.
<tr>
<td><label for="ttl">Nama, Tanggal Lahir</label></td>
<td> : </td>
<td>
<input type="text" name="nama" size="20">
<input type="text" name="tgl" size="2">
<input type="text" name="bln" size="2">
<input type="text" name="thn" size="5">
</td>
</tr>
<td><label for="ttl">Nama, Tanggal Lahir</label></td>
<td> : </td>
<td>
<input type="text" name="nama" size="20">
<input type="text" name="tgl" size="2">
<input type="text" name="bln" size="2">
<input type="text" name="thn" size="5">
</td>
</tr>
Prosesnya sama dengan bagian ke empat.
#Enam
Kita buat kolom untuk menginput alamat.
<tr>
<td><label for="alamat">Alamat</label></td>
<td>:</td>
<td>
<textarea name="alamat" cols="40" rows="2"></textarea>
</td>
</tr>
<td><label for="alamat">Alamat</label></td>
<td>:</td>
<td>
<textarea name="alamat" cols="40" rows="2"></textarea>
</td>
</tr>
Kurang lebih prosesnya sama dengan sebelumnya, tapi untuk alamat kita gunakan tag textarea
#Tujuh
Sekarang kita buat kolom untuk menginput no hp / telp.
<tr>
<td><label for="notlp">No. Telp/Hp</label></td>
<td> : </td>
<td>
<input type="text" name="notlp" size="20px">
</td>
</tr>
<td><label for="notlp">No. Telp/Hp</label></td>
<td> : </td>
<td>
<input type="text" name="notlp" size="20px">
</td>
</tr>
Tag yang kita gunakan sama dengan tag yang ada pada nama ( tahap #Pertama )
# Delapan
Sekarang kita buat pilihan untuk jenis kelamin.
<tr>
<td><label for="Jkl">Jenis Kelamin</label></td>
<td> : </td>
<td>
<input type="radio" name="jkl" value="laki-laki" id="laki">
<label for="laki">Laki - laki</label>
<input type="radio" name="jkl" value="perempuan" id="perempuan">
<label for="perempuan">Perempuan</label>
</td>
</tr>
<td><label for="Jkl">Jenis Kelamin</label></td>
<td> : </td>
<td>
<input type="radio" name="jkl" value="laki-laki" id="laki">
<label for="laki">Laki - laki</label>
<input type="radio" name="jkl" value="perempuan" id="perempuan">
<label for="perempuan">Perempuan</label>
</td>
</tr>
Pada bagian jenis kelamin kita tidak boleh mengisi lebih dari satu pilihan maka kita gunakan tag radio.
# Sembilan
Sekarang kita kolom untuk memasukkan agama.
<tr>
<td><label for="agama">Agama</label></td>
<td> : </td>
<td><input type="text" name="agama" size="20"></td>
</tr>
<td><label for="agama">Agama</label></td>
<td> : </td>
<td><input type="text" name="agama" size="20"></td>
</tr>
Tag yang kita gunakan sama dengan tag yang ada pada nama ( tahap #Pertama )
# Sepuluh
Sekarang kita buat pilihan untuk hoby.
<tr>
<td><label for="hoby">Hoby</label></td>
<td> : </td>
<td>
<input type="checkbox" name="hoby" value="baca buku">
<label for="hoby">Baca buku</label>
<input type="checkbox" name="hoby" value="berenang">
<label for="hoby">Berenang</label>
<input type="checkbox" name="hoby" value="bernyanyi">
<label for="hoby">Bernyanyi</label>
<input type="checkbox" name="hoby" value="naik gunung">
<label for="hoby">Naik gunung</label>
</td>
</tr>
<td><label for="hoby">Hoby</label></td>
<td> : </td>
<td>
<input type="checkbox" name="hoby" value="baca buku">
<label for="hoby">Baca buku</label>
<input type="checkbox" name="hoby" value="berenang">
<label for="hoby">Berenang</label>
<input type="checkbox" name="hoby" value="bernyanyi">
<label for="hoby">Bernyanyi</label>
<input type="checkbox" name="hoby" value="naik gunung">
<label for="hoby">Naik gunung</label>
</td>
</tr>
Bagian hoby kita boleh mengisi lebih dari satu pilihan kita gunakan tag input dengan type checkbox.
# Sebelas
Tag yang terakhir yang kita gunakan submit/Kirim, yaitu sebuah tombol yang menandakan kalau kita sudah selesai menginput data kita.
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
Untuk yang terakhir kita gunakan tag inputnya type submit.
# Selesai
Kita sudah selesai membuat form untuk melihatnya anda bisa membuka file index.html menggunakan browser yang anda gunakan.
Untuk lebih jelasnya, berikut sintaks lengkap yang telah kita buat.
<!-- #Kedua -->
<html>
<head>
<title>Login</title>
</head>
<body>
<!-- #Ketiga -->
<table border="1" bgcolor="grey" name="tabelpertama">
<tr>
<td><h2><center>Form Pedaftaran</center></td>
</tr>
<tr>
<td>
<form>
<table name="tabelkedua">
<!-- #Keempat -->
<tr>
<td><label for="nama"> Nama Lengkap </label></td>
<td> : </td>
<td>
<input type="text" name="nama" size="20px">
</td>
</tr>
<!-- #Kelima -->
<tr>
<td><label for="ttl">Nama, Tanggal Lahir</label></td>
<td> : </td>
<td>
<input type="text" name="nama" size="20">
<input type="text" name="tgl" size="2">
<input type="text" name="bln" size="2">
<input type="text" name="thn" size="5">
</td>
</tr>
<!-- #Keenam -->
<tr>
<td><label for="alamat">Alamat</label></td>
<td> : </td>
<td>
<textarea name="alamat" cols="40" rows="2"></textarea>
</td>
</tr>
<!-- #Ketujuh -->
<tr>
<td><label for="notlp">No. Telp/Hp</label></td>
<td> : </td>
<td>
<input type="text" name="notlp" size="20px">
</td>
</tr>
<!-- #Kedelapan -->
<tr>
<td><label for="Jkl">Jenis Kelamin</label></td>
<td> : </td>
<td>
<input type="radio" name="jkl" value="laki-laki" id="laki">
<label for="laki">Laki - laki</label>
<input type="radio" name="jkl" value="perempuan" id="perempuan">
<label for="perempuan">Perempuan</label>
</td>
</tr>
<!-- #Sembilan -->
<tr>
<td><label for="agama">Agama</label></td>
<td> : </td>
<td><input type="text" name="agama" size="20"></td>
</tr>
<!-- #Sepuluh -->
<tr>
<td><label for="hoby">Hoby</label></td>
<td> : </td>
<td><input type="checkbox" name="hoby" value="baca buku">
<label for="hoby">Baca buku</label>
<input type="checkbox" name="hoby" value="berenang">
<label for="hoby">Berenang</label>
<input type="checkbox" name="hoby" value="bernyanyi">
<label for="hoby">Bernyanyi</label>
<input type="checkbox" name="hoby" value="naik gunung">
<label for="hoby">Naik gunung</label>
</td>
</tr>
<!-- #Sebelas -->
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Login</title>
</head>
<body>
<!-- #Ketiga -->
<table border="1" bgcolor="grey" name="tabelpertama">
<tr>
<td><h2><center>Form Pedaftaran</center></td>
</tr>
<tr>
<td>
<form>
<table name="tabelkedua">
<!-- #Keempat -->
<tr>
<td><label for="nama"> Nama Lengkap </label></td>
<td> : </td>
<td>
<input type="text" name="nama" size="20px">
</td>
</tr>
<!-- #Kelima -->
<tr>
<td><label for="ttl">Nama, Tanggal Lahir</label></td>
<td> : </td>
<td>
<input type="text" name="nama" size="20">
<input type="text" name="tgl" size="2">
<input type="text" name="bln" size="2">
<input type="text" name="thn" size="5">
</td>
</tr>
<!-- #Keenam -->
<tr>
<td><label for="alamat">Alamat</label></td>
<td> : </td>
<td>
<textarea name="alamat" cols="40" rows="2"></textarea>
</td>
</tr>
<!-- #Ketujuh -->
<tr>
<td><label for="notlp">No. Telp/Hp</label></td>
<td> : </td>
<td>
<input type="text" name="notlp" size="20px">
</td>
</tr>
<!-- #Kedelapan -->
<tr>
<td><label for="Jkl">Jenis Kelamin</label></td>
<td> : </td>
<td>
<input type="radio" name="jkl" value="laki-laki" id="laki">
<label for="laki">Laki - laki</label>
<input type="radio" name="jkl" value="perempuan" id="perempuan">
<label for="perempuan">Perempuan</label>
</td>
</tr>
<!-- #Sembilan -->
<tr>
<td><label for="agama">Agama</label></td>
<td> : </td>
<td><input type="text" name="agama" size="20"></td>
</tr>
<!-- #Sepuluh -->
<tr>
<td><label for="hoby">Hoby</label></td>
<td> : </td>
<td><input type="checkbox" name="hoby" value="baca buku">
<label for="hoby">Baca buku</label>
<input type="checkbox" name="hoby" value="berenang">
<label for="hoby">Berenang</label>
<input type="checkbox" name="hoby" value="bernyanyi">
<label for="hoby">Bernyanyi</label>
<input type="checkbox" name="hoby" value="naik gunung">
<label for="hoby">Naik gunung</label>
</td>
</tr>
<!-- #Sebelas -->
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
Sekarang coba kita buka file index.html yang telah kita buat dengan menggunakan web browsher di komputer kita
Saya akan membukanya dengan menggunakan google chrome.
Berikut tampilannya.
Selamat mencoba dan tetap mencoba,....
salam kenal, nama saya Fransisca. terima kasih atas informasi yang diberikan
BalasHapus