Cara Membuat Form Simple Dengan HTML
Halo, ini adalah blog pertama saya. pada kesempatan ini saya akan membagikan ilmu tentang cara membuat form simple dengan html. Hal ini mungkin relate banget buat kalian yang lagi belajar pemrograman web.
Ada banyak hal yang harus kalian pahami dalam belajar pemrograman web, salah satunya adalah HTML sebagai bahasa markup dari pembuatan suatu website. Kalo diibaratkan HTML adalah kerangka / tulang yang nantinya sebagai dasar dalam membangun web tersebut.
Apa Itu HTML
Merupakan bahasa markup yang digunakan sebagai pondasi dalam pembuatan halaman web, singkatan dari HTML adalah Hypertex Markup Language. Kalau untuk tubuh manusia, HTML bisa diobaratkan sebagai kerangka tulang kita.
Jadi, keberadaan HTML sangatlah penting untuk pembangunan web. Dan buat kalian yang pengen jadi Web Developer, harus belajar HTML dahulu sebagai dasarnya.
Langkah yang Diperlukan
Nah, buat kalian yang lagi belajar HTML, saya akan membagikan ilmu tentang cara membuat Forom Simple dengan HTML, Berikut adalah langkahnya :
Untuk cara membuat form simple dengan HTML kali ini saya akan menggunakan tag form dan tag table untuk merapikan bentuknya. Berikut adalah kodenya :
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<form action="login.php" method="POST">
<fieldset>
<legend>Form Simple</legend>
<table>
<tr>
<td>
<label for="nama">Nama</label>
</td>
<td>
<input type="text" name="nama" id="nama"
placeholder="Masukan Nama" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<label for="username">Username</label>
</td>
<td>
<input type="text" name="username" id="username"
placeholder="Masukan Username" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<label for="email">Email</label>
</td>
<td>
<input type="email" name="email" id="email"
placeholder="Masukan Email" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<label for="password">Password</label>
</td>
<td>
<input type="text" name="password" id="password"
placeholder="Masukan Password" autocomplete="off"/>
</td>
</tr>
<tr>
<td>
<label for="jk">Jenis Kelamin</label>
</td>
<td>
<input type="radio" name="jk" id="jk" value="laki-laki"/>
<label>Laki-Laki</label> <input type="radio" name="jk"
id="jk" value="perempuan"/><label>Perempuan</label>
</td>
</tr>
<tr>
<td>
<label for="pekerjaan">Pekerjaan</label>
</td>
<td>
<select name="pekerjaan" id="pekerjaan">
<option value="Mahasiswa">Mahasiswa</option>
<option value="Karyawan">Karyawan</option>
<option value="Wiraswasta">Wiraswasta</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="Alamat">Alamat</label>
</td>
<td>
<textarea placeholder="Alamat"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="left">
<input type="submit" name="submit" value="Daftar"/>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Nah, kalo hasil dari kode diatas adalah :
Penjelasan Kode
Oke, kalo kalian masih bingung sama kode yang ada diatas maka dibawah ini adalah penjelasannya secara simple.
- <form></form>
- <fieldset></fieldset>
- <legend></legend>
- <table></table>
- <tr></tr>
- <td></td>
- <label></label>
- Atribut for""
- <input/>
- Atribut type""
- Atribut name""
- Atribut id""
- Atribut placeholder""
- Atribut value""
- Atribut autocomplete""
- Atribut name"" akan dihubungkan pada file database.
- Atribut id"" untuk menghubungkan file css.
- Atribut placeholder"" untuk memberikan display info tipe yang diinputkan user.
- Atribut value"" untuk memberikan nilai pada elemen.
- Atribut autocomplete"" untuk mengatur tampilan cache pada kolom input.
- <select></select>
- <option></option>
- <textarea></textarea>
Oke gaes, mungkin cuma ini yang bisa saya sampaikan tentang cara membuat form simple dengan HTML. Sampai jumpa di artikel lainnya.
Komentar