Cara Membuat Formulir HTML (Form, Input, Textarea, Select)

Created at by Aris Munandar

Formulir atau form html adalah elemen penting dalam website yang memungkinkan pengguna untuk mengirimkan data seperti login, registrasi, kontak, atau survey. Dengan memahami cara membuat form html, Anda dapat mengembangkan website yang interaktif dan fungsional.

Baca juga: Cara Membuat Tabel HTML Lengkap dengan Contoh

Struktur Dasar Form HTML

Untuk membuat formulir html, Anda memerlukan tag <form> sebagai wadah utama. Berikut adalah struktur dasarnya:

<form action="/submit" method="POST">
    <!-- Elemen form di sini -->
</form>Code language: HTML, XML (xml)

Atribut penting pada tag form:

  • action – URL tujuan pengiriman data
  • method – Metode pengiriman (GET atau POST)
  • enctype – Tipe encoding data (untuk upload file)

Tag Input – Elemen Form Paling Serbaguna

Tag <input> adalah elemen paling umum dalam form html dengan berbagai tipe yang berbeda:

1. Input Text dan Password

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
</form>Code language: HTML, XML (xml)

Hasil tampilan:

Text Input dan Password

2. Input Email dan Number

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="contoh@email.com">
    
    <label for="age">Umur:</label>
    <input type="number" id="age" name="age" min="1" max="100">
</form>Code language: HTML, XML (xml)

3. Input Radio dan Checkbox

<form>
    <p>Jenis Kelamin:</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Laki-laki</label>
    
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Perempuan</label>
    
    <p>Hobi:</p>
    <input type="checkbox" id="reading" name="hobby" value="reading">
    <label for="reading">Membaca</label>
    
    <input type="checkbox" id="sports" name="hobby" value="sports">
    <label for="sports">Olahraga</label>
</form>Code language: HTML, XML (xml)

Hasil tampilan:

Input radio dan checkbox

Tag Textarea – Input Teks Panjang

Tag <textarea> digunakan untuk input teks yang lebih panjang seperti komentar atau pesan:

<form>
    <label for="message">Pesan:</label>
    <textarea id="message" name="message" rows="5" cols="40" placeholder="Tulis pesan Anda di sini..."></textarea>
</form>Code language: HTML, XML (xml)

Hasil tampilan:

Textarea

Tag Select – Dropdown Menu

Tag <select> membuat dropdown menu untuk memilih opsi. Elemen ini sangat berguna dalam form html ketika Anda memiliki banyak pilihan yang perlu ditampilkan secara ringkas:

<form>
    <label for="city">Pilih Kota:</label>
    <select id="city" name="city">
        <option value="">-- Pilih Kota --</option>
        <option value="jakarta">Jakarta</option>
        <option value="bandung">Bandung</option>
        <option value="surabaya">Surabaya</option>
        <option value="yogyakarta">Yogyakarta</option>
    </select>
</form>Code language: HTML, XML (xml)

Hasil tampilan:

Select dropdown

Select dengan Multiple Options

Anda juga bisa membuat dropdown yang memungkinkan pemilihan lebih dari satu opsi:

<form>
    <label for="skills">Pilih Keahlian (Ctrl+Click untuk multiple):</label>
    <select id="skills" name="skills" multiple size="4">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
    </select>
</form>Code language: HTML, XML (xml)

Contoh Form HTML Lengkap

Berikut adalah contoh form html lengkap untuk formulir pendaftaran:

<!DOCTYPE html>
<html>
<head>
    <title>Form Pendaftaran</title>
    <style>
        form {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <form action="/register" method="POST">
        <h2>Form Pendaftaran</h2>
        
        <label for="fullname">Nama Lengkap:</label>
        <input type="text" id="fullname" name="fullname" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="phone">Nomor Telepon:</label>
        <input type="tel" id="phone" name="phone" pattern="[0-9]{10,13}">
        
        <label for="birthdate">Tanggal Lahir:</label>
        <input type="date" id="birthdate" name="birthdate">
        
        <label for="province">Provinsi:</label>
        <select id="province" name="province" required>
            <option value="">-- Pilih Provinsi --</option>
            <option value="jawa-barat">Jawa Barat</option>
            <option value="jawa-tengah">Jawa Tengah</option>
            <option value="jawa-timur">Jawa Timur</option>
        </select>
        
        <label for="address">Alamat:</label>
        <textarea id="address" name="address" rows="4"></textarea>
        
        <label>
            <input type="checkbox" name="agree" required>
            Saya setuju dengan syarat dan ketentuan
        </label>
        
        <button type="submit">Daftar Sekarang</button>
    </form>
</body>
</html>Code language: HTML, XML (xml)

Hasil tampilan dari kode lengkap input form di atas:

Full Form

Atribut Penting pada Input Form

Berikut adalah atribut yang sering digunakan dalam form html:

AtributFungsi
requiredMembuat field wajib diisi
placeholderTeks petunjuk di dalam input
valueNilai default input
disabledMenonaktifkan input
readonlyInput hanya bisa dibaca
maxlengthBatas maksimal karakter
patternValidasi dengan regex
min / maxNilai minimum/maksimum (untuk number/date)

Tips Membuat Form HTML yang Baik

  1. Gunakan label yang jelas – Setiap input harus memiliki <label> yang deskriptif
  2. Tambahkan validasi – Gunakan atribut required, pattern, dan tipe input yang sesuai
  3. Buat responsif – Pastikan form dapat diakses dengan baik di perangkat mobile
  4. Gunakan placeholder – Berikan contoh format input yang diharapkan
  5. Kelompokkan field – Gunakan <fieldset> dan <legend> untuk form yang kompleks
  6. Tambahkan feedback – Berikan pesan error atau sukses yang jelas

Jenis-jenis Input Type HTML5

HTML5 menyediakan berbagai tipe input modern untuk formulir html yang membuat pengalaman pengguna lebih baik:

Input Type untuk Data Spesifik

  • type="email" – Validasi format email otomatis, keyboard mobile akan menampilkan tombol @ untuk kemudahan
  • type="url" – Untuk input URL/link website
  • type="tel" – Untuk nomor telepon, menampilkan numeric keyboard di mobile
  • type="search" – Input pencarian dengan tombol clear (x)

Input Type untuk Tanggal dan Waktu

  • type="date" – Date picker untuk memilih tanggal
  • type="time" – Time picker untuk memilih waktu
  • type="datetime-local" – Kombinasi tanggal dan waktu
  • type="month" – Memilih bulan dan tahun
  • type="week" – Memilih minggu dalam tahun

Input Type Interaktif

  • type="color" – Color picker untuk memilih warna
  • type="range" – Slider untuk memilih nilai dalam rentang tertentu
  • type="file" – Upload file dari komputer

Contoh penggunaan input type modern:

<form>
    <label for="website">Website:</label>
    <input type="url" id="website" name="website" placeholder="https://example.com">
    
    <label for="birthday">Tanggal Lahir:</label>
    <input type="date" id="birthday" name="birthday">
    
    <label for="favcolor">Warna Favorit:</label>
    <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
    <label for="volume">Volume:</label>
    <input type="range" id="volume" name="volume" min="0" max="100" value="50">
</form>Code language: HTML, XML (xml)

Perbedaan Method GET dan POST

Dalam membuat form html, pemilihan method pengiriman data sangat penting:

Method GET

Method GET mengirimkan data melalui URL. Data akan terlihat di address bar browser:

<form action="/search" method="GET">
    <input type="text" name="query" placeholder="Cari...">
    <button type="submit">Cari</button>
</form>Code language: HTML, XML (xml)

Karakteristik GET:

  • Data terlihat di URL (contoh: website.com/search?query=html)
  • Cocok untuk pencarian dan filter
  • Bisa di-bookmark
  • Tidak aman untuk data sensitif
  • Batasan panjang data (sekitar 2048 karakter)

Method POST

Method POST mengirimkan data di dalam body request HTTP, tidak terlihat di URL:

<form action="/login" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">Login</button>
</form>Code language: HTML, XML (xml)

Karakteristik POST:

  • Data tidak terlihat di URL
  • Lebih aman untuk data sensitif
  • Tidak ada batasan panjang data
  • Cocok untuk login, registrasi, upload file
  • Tidak bisa di-bookmark

Validasi Form dengan HTML5

HTML5 menyediakan validasi bawaan yang memudahkan pembuatan formulir html yang lebih robust:

<form>
    <label for="username">Username (minimal 3 karakter):</label>
    <input type="text" id="username" name="username" 
           required minlength="3" maxlength="20">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="age">Umur (18-65):</label>
    <input type="number" id="age" name="age" 
           required min="18" max="65">
    
    <label for="website">Website (format URL):</label>
    <input type="url" id="website" name="website" 
           pattern="https?://.+">
    
    <label for="phone">Telepon (format: 08xxxxxxxxxx):</label>
    <input type="tel" id="phone" name="phone" 
           pattern="08[0-9]{9,11}" 
           title="Format: 08xxxxxxxxxx">
    
    <button type="submit">Kirim</button>
</form>Code language: HTML, XML (xml)

Atribut validasi yang tersedia:

  • required – Field wajib diisi
  • minlength / maxlength – Panjang karakter minimum/maksimum
  • min / max – Nilai minimum/maksimum untuk angka
  • pattern – Validasi dengan regular expression
  • title – Pesan tooltip untuk panduan user

Button dalam Form HTML

Ada tiga jenis button yang bisa digunakan dalam form html:

<form>
    <!-- Button Submit: Mengirim form -->
    <button type="submit">Kirim Data</button>
    
    <!-- Button Reset: Mengosongkan form -->
    <button type="reset">Reset Form</button>
    
    <!-- Button Biasa: Untuk JavaScript -->
    <button type="button" onclick="alert('Hello!')">Klik Saya</button>
</form>Code language: HTML, XML (xml)

Anda juga bisa menggunakan tag <input> untuk button:

<form>
    <input type="submit" value="Kirim">
    <input type="reset" value="Reset">
    <input type="button" value="Button" onclick="myFunction()">
</form>Code language: HTML, XML (xml)

Kesimpulan

Membuat form html adalah skill fundamental dalam pengembangan web. Dengan menguasai tag <form>, <input>, <textarea>, dan <select>, Anda dapat membuat formulir yang fungsional dan user-friendly.

Pastikan untuk memilih method yang tepat (GET atau POST) sesuai kebutuhan, gunakan validasi HTML5 untuk meningkatkan keamanan data, dan tambahkan styling dengan CSS untuk tampilan yang menarik. Dengan memahami berbagai tipe input HTML5, Anda dapat membuat formulir html yang modern dan responsif.

Praktikkan contoh-contoh di atas dan eksperimen dengan berbagai kombinasi atribut untuk menguasai pembuatan form HTML secara menyeluruh. Kombinasikan dengan JavaScript untuk validasi yang lebih kompleks dan interaksi yang lebih dinamis agar form html Anda semakin profesional.

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading