Dev4Site - Learning Management System

Pengenalan Form

Form digunakan untuk mengumpulkan input dari user. Form sangat penting untuk pendaftaran, login, pencarian, dan berbagai interaksi user lainnya.

Struktur Dasar Form:

<form action="proses.php" method="POST">
    <!-- Input fields di sini -->
</form>

Atribut Form:

action - URL tempat data form akan dikirim
method - Metode pengiriman (GET atau POST)
name - Nama form
target - Tempat menampilkan response

Input Types

1. Text Input

<!-- Input text biasa -->
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda">

<!-- Input dengan nilai default -->
<input type="text" name="kota" value="Jakarta">

<!-- Input read-only -->
<input type="text" name="readonly" value="Tidak bisa diedit" readonly>

<!-- Input disabled -->
<input type="text" name="disabled" value="Disabled" disabled>

2. Password

<label for="password">Password:</label>
<input type="password" id="password" name="password">

3. Email

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

4. Number

<label for="umur">Umur:</label>
<input type="number" id="umur" name="umur" min="1" max="100" step="1">

5. Date, Time, dan DateTime

<label for="tanggal">Tanggal:</label>
<input type="date" id="tanggal" name="tanggal">

<label for="waktu">Waktu:</label>
<input type="time" id="waktu" name="waktu">

<label for="datetime">Tanggal & Waktu:</label>
<input type="datetime-local" id="datetime" name="datetime">

6. Radio Button

<p>Jenis Kelamin:</p>
<input type="radio" id="laki" name="gender" value="laki-laki">
<label for="laki">Laki-laki</label>

<input type="radio" id="perempuan" name="gender" value="perempuan">
<label for="perempuan">Perempuan</label>

7. Checkbox

<p>Hobi:</p>
<input type="checkbox" id="baca" name="hobi" value="membaca">
<label for="baca">Membaca</label>

<input type="checkbox" id="olahraga" name="hobi" value="olahraga">
<label for="olahraga">Olahraga</label>

<input type="checkbox" id="musik" name="hobi" value="musik">
<label for="musik">Musik</label>

8. File Upload

<label for="file">Upload File:</label>
<input type="file" id="file" name="file">

<!-- Multiple files -->
<input type="file" id="files" name="files" multiple>

<!-- Specific file types -->
<input type="file" id="gambar" name="gambar" accept="image/*">

9. Range (Slider)

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

10. Color Picker

<label for="warna">Pilih Warna:</label>
<input type="color" id="warna" name="warna" value="#ff0000">

11. URL dan Tel

<label for="website">Website:</label>
<input type="url" id="website" name="website">

<label for="telepon">Telepon:</label>
<input type="tel" id="telepon" name="telepon">

Textarea

Untuk input teks multi-baris:

<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="5" cols="40" placeholder="Tulis pesan Anda..."></textarea>

<!-- Single select -->
<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>
    <option value="surabaya" selected>Surabaya</option>
    <option value="medan">Medan</option>
</select>

<!-- Multiple select -->
<label for="bahasa">Bahasa Pemrograman:</label>
<select id="bahasa" name="bahasa" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="php">PHP</option>
</select>

<!-- Dengan optgroup -->
<label for="negara">Negara:</label>
<select id="negara" name="negara">
    <optgroup label="Asia">
        <option value="id">Indonesia</option>
        <option value="my">Malaysia</option>
        <option value="sg">Singapore</option>
    </optgroup>
    <optgroup label="Eropa">
        <option value="uk">United Kingdom</option>
        <option value="fr">France</option>
        <option value="de">Germany</option>
    </optgroup>
</select>

Button

<!-- Submit button -->
<button type="submit">Kirim</button>
<input type="submit" value="Kirim Form">

<!-- Reset button -->
<button type="reset">Reset</button>
<input type="reset" value="Reset Form">

<!-- Regular button -->
<button type="button" onclick="alert('Hello')">Klik Saya</button>
<input type="button" value="Button" onclick="alert('Hi')">

Atribut Input Penting

<!-- Required -->
<input type="text" name="nama" required>

<!-- Placeholder -->
<input type="text" name="nama" placeholder="Nama lengkap">

<!-- Maxlength -->
<input type="text" name="username" maxlength="20">

<!-- Pattern (regex) -->
<input type="text" name="kode" pattern="[A-Z]{3}" title="3 huruf besar">

<!-- Autofocus -->
<input type="text" name="nama" autofocus>

<!-- Autocomplete -->
<input type="text" name="email" autocomplete="email">

Fieldset dan Legend

Mengelompokkan input dalam form:

<form>
    <fieldset>
        <legend>Data Pribadi</legend>
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama"><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </fieldset>
    
    <fieldset>
        <legend>Alamat</legend>
        <label for="jalan">Jalan:</label>
        <input type="text" id="jalan" name="jalan"><br><br>
        
        <label for="kota">Kota:</label>
        <input type="text" id="kota" name="kota">
    </fieldset>
</form>

Contoh Form Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Form Pendaftaran</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        button[type="reset"] {
            background-color: #f44336;
            margin-left: 10px;
        }
        button[type="reset"]:hover {
            background-color: #da190b;
        }
    </style>
</head>
<body>
    <h1>Form Pendaftaran Member</h1>
    
    <form action="#" 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>
            </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>
            
            <div class="form-group">
                <label for="tanggal_lahir">Tanggal Lahir:</label>
                <input type="date" id="tanggal_lahir" name="tanggal_lahir">
            </div>
            
            <div class="form-group">
                <label>Jenis Kelamin:</label>
                <input type="radio" id="laki" name="gender" value="laki-laki">
                <label for="laki" style="display: inline; font-weight: normal;">Laki-laki</label>
                
                <input type="radio" id="perempuan" name="gender" value="perempuan">
                <label for="perempuan" style="display: inline; font-weight: normal;">Perempuan</label>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>Informasi Kontak</legend>
            
            <div class="form-group">
                <label for="telepon">Nomor Telepon:</label>
                <input type="tel" id="telepon" name="telepon">
            </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>
                    <option value="surabaya">Surabaya</option>
                    <option value="medan">Medan</option>
                    <option value="semarang">Semarang</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="alamat">Alamat Lengkap:</label>
                <textarea id="alamat" name="alamat" rows="4"></textarea>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>Preferensi</legend>
            
            <div class="form-group">
                <label>Minat: (pilih lebih dari satu)</label>
                <input type="checkbox" id="teknologi" name="minat" value="teknologi">
                <label for="teknologi" style="display: inline; font-weight: normal;">Teknologi</label><br>
                
                <input type="checkbox" id="olahraga" name="minat" value="olahraga">
                <label for="olahraga" style="display: inline; font-weight: normal;">Olahraga</label><br>
                
                <input type="checkbox" id="musik" name="minat" value="musik">
                <label for="musik" style="display: inline; font-weight: normal;">Musik</label><br>
                
                <input type="checkbox" id="seni" name="minat" value="seni">
                <label for="seni" style="display: inline; font-weight: normal;">Seni</label>
            </div>
            
            <div class="form-group">
                <label for="foto">Upload Foto Profil:</label>
                <input type="file" id="foto" name="foto" accept="image/*">
            </div>
        </fieldset>
        
        <div class="form-group">
            <input type="checkbox" id="setuju" name="setuju" required>
            <label for="setuju" style="display: inline; font-weight: normal;">
                Saya setuju dengan syarat dan ketentuan *
            </label>
        </div>
        
        <div class="form-group">
            <button type="submit">Daftar</button>
            <button type="reset">Reset Form</button>
        </div>
    </form>
    
    <p><small>* Wajib diisi</small></p>
</body>
</html>

Latihan Artikel 5:

Buat form kontak dengan nama, email, subjek, dan pesan
Buat form pendaftaran dengan berbagai jenis input (text, email, password, radio, checkbox)
Gunakan select dropdown untuk pilihan kota atau negara
Tambahkan validasi required pada field penting
Implementasikan fieldset untuk mengelompokkan input

5: Form dan Input HTML

Pengenalan Form

Input Types

1. Text Input

2. Password

3. Email

4. Number

5. Date, Time, dan DateTime

6. Radio Button

7. Checkbox

8. File Upload

9. Range (Slider)

10. Color Picker

11. URL dan Tel

Textarea

Button

Atribut Input Penting

Fieldset dan Legend

Contoh Form Lengkap

Diskusi & Komentar

💬 0 Komentars

Belum Ada Komentar

Daftar Isi

Konten Kursus

1: Mengenal HTML - Pengertian dan Cara Penulisan

2: Elemen Teks HTML (Heading, Paragraf, dan Formatting)

3: Link dan Gambar dalam HTML

4: List dan Tabel HTML

5: Form dan Input HTML

6: Semantic HTML dan Best Practices

5: Form dan Input HTML

Pengenalan Form

Input Types

1. Text Input

2. Password

3. Email

4. Number

5. Date, Time, dan DateTime

6. Radio Button

7. Checkbox

8. File Upload

9. Range (Slider)

10. Color Picker

11. URL dan Tel

Textarea

Select (Dropdown)

Button

Atribut Input Penting

Fieldset dan Legend

Contoh Form Lengkap

Diskusi & Komentar

💬 0 Komentars

Belum Ada Komentar

Daftar Isi

Konten Kursus

1: Mengenal HTML - Pengertian dan Cara Penulisan

2: Elemen Teks HTML (Heading, Paragraf, dan Formatting)

3: Link dan Gambar dalam HTML

4: List dan Tabel HTML

5: Form dan Input HTML

6: Semantic HTML dan Best Practices