Html 10 Feb 2025 4 min read

Belajar HTML #6: Membuat Formulir di HTML

Erick Iwansyah

Author

19 views

Halo teman-teman! Semoga kalian semua sehat dan semangat belajar. Kali ini kita akan bahas sesuatu yang sering banget ditemui di website: formulir! Formulir digunakan untuk mengumpulkan data dari pengguna, seperti nama, email, atau pesan. Yuk, kita pelajari cara membuatnya!

Elemen Dasar Formulir

Formulir di HTML dimulai dengan elemen

. Di dalamnya, kita menggunakan elemen seperti:

: Untuk memasukkan teks, angka, atau data lainnya.
</code></strong>: Untuk masukan teks yang lebih panjang.</li> <li><strong><code><button></code></strong>: Untuk tombol pengiriman data.</li> <li><strong><code><label></code></strong>: Untuk memberikan keterangan pada input.</li> </ul> <h5>Contoh Dasar:</h5> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><form action="/submit" method="POST"> <label for="name">Nama:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <button type="submit">Kirim</button> </form> </pre> </div> </div> <hr> <h4>Jenis Input</h4> <p>HTML menyediakan berbagai jenis input untuk kebutuhan berbeda. Berikut beberapa yang sering digunakan:</p> <ol> <li> <p><strong>Teks</strong></p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><input type="text" name="username" placeholder="Masukkan nama Anda"></pre> </div> </div> </li> <li> <p><strong>Email</strong></p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><input type="email" name="email" placeholder="Masukkan email Anda"></pre> </div> </div> </li> <li> <p><strong>Kata Sandi</strong></p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><input type="password" name="password" placeholder="Masukkan password"></pre> </div> </div> </li> <li> <p><strong>Nomor</strong></p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><input type="number" name="age" min="1" max="100" placeholder="Masukkan usia Anda"></pre> </div> </div> </li> <li> <p><strong>Tanggal</strong></p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><input type="date" name="birthdate"></pre> </div> </div> </li> <li> <p><strong>Pilihan</strong> (Checkbox dan Radio Button)</p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><label> <input type="checkbox" name="agree"> Saya setuju dengan syarat dan ketentuan. </label> <label> <input type="radio" name="gender" value="male"> Pria </label> <label> <input type="radio" name="gender" value="female"> Wanita </label> </pre> </div> </div> </li> <li> <p><strong>File</strong></p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><input type="file" name="photo"> </pre> </div> </div> </li> </ol> <hr> <h4>Membuat Formulir Lengkap</h4> <p><strong><em>Jalankan Form berikut di <a href="https://code80vity/codelab" target="_blank" rel="noopener">CodeLab</a>, HTML taruh di HTML dan CSS taruh ditab CSS </em></strong></p> <h5>Contoh:</h5> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><form action="/submit" method="POST" style="width: 300px;"> <h2>Formulir Pendaftaran</h2> <label for="fullname">Nama Lengkap:</label> <input type="text" id="fullname" name="fullname" placeholder="Nama lengkap" required> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Email" required> <label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Password" required> <label for="birthdate">Tanggal Lahir:</label> <input type="date" id="birthdate" name="birthdate"> <label for="gender">Jenis Kelamin:</label> <select id="gender" name="gender"> <option value="male">Pria</option> <option value="female">Wanita</option> </select> <label> <input type="checkbox" name="agree"> Saya setuju dengan syarat dan ketentuan. </label> <button type="submit">Daftar</button> </form> </pre> </div> </div> <hr> <h4>Styling Formulir</h4> <p>Biar formulir lebih enak dilihat, tambahkan CSS.</p> <h5>Contoh:</h5> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><style> form { background-color: #f9f9f9; padding: 20px; border: 1px solid #ddd; border-radius: 5px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input, select, button { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 3px; } button { background-color: #007bff; color: white; border: none; } </style> </pre> </div> </div> <hr> <h4>Praktik Langsung</h4> <p>Salin kode ini ke file HTML kamu:</p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Formulir HTML</title> </head> <body> <form action="/submit" method="POST"> <h2>Formulir Kontak</h2> <label for="name">Nama:</label> <input type="text" id="name" name="name" placeholder="Nama lengkap" required> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Email" required> <label for="message">Pesan:</label> <textarea id="message" name="message" rows="4" placeholder="Tuliskan pesan Anda">

Tantangan untuk Kamu Tambahkan validasi HTML seperti required, min, atau max. Buat formulir untuk login dengan input email dan password. Buat formulir untuk upload foto profil dengan input file. Formulir adalah elemen yang sangat penting dalam pengembangan web. Setelah ini, kita akan melanjutkan ke topik HTML berikutnya. Pastikan kamu sudah memahami konsep ini sebelum melanjutkan tutorial selanjutnya di www.code80vity.com.

Tutorial Terkait Html 6 months ago Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML Hai lagi! Gimana belajarnya? Semoga makin lancar, ya. Kali ini kita akan bahas cara membuat tabel di... Html 6 months ago Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML Halo lagi! Kali ini kita bakal bahas tentang daftar atau list di HTML. Kalau kamu pernah lihat websi... Html 6 months ago Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML Hai lagi! Kali ini kita akan belajar bagaimana cara menambahkan gambar ke halaman web kamu. Gambar b... Comments Login to leave a comment. Loading comments... No comments yet Be the first to share your thoughts!

Belajar HTML #6: Membuat Formulir di HTML

Elemen Dasar Formulir

Tantangan untuk Kamu

Tutorial Terkait

Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML

Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML

Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML

Comments

Siap Mengembangkan Project IT Anda?