{"id":494,"date":"2026-05-09T17:16:43","date_gmt":"2026-05-09T10:16:43","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=494"},"modified":"2026-05-09T17:16:43","modified_gmt":"2026-05-09T10:16:43","slug":"bab-12-form-html","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-12-form-html\/","title":{"rendered":"BAB 12 : FORM HTML"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">1. Pengertian Form HTML<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Form HTML<\/strong> adalah elemen yang digunakan untuk menerima input data dari pengguna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Form merupakan bagian paling penting dalam aplikasi web karena digunakan untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login<\/li>\n\n\n\n<li>Registrasi<\/li>\n\n\n\n<li>Pencarian<\/li>\n\n\n\n<li>Kontak<\/li>\n\n\n\n<li>Pemesanan<\/li>\n\n\n\n<li>Input data ke database<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tanpa form, website hanya dapat menampilkan informasi, tetapi tidak dapat menerima data dari pengguna.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2. Tag Dasar Form<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form&gt;<br>    &lt;!-- elemen input --&gt;<br>&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tag <code>&lt;form&gt;<\/code> berfungsi sebagai wadah untuk seluruh komponen input.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3. Struktur Dasar Form<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form&gt;<br>    &lt;label&gt;Nama:&lt;\/label&gt;&lt;br&gt;<br>    &lt;input type=\"text\"&gt;&lt;br&gt;&lt;br&gt;<br><br>    &lt;button type=\"submit\"&gt;Kirim&lt;\/button&gt;<br>&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4. Atribut Penting pada <code>&lt;form&gt;<\/code><\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Atribut<\/th><th>Fungsi<\/th><\/tr><\/thead><tbody><tr><td><code>action<\/code><\/td><td>Menentukan file tujuan saat form dikirim<\/td><\/tr><tr><td><code>method<\/code><\/td><td>Metode pengiriman data (<code>GET<\/code> atau <code>POST<\/code>)<\/td><\/tr><tr><td><code>autocomplete<\/code><\/td><td>Mengaktifkan\/menonaktifkan autofill<\/td><\/tr><tr><td><code>enctype<\/code><\/td><td>Digunakan saat upload file<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4.1 Contoh Form dengan Action dan Method<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form action=\"proses.php\" method=\"post\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">5. Elemen-Elemen Form<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">HTML menyediakan banyak jenis input.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5.1 Text<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Digunakan untuk teks biasa.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5.2 Password<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"password\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5.3 Email<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"email\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5.4 Number<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"number\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5.5 Date<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"date\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5.6 File Upload<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"file\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5.7 Hidden<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"hidden\" name=\"id\" value=\"123\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">6. Radio Button<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Digunakan untuk memilih satu opsi.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"radio\" name=\"jk\" value=\"L\"&gt; Laki-laki<br>&lt;input type=\"radio\" name=\"jk\" value=\"P\"&gt; Perempuan<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Semua radio dalam satu grup harus memiliki <code>name<\/code> yang sama.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">7. Checkbox<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Digunakan untuk memilih lebih dari satu opsi.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"checkbox\" name=\"hobi&#91;]\" value=\"Membaca\"&gt; Membaca<br>&lt;input type=\"checkbox\" name=\"hobi&#91;]\" value=\"Coding\"&gt; Coding<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">8. Textarea<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Digunakan untuk teks panjang.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;textarea rows=\"4\" cols=\"50\"&gt;&lt;\/textarea&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">9. Select Option<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;select&gt;<br>    &lt;option&gt;RPL&lt;\/option&gt;<br>    &lt;option&gt;TKJ&lt;\/option&gt;<br>    &lt;option&gt;DKV&lt;\/option&gt;<br>&lt;\/select&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">10. Button<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button type=\"submit\"&gt;Simpan&lt;\/button&gt;<br>&lt;button type=\"reset\"&gt;Reset&lt;\/button&gt;<br>&lt;button type=\"button\"&gt;Klik&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">11. Label<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;label for=\"nama\"&gt;Nama&lt;\/label&gt;<br>&lt;input type=\"text\" id=\"nama\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manfaat:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Memudahkan pengguna<\/li>\n\n\n\n<li>Accessibility lebih baik<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">12. Placeholder dan Value<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" placeholder=\"Masukkan nama\"&gt;<br>&lt;input type=\"text\" value=\"Andi\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">13. Required<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" required&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mencegah form dikirim jika kosong.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">14. Readonly dan Disabled<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"text\" value=\"Data\" readonly&gt;<br>&lt;input type=\"text\" disabled&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">15. Fieldset dan Legend<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;fieldset&gt;<br>    &lt;legend&gt;Data Pribadi&lt;\/legend&gt;<br>    &lt;input type=\"text\"&gt;<br>&lt;\/fieldset&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">16. Studi Kasus Nyata : Form Pendaftaran Siswa<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>    &lt;title&gt;Form Pendaftaran&lt;\/title&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br><br>&lt;h1&gt;Form Pendaftaran Siswa&lt;\/h1&gt;<br><br>&lt;form action=\"proses.php\" method=\"post\"&gt;<br><br>    &lt;label for=\"nama\"&gt;Nama Lengkap&lt;\/label&gt;&lt;br&gt;<br>    &lt;input type=\"text\" id=\"nama\" name=\"nama\" required&gt;&lt;br&gt;&lt;br&gt;<br><br>    &lt;label for=\"email\"&gt;Email&lt;\/label&gt;&lt;br&gt;<br>    &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;&lt;br&gt;&lt;br&gt;<br><br>    &lt;label&gt;Jenis Kelamin&lt;\/label&gt;&lt;br&gt;<br>    &lt;input type=\"radio\" name=\"jk\" value=\"L\"&gt; Laki-laki<br>    &lt;input type=\"radio\" name=\"jk\" value=\"P\"&gt; Perempuan<br>    &lt;br&gt;&lt;br&gt;<br><br>    &lt;label for=\"jurusan\"&gt;Jurusan&lt;\/label&gt;&lt;br&gt;<br>    &lt;select id=\"jurusan\" name=\"jurusan\"&gt;<br>        &lt;option value=\"\"&gt;-- Pilih Jurusan --&lt;\/option&gt;<br>        &lt;option value=\"RPL\"&gt;RPL&lt;\/option&gt;<br>        &lt;option value=\"TKJ\"&gt;TKJ&lt;\/option&gt;<br>        &lt;option value=\"DKV\"&gt;DKV&lt;\/option&gt;<br>    &lt;\/select&gt;&lt;br&gt;&lt;br&gt;<br><br>    &lt;label for=\"alamat\"&gt;Alamat&lt;\/label&gt;&lt;br&gt;<br>    &lt;textarea id=\"alamat\" name=\"alamat\" rows=\"4\"&gt;&lt;\/textarea&gt;&lt;br&gt;&lt;br&gt;<br><br>    &lt;button type=\"submit\"&gt;Daftar&lt;\/button&gt;<br>    &lt;button type=\"reset\"&gt;Reset&lt;\/button&gt;<br><br>&lt;\/form&gt;<br><br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">17. Method GET vs POST<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Method<\/th><th>Karakteristik<\/th><\/tr><\/thead><tbody><tr><td>GET<\/td><td>Data tampil di URL<\/td><\/tr><tr><td>POST<\/td><td>Data tersembunyi dan lebih aman<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Contoh:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form method=\"post\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Rekomendasi untuk form penting: gunakan <code>POST<\/code>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">18. Upload File<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form enctype=\"multipart\/form-data\"&gt;<br>    &lt;input type=\"file\" name=\"foto\"&gt;<br>&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">19. Best Practice Industri<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Selalu gunakan <code>label<\/code><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan <code>name<\/code> pada semua input<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan <code>required<\/code><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan <code>method=\\\"post\\\"<\/code><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan placeholder seperlunya<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Kelompokkan dengan <code>fieldset<\/code><\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">20. Kesalahan Umum Siswa<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Tidak memberi atribut <code>name<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Data tidak akan terkirim.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Tidak menggunakan <code>label<\/code><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Salah method<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Tidak menambahkan <code>enctype<\/code> saat upload file<\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">21. Debugging Form<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Jika form tidak bekerja:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Periksa atribut <code>name<\/code>.<\/li>\n\n\n\n<li>Periksa <code>action<\/code>.<\/li>\n\n\n\n<li>Periksa <code>method<\/code>.<\/li>\n\n\n\n<li>Periksa <code>required<\/code>.<\/li>\n\n\n\n<li>Cek Developer Tools.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">22. Contoh Form Login<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form action=\"login.php\" method=\"post\"&gt;<br><br>    &lt;label&gt;Username&lt;\/label&gt;&lt;br&gt;<br>    &lt;input type=\"text\" name=\"username\" required&gt;&lt;br&gt;&lt;br&gt;<br><br>    &lt;label&gt;Password&lt;\/label&gt;&lt;br&gt;<br>    &lt;input type=\"password\" name=\"password\" required&gt;&lt;br&gt;&lt;br&gt;<br><br>    &lt;button type=\"submit\"&gt;Login&lt;\/button&gt;<br><br>&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">23. Latihan Siswa<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">Latihan 1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Buat form login.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Latihan 2<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Buat form kontak.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Latihan 3<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Buat form pendaftaran lengkap.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">24. Mini Project<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfaf \u201cForm Pendaftaran Siswa Baru\u201d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Fitur:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text input<\/li>\n\n\n\n<li>Email<\/li>\n\n\n\n<li>Radio<\/li>\n\n\n\n<li>Select<\/li>\n\n\n\n<li>Textarea<\/li>\n\n\n\n<li>File upload<\/li>\n\n\n\n<li>Submit &amp; Reset<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">25. Kesimpulan<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Form HTML adalah fondasi aplikasi web interaktif.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tag utama:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form&gt;<br>&lt;input&gt;<br>&lt;textarea&gt;<br>&lt;select&gt;<br>&lt;button&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Pengertian Form HTML Form HTML adalah elemen yang digunakan untuk menerima input data dari pengguna. Form merupakan bagian paling&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[32],"class_list":["post-494","post","type-post","status-publish","format-standard","hentry","category-tutorial-html","tag-tutorial-html"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/494\/revisions"}],"predecessor-version":[{"id":495,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/494\/revisions\/495"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}