Home Tabel Form HTML

Form dalam HTML

40 menit Menengah Interaktif

Pelajari cara membuat form interaktif untuk mengumpulkan input dari pengguna dengan berbagai jenis elemen input dan validasi.

Dasar-dasar Form HTML

Form HTML digunakan untuk mengumpulkan input dari pengguna. Form dapat berisi berbagai macam elemen input seperti text field, checkbox, radio button, dropdown, dan lainnya.

🏗️ Struktur Dasar Form

<form action="/proses.php" method="post">
    <label for="nama">Nama Lengkap:</label>
    <input type="text" id="nama" name="nama" required>
    
    <button type="submit">Kirim Form</button>
</form>
<form action="/proses.php" method="post">
    <!-- action: URL yang memproses form -->
    <!-- method: Cara pengiriman data (POST/GET) -->
    
    <label for="nama">Nama Lengkap:</label>
    <!-- label: Teks penjelas untuk input -->
    
    <input type="text" id="nama" name="nama" required>
    <!-- type: Jenis input -->
    <!-- id: Identifier unik -->
    <!-- name: Nama field untuk backend -->
    <!-- required: Validasi wajib diisi -->
    
    <button type="submit">Kirim Form</button>
    <!-- type="submit": Tombol untuk mengirim form -->
</form>

📋 Atribut Penting Form

action Required

URL yang akan memproses data form ketika dikirim

action="/proses.php"
method Required

HTTP method untuk mengirim data (GET atau POST)

method="post"
enctype Optional

Encoding type untuk form data (penting untuk upload file)

enctype="multipart/form-data"
target Optional

Dimana hasil form akan ditampilkan

target="_blank"

Elemen-elemen Input Form

<input type="text">

Dasar 
<input type="text" 
       name="nama" 
       placeholder="Nama Lengkap"
       required>
placeholder required maxlength

<input type="email">

Validasi 
<input type="email" 
       name="email" 
       placeholder="email@contoh.com"
       required>
required pattern multiple

<input type="password">

Keamanan 
<input type="password" 
       name="password" 
       placeholder="Password"
       minlength="6">
minlength maxlength pattern

<input type="number">

Numerik 
<input type="number" 
       name="usia" 
       min="1" 
       max="100"
       placeholder="Usia">
min max step

<input type="date">

Tanggal 
<input type="date" 
       name="tanggal_lahir">
min max

<input type="checkbox">

Multiple 
<label>
    <input type="checkbox" 
           name="hobi" 
           value="membaca">
    Membaca
</label>
<label>
    <input type="checkbox" 
           name="hobi" 
           value="olahraga">
    Olahraga
</label>
checked value

<input type="radio">

Single 
<label>
    <input type="radio" 
           name="jenis_kelamin" 
           value="L">
    Laki-laki
</label>
<label>
    <input type="radio" 
           name="jenis_kelamin" 
           value="P">
    Perempuan
</label>
checked value

<select>

Dropdown 
<select name="kota">
    <option value="">Pilih Kota</option>
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
</select>
multiple size

<textarea>

Multiline 
<textarea name="pesan" 
          rows="4" 
          placeholder="Tulis pesan Anda...">
</textarea>
rows cols maxlength

<input type="file">

File 
<input type="file" 
       name="foto"
       accept="image/*">
accept multiple

Struktur & Aksesibilitas Form

Kode HTML
<form>
    <div class="form-group">
        <label for="nama">Nama Lengkap:</label>
        <input type="text" id="nama" name="nama">
    </div>
    
    <fieldset>
        <legend>Jenis Kelamin</legend>
        <div class="radio-group">
            <label>
                <input type="radio" name="gender" value="L">
                Laki-laki
            </label>
            <label>
                <input type="radio" name="gender" value="P">
                Perempuan
            </label>
        </div>
    </fieldset>
</form>
Preview & Keuntungan
Jenis Kelamin
Aksesibilitas untuk screen reader
Klik label untuk fokus input
Struktur yang terorganisir
Kode HTML
<form>
    Nama Lengkap:
    <input type="text" name="nama">
    
    Jenis Kelamin:
    <input type="radio" name="gender" value="L"> Laki-laki
    <input type="radio" name="gender" value="P"> Perempuan
</form>
Preview & Masalah
Nama Lengkap:
Jenis Kelamin:
Laki-laki
Perempuan
Tidak ada hubungan label-input
Tidak bisa klik teks untuk fokus
Buruk untuk aksesibilitas

Validasi Form HTML5

required Wajib

Field harus diisi sebelum form dapat dikirim

minlength Panjang

Panjang minimal teks yang diizinkan

pattern Regex

Validasi berdasarkan regular expression

min/max Rentang

Nilai minimal dan maksimal untuk number/date

Contoh Form Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Registrasi</title>
    <style>
        .form-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        fieldset {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
        }
        button {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>Form Registrasi</h1>
        <form action="/register" method="post">
            <fieldset>
                <legend>Informasi Pribadi</legend>
                
                <div class="form-group">
                    <label for="nama">Nama Lengkap *</label>
                    <input type="text" id="nama" name="nama" required minlength="3">
                </div>
                
                <div class="form-group">
                    <label for="email">Email *</label>
                    <input type="email" id="email" name="email" required>
                </div>
                
                <div class="form-group">
                    <label for="password">Password *</label>
                    <input type="password" id="password" name="password" required minlength="6">
                </div>
            </fieldset>
            
            <fieldset>
                <legend>Informasi Tambahan</legend>
                
                <div class="form-group">
                    <label>Jenis Kelamin *</label>
                    <div>
                        <label><input type="radio" name="gender" value="L" required> Laki-laki</label>
                        <label><input type="radio" name="gender" value="P"> Perempuan</label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="kota">Kota</label>
                    <select id="kota" name="kota">
                        <option value="">Pilih Kota</option>
                        <option value="jakarta">Jakarta</option>
                        <option value="bandung">Bandung</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="pesan">Pesan</label>
                    <textarea id="pesan" name="pesan" rows="4"></textarea>
                </div>
            </fieldset>
            
            <button type="submit">Daftar</button>
            <button type="reset">Reset</button>
        </form>
    </div>
</body>
</html>

Form Registrasi Demo

Informasi Pribadi
Informasi Tambahan

Latihan Praktik

Buat Form Kontak yang Interaktif

Menengah

🎯 Tujuan:

Buat form kontak yang profesional dengan berbagai jenis input, validasi, dan struktur yang baik untuk aksesibilitas.

📋 Requirements:

Form dengan action dan method POST
Field nama, email, subjek, dan pesan
Validasi required untuk field wajib
Dropdown untuk jenis pertanyaan
Pengelompokan field dengan fieldset
Label yang terhubung dengan input
Tombol submit dan reset
Style dasar untuk tampilan yang rapi
Tip Pro: Gunakan fieldset dan legend untuk mengelompokkan field terkait, dan selalu gunakan label dengan atribut for untuk aksesibilitas terbaik!
Sebelumnya: Tabel Selanjutnya: Elemen Semantik