Belajar HTML #6: Membuat Formulir di HTML

Author Erick Irwansyah
25 Dec 2024
Html
Belajar HTML #6: Membuat Formulir di HTML

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 <form>. Di dalamnya, kita menggunakan elemen seperti:

  • <input>: Untuk memasukkan teks, angka, atau data lainnya.
  • <textarea>: Untuk masukan teks yang lebih panjang.
  • <button>: Untuk tombol pengiriman data.
  • <label>: Untuk memberikan keterangan pada input.
Contoh Dasar:
<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>

Jenis Input

HTML menyediakan berbagai jenis input untuk kebutuhan berbeda. Berikut beberapa yang sering digunakan:

  1. Teks

    <input type="text" name="username" placeholder="Masukkan nama Anda">

  2. Email

    <input type="email" name="email" placeholder="Masukkan email Anda">

  3. Kata Sandi

    <input type="password" name="password" placeholder="Masukkan password">

  4. Nomor

    <input type="number" name="age" min="1" max="100" placeholder="Masukkan usia Anda">

  5. Tanggal

    <input type="date" name="birthdate">

  6. Pilihan (Checkbox dan Radio Button)

    <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>

  7. File

    <input type="file" name="photo">

Membuat Formulir Lengkap

Jalankan Form berikut di CodeLab, HTML taruh di HTML dan CSS taruh ditab CSS 

Contoh:
<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>

Styling Formulir

Biar formulir lebih enak dilihat, tambahkan CSS.

Contoh:
<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>

Praktik Langsung

Salin kode ini ke file HTML kamu:

<!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"></textarea>
    
    <button type="submit">Kirim</button>
  </form>
</body>
</html>

Tantangan untuk Kamu

  1. Tambahkan validasi HTML seperti required, min, atau max.
  2. Buat formulir untuk login dengan input email dan password.
  3. 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 Lainnya

Belajar HTML #2: Struktur dasar dan Tag HTML
Belajar HTML #2: Struktur dasar dan Tag HTML

Hai! Semoga semangat belajarnya tetap tinggi. ? Kali ini kita akan membahas struktur dasar HTML lebi...

Baca Tutorial
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
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...

Baca Tutorial
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML
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...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous
Tutorial Terkait
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #2: Struktur dasar dan Tag HTML
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #1: Pengenalan HTML
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php