Cara Membuat Form Sederhana Pada HTML
Assalamu'alaikum Warahmatullahi Wabarakatuh..
Kali ini saya akan membahas tentang bagaimana cara membuat form sederhana pada HTML. Sebelum melangkah lebih jauh, ada baiknya Anda perlu tahu apa yang dimaksud dengan form serta fungsinya.
Form adalah sebuah sebuah daftar isi atau formulir yang merupakan salah satu penampilan interaktif yang paling populer di internet. Form atau daftar isian ini digunakan untuk meminta informasi dari user yang kemudian akan diolah. Untuk lebih jelasnya, mari simak penjelasan di bawah ini.
Tag <form>
Tag <form> adalah tag yang digunakan untuk mendefinisikan sebuah form. Sebuah form dibentuk oleh pasangan <form>.....</form>.Contohnya:
<html>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
</form>
</body>
</html>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
</form>
</body>
</html>
Tag <input>
Tag <input> adalah tag yang digunakan untuk membuat elemen-elemen yang digunakan untuk meminta informasi dari user. Penggunaan tag ini tidak diperlukan tag penutup. Tag <input> memiliki beberapa atribut umum sebagai berikut:- Text : untuk inputkan teks
<html>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
<input type="text"/>
</form>
</body>
</html>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
<input type="text"/>
</form>
</body>
 |
| Output text |
- Number : untuk inputkan angka
<html>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
<input type="number"/>
</form>
</body>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
<input type="number"/>
</form>
</body>
 |
| Output number |
- Radio : untuk membuat tombol radio atau tombol pilihan. Hanya dapat memilih salah satu
<html>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
Jenis Kelamin : <input type="radio" name="jk"/> Pria
<input type="radio" name="jk"/> Wanita
</form>
</body>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
Jenis Kelamin : <input type="radio" name="jk"/> Pria
<input type="radio" name="jk"/> Wanita
</form>
</body>
 |
| Output radio |
- Checkbox : untuk membuat tombol pilihan. Dapat memilih satu pilihan
<html>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
Hobi : <input type="checkbox"/> Travelling
<input type="checkbox"/> Menulis
<input type="checkbox"/> Memasak
</form>
</body>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
Hobi : <input type="checkbox"/> Travelling
<input type="checkbox"/> Menulis
<input type="checkbox"/> Memasak
</form>
</body>
 |
| Output checkbox |
- File : untuk meng-upload file
<html>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
File : <input type="file"/>
</form>
</body>
<head>
<title> Belajar Coding </title>
</head>
<body>
<form>
File : <input type="file"/>
</form>
</body>
 |
| Output file |
Selain yang dijelaskan di atas, tag <input> memiliki banyak atribut lain seperti password, email, reset, submit, button, dan lain-lain. Anda dapat mempelajarinya di link di bawah ini :
https://www.w3schools.com/html/html_attributes.asp
Source coding :
Selanjutnya, di bawah ini merupakan hasil form yang telah saya buat :
 |
| Contoh formulir sederhana dengan menggunakan HTML |
Source coding :
<html>
<head>
<title> Form Pengajuan KTP </title>
</head>
<body>
<table align="center" cellpadding="9">
<form>
<tr>
<th bgcolor="grey" align="center" colspan="6"> Form Pengajuan KTP </th>
</tr>
<tr>
<td> Nomor Pendaftaran </td>
<td>
<input type="text" maxlength="1" size="1"
<input type="text" maxlength="1" size="1"
<input type="text" maxlength="1" size="1"
<input type="text" maxlength="1" size="1"
<input type="text" maxlength="1" size="1"
</td>
</tr>
<tr>
<td> Nama </td>
<td>
<input type="text" name="nama" size="55" placeholder="Nama Lengkap">
</td>
</tr>
<tr>
<td> Alamat </td>
<td>
<textarea name="alamat" cols="50" rows="2" placeholder="Alamat Lengkap">
</textarea>
</td>
</tr>
<tr>
<td> Provinsi</td>
<td>
<select name="provinsi">
<option value="sulsel"> Sulawesi Selatan </option>
<option value="sulut"> Sulawesi Utara </option>
<option value="sulbaf"> Sulawesi Barat </option>
<option value="sultra"> Sulawesi Tenggara </option>
<option value="sulteng"> Sulawesi Tengah </option>
<option value="gorontalo"> Sulawesi Gorontalo </option>
</select>
</td>
</tr>
<tr>
<td> Kota </td>
<td>
<input type="text" name="kota" size="15" placeholder="Kota">
Kec.
<input type="text" name="kec" size="15" placeholder="Kecamatan"
</td>
</tr>
<tr>
<td> Pekerjaan </td>
<td colspan="2">
<input type="text" name="pekerjaan" size="30" placeholder="Pekerjaan">
</td>
</tr>
<tr>
<td> Jenis Kelamin </td>
<td>
<input type="radio" name="jk"> Pria
<input type="radio" name="jk"> Wanita
</td>
</tr>
<tr>
<td> Tempat/Tanggal Lahir </td>
<td>
<input type="text" size="8" placeholder="Tempat Lahir">
<input type="date">
</td>
</tr>
<tr>
<td rowspan="2"> Kelengkapan Berkas </td>
<td>
<input type="checkbox"> FC KK
<input type="checkbox"> Surat Pengantar
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Pas Foto
<input type="checkbox"> Surat Domisili
</td>
</tr>
<tr>
<td> File Scan </td>
<td> <input type="file"> </td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Pengajuan">
<input type="reset" value="Batal">
</td>
</tr>
</form>
</table>
</body>
</html>
<head>
<title> Form Pengajuan KTP </title>
</head>
<body>
<table align="center" cellpadding="9">
<form>
<tr>
<th bgcolor="grey" align="center" colspan="6"> Form Pengajuan KTP </th>
</tr>
<tr>
<td> Nomor Pendaftaran </td>
<td>
<input type="text" maxlength="1" size="1"
<input type="text" maxlength="1" size="1"
<input type="text" maxlength="1" size="1"
<input type="text" maxlength="1" size="1"
<input type="text" maxlength="1" size="1"
</td>
</tr>
<tr>
<td> Nama </td>
<td>
<input type="text" name="nama" size="55" placeholder="Nama Lengkap">
</td>
</tr>
<tr>
<td> Alamat </td>
<td>
<textarea name="alamat" cols="50" rows="2" placeholder="Alamat Lengkap">
</textarea>
</td>
</tr>
<tr>
<td> Provinsi</td>
<td>
<select name="provinsi">
<option value="sulsel"> Sulawesi Selatan </option>
<option value="sulut"> Sulawesi Utara </option>
<option value="sulbaf"> Sulawesi Barat </option>
<option value="sultra"> Sulawesi Tenggara </option>
<option value="sulteng"> Sulawesi Tengah </option>
<option value="gorontalo"> Sulawesi Gorontalo </option>
</select>
</td>
</tr>
<tr>
<td> Kota </td>
<td>
<input type="text" name="kota" size="15" placeholder="Kota">
Kec.
<input type="text" name="kec" size="15" placeholder="Kecamatan"
</td>
</tr>
<tr>
<td> Pekerjaan </td>
<td colspan="2">
<input type="text" name="pekerjaan" size="30" placeholder="Pekerjaan">
</td>
</tr>
<tr>
<td> Jenis Kelamin </td>
<td>
<input type="radio" name="jk"> Pria
<input type="radio" name="jk"> Wanita
</td>
</tr>
<tr>
<td> Tempat/Tanggal Lahir </td>
<td>
<input type="text" size="8" placeholder="Tempat Lahir">
<input type="date">
</td>
</tr>
<tr>
<td rowspan="2"> Kelengkapan Berkas </td>
<td>
<input type="checkbox"> FC KK
<input type="checkbox"> Surat Pengantar
</td>
</tr>
<tr>
<td>
<input type="checkbox"> Pas Foto
<input type="checkbox"> Surat Domisili
</td>
</tr>
<tr>
<td> File Scan </td>
<td> <input type="file"> </td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Pengajuan">
<input type="reset" value="Batal">
</td>
</tr>
</form>
</table>
</body>
</html>
loading...
Comments
Post a Comment