HTML Dasar #11 - Membuat Form (form) dan Method GET vs POST

Pernahkah kamu mengisi formulir pendaftaran, login ke media sosial, atau mencari sesuatu di Google? Itu semua adalah form (formulir)! Form adalah jembatan antara pengguna dan website — tempat di mana pengguna bisa mengirimkan data ke server.

Apa Itu Form di HTML?

Form adalah kumpulan elemen input seperti teks, password, tombol, checkbox, radio button, dan lainnya yang memungkinkan pengguna memasukkan data. Data ini kemudian dikirim ke server untuk diproses (misal: login, registrasi, pencarian, dll).

Analogi Sederhana: Form seperti formulir pendaftaran di kertas. Kamu mengisi nama, alamat, nomor telepon, lalu menyerahkan ke petugas. Di website, petugasnya adalah server yang memproses data kamu.

Struktur Dasar Form

<form action="tujuan.php" method="POST">
    <!-- Semua elemen input di sini -->
    <input type="text" name="nama">
    <input type="submit" value="Kirim">
</form>

Dua atribut terpenting dalam form:

Atribut	Fungsi	Contoh
`action`	Ke mana data akan dikirim? (URL server)	`action="proses.php"`
`method`	Cara mengirim data (GET atau POST)	`method="POST"`

Perbedaan Method GET vs POST

Ini adalah konsep paling penting yang harus kamu pahami saat membuat form!

Karakteristik	GET	POST
Data terlihat di URL?	Ya (di address bar)	Tidak (tersembunyi)
Batasan ukuran data	Terbatas (~2048 karakter)	Tidak terbatas
Keamanan untuk password	Tidak aman	Lebih aman
Bisa di-bookmark?	Ya (hasil pencarian)	Tidak
Contoh penggunaan	Form pencarian Google	Login, registrasi, upload file

Contoh Data di URL (GET):

    https://www.google.com/search?q=belajar+html

Data "belajar html" terlihat jelas di URL setelah tanda ?.

Contoh POST (data tersembunyi):

    https://www.instagram.com/accounts/login/
    (data dikirim di dalam body request, tidak terlihat di URL)

Aturan Sederhana:

GET → untuk mengambil data (pencarian, filter, sorting)
POST → untuk mengirim/mengubah data (login, registrasi, upload, komentar)
Jangan pernah pakai GET untuk password atau data sensitif!

Studi Kasus: Form Pencarian (GET)

Form pencarian cocok menggunakan GET karena pengguna mungkin ingin membagikan link hasil pencarian ke teman.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Form Pencarian - GET</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        .search-box {
            display: flex;
            gap: 10px;
        }
        input[type="text"] {
            flex: 1;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 25px;
        }
        input[type="submit"] {
            padding: 12px 24px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background: #2563eb;
        }
        .info {
            background: #eef2ff;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <h1>Form Pencarian (GET Method)</h1>
    
    <form action="https://www.google.com/search" method="GET" target="_blank">
        <div class="search-box">
            <input type="text" name="q" placeholder="Cari apa hari ini?" autocomplete="off">
            <input type="submit" value="Cari di Google">
        </div>
    </form>

    <div class="info">
        Coba isi kata kunci, lalu klik Cari!

        Perhatikan URL setelah submit. Data pencarianmu akan muncul di address bar.

        Contoh: ...?q=belajar+html
    </div>

</body>
</html>

Studi Kasus: Form Login (POST)

Form login WAJIB menggunakan POST karena data sensitif (password) tidak boleh terlihat di URL.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Form Login - POST</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login-card {
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            width: 350px;
        }
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            padding: 12px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background: #5a67d8;
        }
        .info {
            background: #eef2ff;
            padding: 12px;
            border-radius: 8px;
            margin-top: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>

    <div class="login-card">
        <h2>Form Login (POST Method)</h2>
        
        <!-- action di sini hanya contoh (tidak akan berfungsi tanpa backend) -->
        <form action="#" method="POST">
            <div class="form-group">
                <label>Email / Username</label>
                <input type="text" name="username" placeholder="Masukkan email atau username" required>
            </div>
            
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" placeholder="Masukkan password" required>
            </div>
            
            <input type="submit" value="Login">
        </form>
        
        <div class="info">
            Perbedaan dengan GET:

            Data username dan password TIDAK TERLIHAT di URL karena method POST.

            Ini lebih aman untuk data sensitif!
        </div>
    </div>

</body>
</html>

Studi Kasus: Form Registrasi Lengkap

Berikut contoh form registrasi yang menggabungkan berbagai elemen input dengan method POST:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Form Registrasi - POST</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f2f5;
            padding: 40px 20px;
        }
        .container {
            max-width: 550px;
            margin: 0 auto;
            background: white;
            padding: 35px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #1a73e8;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: border 0.3s;
        }
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #1a73e8;
            box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
        }
        .radio-group, .checkbox-group {
            display: flex;
            gap: 20px;
            margin-top: 8px;
        }
        .radio-group label, .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: normal;
            cursor: pointer;
        }
        input[type="radio"], input[type="checkbox"] {
            width: auto;
            margin-right: 5px;
        }
        button {
            width: 100%;
            padding: 14px;
            background: #1a73e8;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover {
            background: #1557b0;
        }
        .info-box {
            background: #e8f0fe;
            padding: 15px;
            border-radius: 8px;
            margin-top: 25px;
            font-size: 14px;
            border-left: 4px solid #1a73e8;
        }
        hr {
            margin: 20px 0;
            border: none;
            border-top: 1px solid #eee;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Daftar Akun Baru</h1>
        
        <form action="#" method="POST">
            <div class="form-group">
                <label>Nama Lengkap</label>
                <input type="text" name="fullname" placeholder="Masukkan nama lengkap" required>
            </div>
            
            <div class="form-group">
                <label>Email</label>
                <input type="email" name="email" placeholder="contoh@email.com" required>
            </div>
            
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" placeholder="Minimal 8 karakter" required>
            </div>
            
            <div class="form-group">
                <label>Konfirmasi Password</label>
                <input type="password" name="confirm_password" placeholder="Ketik ulang password" required>
            </div>
            
            <div class="form-group">
                <label>Nomor Telepon</label>
                <input type="tel" name="phone" placeholder="08xx-xxxx-xxxx">
            </div>
            
            <div class="form-group">
                <label>Jenis Kelamin</label>
                <div class="radio-group">
                    <label><input type="radio" name="gender" value="Laki-laki"> Laki-laki</label>
                    <label><input type="radio" name="gender" value="Perempuan"> Perempuan</label>
                    <label><input type="radio" name="gender" value="Lainnya"> Lainnya</label>
                </div>
            </div>
            
            <div class="form-group">
                <label>Kota / Domisili</label>
                <select name="city" required>
                    <option value="">Pilih Kota</option>
                    <option value="Jakarta">Jakarta</option>
                    <option value="Surabaya">Surabaya</option>
                    <option value="Bandung">Bandung</option>
                    <option value="Semarang">Semarang</option>
                    <option value="Yogyakarta">Yogyakarta</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>Alamat Lengkap</label>
                <textarea name="address" rows="3" placeholder="Jalan, RT/RW, Kelurahan, Kecamatan"></textarea>
            </div>
            
            <div class="form-group">
                <div class="checkbox-group">
                    <label><input type="checkbox" name="terms" required> Saya setuju dengan <a href="#">Syarat & Ketentuan</a></label>
                </div>
            </div>
            
            <button type="submit">Daftar Sekarang</button>
        </form>
        
        <div class="info-box">
            Mengapa menggunakan POST?

            Data registrasi seperti password, email, dan data pribadi lainnya TIDAK TERLIHAT di URL. Ini lebih aman dan melindungi privasi pengguna.
        </div>
        
        <hr>
        
        <div style="text-align: center; font-size: 13px; color: #666;">
            Sudah punya akun? <a href="#">Login di sini</a>
        </div>
    </div>

</body>
</html>

Tabel Perbandingan GET vs POST (Lengkap)

Aspek	GET	POST
Visibilitas data	Terlihat di URL	Tersembunyi (di body request)
Batasan ukuran	~2048 karakter	Tidak terbatas (hingga GB)
Keamanan	Rendah (tidak aman untuk password)	Sedang (lebih aman)
Cache (penyimpanan sementara)	Bisa di-cache browser	Tidak di-cache
Bookmark	Bisa di-bookmark	Tidak bisa di-bookmark
History browser	Tersimpan di history	Tidak tersimpan
Tipe data	Hanya teks	Teks, file, binary, dll
Contoh penggunaan	Pencarian, filter, pagination	Login, registrasi, upload, komentar

Eksperimen: Melihat Perbedaan GET dan POST

Coba dua form sederhana ini untuk melihat langsung perbedaannya:

Form GET

Coba submit, lihat URL berubah jadi: ?nama=...&umur=...

Form POST

Coba submit, URL tetap bersih! Data dikirim secara tersembunyi.

Kesalahan Umum Pemula

Menggunakan GET untuk form login/registrasi → Password terlihat di URL! Sangat berbahaya!
Lupa memberi atribut name pada input → Data tidak akan terkirim ke server
Lupa menentukan method → Defaultnya adalah GET (mungkin tidak sesuai kebutuhan)
Mengirim file dengan method GET → Tidak bisa! Upload file WAJIB pakai POST
Action kosong atau salah → Data tidak tahu mau dikirim ke mana

Peringatan Keamanan: Jangan pernah menggunakan method GET untuk:

Form login / password
Data kartu kredit / pembayaran
Data pribadi (KTP, alamat, nomor telepon)
Upload file

Data sensitif akan terlihat jelas di URL, tersimpan di history browser, dan bisa dilihat orang lain!

Latihan Singkat

Buat file HTML baru dengan judul "Form Kontak Sederhana"
Form harus memiliki field: Nama, Email, Pesan
Gunakan method POST (karena mengirim data ke server)
Action isi dengan # (karena belum punya backend)
Tambahkan tombol submit dengan teks "Kirim Pesan"
Simpan dan buka di browser, coba isi dan submit

Intisari Hari Ini

<form> adalah wadah untuk elemen input pengguna
action = kemana data dikirim (URL server)
method = cara mengirim data (GET atau POST)
GET → data di URL, untuk pencarian/filter, batasan ukuran
POST → data tersembunyi, untuk data sensitif/upload, tanpa batasan
JANGAN PAKAI GET UNTUK PASSWORD!

Tantangan Akhir Pekan: Buat sebuah Form Survei Kepuasan Pelanggan untuk sebuah restoran fiktif. Form harus memiliki:

Field identitas (nama, email, nomor telepon) → pakai POST
Rating (1-5) menggunakan radio button
Pilihan makanan favorit menggunakan checkbox (minimal 5 pilihan)
Komentar/saran menggunakan textarea
Dropdown untuk memilih cabang restoran
Di bagian bawah, buat kotak perbandingan yang menjelaskan mengapa form ini menggunakan POST bukan GET

Gunakan CSS untuk membuat form terlihat profesional dan menarik. Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #10 - Menggabungkan Sel Tabel dengan colspan dan rowspan
Artikel Selanjutnya: HTML Dasar #12 - Input Text, Password, Email, Number, dan Textarea

HTML Dasar #11 - Membuat Form (form) dan Method GET vs POST

Apa Itu Form di HTML?

Struktur Dasar Form

Perbedaan Method GET vs POST

Contoh Data di URL (GET):

Contoh POST (data tersembunyi):

Studi Kasus: Form Pencarian (GET)

Studi Kasus: Form Login (POST)

Studi Kasus: Form Registrasi Lengkap

Tabel Perbandingan GET vs POST (Lengkap)

Eksperimen: Melihat Perbedaan GET dan POST

Form GET

Form POST

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

Android Kotlin - Lanjutan dari ASP.NET Core API

Categories

Main Tags

Latest Posts

Popular Posts

Android Kotlin - Lanjutan dari ASP.NET Core API

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال