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.
Daftar isi
- Struktur Dasar Form HTML
- Tag Input – Elemen Form Paling Serbaguna
- Tag Textarea – Input Teks Panjang
- Tag Select – Dropdown Menu
- Contoh Form HTML Lengkap
- Atribut Penting pada Input Form
- Tips Membuat Form HTML yang Baik
- Jenis-jenis Input Type HTML5
- Perbedaan Method GET dan POST
- Validasi Form dengan HTML5
- Button dalam Form HTML
- Kesimpulan
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 datamethod– 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:
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:
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:
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 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:
Atribut Penting pada Input Form
Berikut adalah atribut yang sering digunakan dalam form html:
| Atribut | Fungsi |
|---|---|
required | Membuat field wajib diisi |
placeholder | Teks petunjuk di dalam input |
value | Nilai default input |
disabled | Menonaktifkan input |
readonly | Input hanya bisa dibaca |
maxlength | Batas maksimal karakter |
pattern | Validasi dengan regex |
min / max | Nilai minimum/maksimum (untuk number/date) |
Tips Membuat Form HTML yang Baik
- Gunakan label yang jelas – Setiap input harus memiliki
<label>yang deskriptif - Tambahkan validasi – Gunakan atribut
required,pattern, dan tipe input yang sesuai - Buat responsif – Pastikan form dapat diakses dengan baik di perangkat mobile
- Gunakan placeholder – Berikan contoh format input yang diharapkan
- Kelompokkan field – Gunakan
<fieldset>dan<legend>untuk form yang kompleks - 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 kemudahantype="url"– Untuk input URL/link websitetype="tel"– Untuk nomor telepon, menampilkan numeric keyboard di mobiletype="search"– Input pencarian dengan tombol clear (x)
Input Type untuk Tanggal dan Waktu
type="date"– Date picker untuk memilih tanggaltype="time"– Time picker untuk memilih waktutype="datetime-local"– Kombinasi tanggal dan waktutype="month"– Memilih bulan dan tahuntype="week"– Memilih minggu dalam tahun
Input Type Interaktif
type="color"– Color picker untuk memilih warnatype="range"– Slider untuk memilih nilai dalam rentang tertentutype="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 diisiminlength/maxlength– Panjang karakter minimum/maksimummin/max– Nilai minimum/maksimum untuk angkapattern– Validasi dengan regular expressiontitle– 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.
