HTML5 membawa revolusi besar dalam pengembangan form dengan memperkenalkan berbagai input type baru yang lebih spesifik dan powerful. Input type HTML5 tidak hanya mempermudah validasi data, tetapi juga meningkatkan user experience dengan menampilkan keyboard yang sesuai di perangkat mobile dan menyediakan UI picker yang intuitif. Artikel ini akan membahas secara lengkap semua input type HTML5 terbaru dengan contoh praktis dan implementasi yang efektif.
Daftar isi
- Mengapa Input Type HTML5 Penting?
- 1. Input Type Email
- 2. Input Type Number
- 3. Input Type Range
- 4. Input Type Date
- 5. Input Type Time
- 6. Input Type Datetime-Local
- 7. Input Type Week
- 8. Input Type Month
- 9. Input Type Color
- 10. Input Type Tel
- 11. Input Type URL
- 12. Input Type Search
- 13. Input Type File
- Contoh Form Lengkap dengan Semua Input Type HTML5
- Browser Support Input Type HTML5
- Best Practice Input Type HTML5
- Kesimpulan
Baca juga: Cara Membuat Form Validation dengan HTML5
Mengapa Input Type HTML5 Penting?
Input type HTML5 memberikan banyak keuntungan untuk pengembangan website modern:
Manfaat Input Type HTML5
- Validasi Bawaan: Validasi otomatis tanpa JavaScript tambahan
- Mobile-Friendly: Keyboard yang sesuai muncul otomatis di perangkat mobile
- User Experience: UI picker intuitif untuk date, time, color, dll
- Accessibility: Lebih accessible untuk screen reader dan assistive technology
- Semantic: Kode lebih bermakna dan mudah dipahami
- Browser Support: Didukung oleh semua browser modern
1. Input Type Email
Input type email digunakan untuk input alamat email dengan validasi format otomatis.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Type Email</title>
</head>
<body>
<form action="/submit" method="post">
<h2>Input Type Email</h2>
<!-- Email basic -->
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="nama@example.com"
required
>
</div>
<!-- Email dengan multiple -->
<div class="form-group">
<label for="emails">Multiple Emails</label>
<input
type="email"
id="emails"
name="emails"
multiple
placeholder="email1@example.com, email2@example.com"
>
<small>Pisahkan dengan koma untuk multiple email</small>
</div>
<!-- Email dengan pattern -->
<div class="form-group">
<label for="email-domain">Email Perusahaan</label>
<input
type="email"
id="email-domain"
name="email_domain"
pattern="[a-z0-9._%+-]+@company\.com$"
title="Harus menggunakan email @company.com"
placeholder="nama@company.com"
required
>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>Code language: HTML, XML (xml)Keuntungan Input Type Email
- Validasi format email otomatis
- Keyboard email muncul di mobile (dengan @)
- Autocomplete email dari browser
- Mendukung multiple email addresses
2. Input Type Number
Input type number digunakan untuk input angka dengan kontrol increment/decrement.
<form action="/submit" method="post">
<h2>Input Type Number</h2>
<!-- Number basic -->
<div class="form-group">
<label for="quantity">Jumlah</label>
<input
type="number"
id="quantity"
name="quantity"
min="1"
max="100"
value="1"
required
>
</div>
<!-- Number dengan step -->
<div class="form-group">
<label for="price">Harga</label>
<input
type="number"
id="price"
name="price"
min="0"
step="0.01"
placeholder="0.00"
required
>
<small>Desimal diperbolehkan</small>
</div>
<!-- Number dengan step integer -->
<div class="form-group">
<label for="age">Usia</label>
<input
type="number"
id="age"
name="age"
min="17"
max="100"
step="1"
required
>
</div>
<!-- Number tanpa spinner -->
<div class="form-group">
<label for="code">Kode</label>
<input
type="number"
id="code"
name="code"
style="appearance: textfield;"
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)Atribut Input Type Number
- min: Nilai minimum yang diperbolehkan
- max: Nilai maksimum yang diperbolehkan
- step: Increment/decrement value (default: 1)
- value: Nilai default
3. Input Type Range
Input type range menampilkan slider untuk memilih nilai dalam rentang tertentu.
<form action="/submit" method="post">
<h2>Input Type Range</h2>
<!-- Range basic -->
<div class="form-group">
<label for="volume">Volume</label>
<input
type="range"
id="volume"
name="volume"
min="0"
max="100"
value="50"
>
<output for="volume">50</output>
</div>
<!-- Range dengan step -->
<div class="form-group">
<label for="rating">Rating (1-10)</label>
<input
type="range"
id="rating"
name="rating"
min="1"
max="10"
step="1"
value="5"
oninput="this.nextElementSibling.value = this.value"
>
<output>5</output>
</div>
<!-- Range dengan datalist -->
<div class="form-group">
<label for="brightness">Brightness</label>
<input
type="range"
id="brightness"
name="brightness"
min="0"
max="100"
step="25"
list="brightness-levels"
>
<datalist id="brightness-levels">
<option value="0" label="0%">
<option value="25" label="25%">
<option value="50" label="50%">
<option value="75" label="75%">
<option value="100" label="100%">
</datalist>
</div>
<button type="submit">Submit</button>
</form>
<script>
// Update output value dynamically
const volumeInput = document.getElementById('volume');
const volumeOutput = document.querySelector('output[for="volume"]');
volumeInput.addEventListener('input', function() {
volumeOutput.value = this.value;
});
</script>Code language: HTML, XML (xml)Styling Input Type Range
<style>
input[type="range"] {
width: 100%;
height: 8px;
border-radius: 5px;
background: #ddd;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
border: none;
}
</style>Code language: HTML, XML (xml)4. Input Type Date
Input type date menampilkan date picker untuk memilih tanggal.
<form action="/submit" method="post">
<h2>Input Type Date</h2>
<!-- Date basic -->
<div class="form-group">
<label for="birthdate">Tanggal Lahir</label>
<input
type="date"
id="birthdate"
name="birthdate"
required
>
</div>
<!-- Date dengan min dan max -->
<div class="form-group">
<label for="reservation">Tanggal Reservasi</label>
<input
type="date"
id="reservation"
name="reservation"
min="2024-10-15"
max="2024-12-31"
required
>
<small>Reservasi hanya tersedia hingga akhir tahun</small>
</div>
<!-- Date dengan value default -->
<div class="form-group">
<label for="start-date">Tanggal Mulai</label>
<input
type="date"
id="start-date"
name="start_date"
value="2024-10-15"
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)5. Input Type Time
Input type time untuk memilih waktu dengan format 24 jam.
<form action="/submit" method="post">
<h2>Input Type Time</h2>
<!-- Time basic -->
<div class="form-group">
<label for="meeting-time">Waktu Meeting</label>
<input
type="time"
id="meeting-time"
name="meeting_time"
required
>
</div>
<!-- Time dengan min dan max -->
<div class="form-group">
<label for="work-time">Jam Kerja</label>
<input
type="time"
id="work-time"
name="work_time"
min="08:00"
max="17:00"
required
>
<small>Jam kerja: 08:00 - 17:00</small>
</div>
<!-- Time dengan step (seconds) -->
<div class="form-group">
<label for="precise-time">Waktu Presisi</label>
<input
type="time"
id="precise-time"
name="precise_time"
step="1"
>
<small>Termasuk detik</small>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)6. Input Type Datetime-Local
Input type datetime-local untuk memilih tanggal dan waktu lokal.
<form action="/submit" method="post">
<h2>Input Type Datetime-Local</h2>
<!-- Datetime-local basic -->
<div class="form-group">
<label for="appointment">Jadwal Appointment</label>
<input
type="datetime-local"
id="appointment"
name="appointment"
required
>
</div>
<!-- Datetime-local dengan min -->
<div class="form-group">
<label for="event-time">Waktu Event</label>
<input
type="datetime-local"
id="event-time"
name="event_time"
min="2024-10-15T00:00"
required
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)7. Input Type Week
Input type week untuk memilih minggu dalam tahun.
<form action="/submit" method="post">
<h2>Input Type Week</h2>
<div class="form-group">
<label for="week-select">Pilih Minggu</label>
<input
type="week"
id="week-select"
name="week"
required
>
</div>
<div class="form-group">
<label for="work-week">Minggu Kerja</label>
<input
type="week"
id="work-week"
name="work_week"
min="2024-W01"
max="2024-W52"
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)8. Input Type Month
Input type month untuk memilih bulan dan tahun.
<form action="/submit" method="post">
<h2>Input Type Month</h2>
<div class="form-group">
<label for="birth-month">Bulan Lahir</label>
<input
type="month"
id="birth-month"
name="birth_month"
required
>
</div>
<div class="form-group">
<label for="report-month">Bulan Laporan</label>
<input
type="month"
id="report-month"
name="report_month"
min="2024-01"
max="2024-12"
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)9. Input Type Color
Input type color menampilkan color picker untuk memilih warna.
<form action="/submit" method="post">
<h2>Input Type Color</h2>
<!-- Color basic -->
<div class="form-group">
<label for="favorite-color">Warna Favorit</label>
<input
type="color"
id="favorite-color"
name="favorite_color"
value="#3498db"
>
</div>
<!-- Color untuk theme -->
<div class="form-group">
<label for="theme-color">Warna Theme</label>
<input
type="color"
id="theme-color"
name="theme_color"
value="#667eea"
onchange="document.body.style.backgroundColor = this.value"
>
<small>Pilih warna untuk mengubah background</small>
</div>
<!-- Multiple color inputs -->
<div class="form-group">
<label for="primary-color">Primary Color</label>
<input
type="color"
id="primary-color"
name="primary_color"
value="#667eea"
>
</div>
<div class="form-group">
<label for="secondary-color">Secondary Color</label>
<input
type="color"
id="secondary-color"
name="secondary_color"
value="#764ba2"
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)10. Input Type Tel
Input type tel untuk input nomor telepon dengan keyboard telepon di mobile.
<form action="/submit" method="post">
<h2>Input Type Tel</h2>
<!-- Tel basic -->
<div class="form-group">
<label for="phone">Nomor Telepon</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="08123456789"
required
>
</div>
<!-- Tel dengan pattern -->
<div class="form-group">
<label for="mobile">Nomor HP</label>
<input
type="tel"
id="mobile"
name="mobile"
pattern="[0-9]{10,13}"
placeholder="08123456789"
title="Nomor telepon harus 10-13 digit"
required
>
</div>
<!-- Tel dengan format internasional -->
<div class="form-group">
<label for="intl-phone">Telepon Internasional</label>
<input
type="tel"
id="intl-phone"
name="intl_phone"
pattern="^\+[0-9]{1,3}[0-9]{4,14}$"
placeholder="+6281234567890"
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)11. Input Type URL
Input type url untuk input alamat website dengan validasi format URL.
<form action="/submit" method="post">
<h2>Input Type URL</h2>
<!-- URL basic -->
<div class="form-group">
<label for="website">Website</label>
<input
type="url"
id="website"
name="website"
placeholder="https://example.com"
required
>
</div>
<!-- URL dengan pattern -->
<div class="form-group">
<label for="portfolio">Portfolio URL</label>
<input
type="url"
id="portfolio"
name="portfolio"
pattern="https://.*"
placeholder="https://portfolio.com"
title="URL harus dimulai dengan https://"
>
</div>
<!-- Multiple URLs -->
<div class="form-group">
<label for="social-links">Social Media Links</label>
<input
type="url"
id="social-links"
name="social_links"
multiple
placeholder="https://facebook.com/user, https://twitter.com/user"
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)12. Input Type Search
Input type search untuk search box dengan tombol clear bawaan.
<form action="/search" method="get">
<h2>Input Type Search</h2>
<!-- Search basic -->
<div class="form-group">
<label for="search">Cari</label>
<input
type="search"
id="search"
name="q"
placeholder="Cari artikel..."
>
</div>
<!-- Search dengan autocomplete -->
<div class="form-group">
<label for="product-search">Cari Produk</label>
<input
type="search"
id="product-search"
name="product"
list="products"
placeholder="Ketik nama produk..."
>
<datalist id="products">
<option value="Laptop">
<option value="Smartphone">
<option value="Tablet">
<option value="Smartwatch">
</datalist>
</div>
<button type="submit">Cari</button>
</form>Code language: HTML, XML (xml)13. Input Type File
Input type file untuk upload file dengan berbagai atribut.
<form action="/upload" method="post" enctype="multipart/form-data">
<h2>Input Type File</h2>
<!-- File basic -->
<div class="form-group">
<label for="document">Upload Dokumen</label>
<input
type="file"
id="document"
name="document"
required
>
</div>
<!-- File dengan accept -->
<div class="form-group">
<label for="image">Upload Gambar</label>
<input
type="file"
id="image"
name="image"
accept="image/*"
required
>
</div>
<!-- File dengan accept spesifik -->
<div class="form-group">
<label for="pdf">Upload PDF</label>
<input
type="file"
id="pdf"
name="pdf"
accept=".pdf"
>
</div>
<!-- Multiple files -->
<div class="form-group">
<label for="photos">Upload Multiple Photos</label>
<input
type="file"
id="photos"
name="photos"
accept="image/*"
multiple
>
</div>
<button type="submit">Upload</button>
</form>Code language: HTML, XML (xml)Contoh Form Lengkap dengan Semua Input Type HTML5
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form HTML5 Lengkap</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: 500;
}
input, textarea, select {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
input:focus {
outline: none;
border-color: #667eea;
}
button {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
button:hover {
transform: translateY(-2px);
}
small {
display: block;
margin-top: 5px;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h1>Form HTML5 Lengkap</h1>
<form action="/submit" method="post">
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="age">Usia</label>
<input type="number" id="age" name="age" min="17" max="100" required>
</div>
<div class="form-group">
<label for="rating">Rating</label>
<input type="range" id="rating" name="rating" min="1" max="10" value="5">
</div>
<div class="form-group">
<label for="birthdate">Tanggal Lahir</label>
<input type="date" id="birthdate" name="birthdate" required>
</div>
<div class="form-group">
<label for="time">Waktu</label>
<input type="time" id="time" name="time" required>
</div>
<div class="form-group">
<label for="color">Warna Favorit</label>
<input type="color" id="color" name="color" value="#667eea">
</div>
<div class="form-group">
<label for="phone">Telepon</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10,13}" required>
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
</div>
<button type="submit">Submit Form</button>
</form>
</div>
</body>
</html>Code language: HTML, XML (xml)Dari kode diatas maka akan menghasilkan tampilkan seperti gambar di bawah ini.
Browser Support Input Type HTML5
| Input Type | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | |
| number | ✅ | ✅ | ✅ | ✅ |
| range | ✅ | ✅ | ✅ | ✅ |
| date | ✅ | ✅ | ✅ | ✅ |
| time | ✅ | ✅ | ✅ | ✅ |
| datetime-local | ✅ | ✅ | ✅ | ✅ |
| week | ✅ | ✅ | ✅ | ✅ |
| month | ✅ | ✅ | ✅ | ✅ |
| color | ✅ | ✅ | ✅ | ✅ |
| tel | ✅ | ✅ | ✅ | ✅ |
| url | ✅ | ✅ | ✅ | ✅ |
| search | ✅ | ✅ | ✅ | ✅ |
Best Practice Input Type HTML5
1. Gunakan Input Type yang Sesuai
Selalu gunakan input type yang paling sesuai dengan data yang diharapkan untuk mendapatkan validasi dan UX terbaik.
2. Tambahkan Placeholder dan Label
<label for="email">Email</label>
<input
type="email"
id="email"
placeholder="nama@example.com"
required
>Code language: HTML, XML (xml)3. Kombinasikan dengan Atribut Validasi
<input
type="number"
min="1"
max="100"
step="1"
required
>Code language: HTML, XML (xml)4. Berikan Feedback yang Jelas
<input type="tel" pattern="[0-9]{10,13}" title="Nomor telepon harus 10-13 digit">
<small>Format: 08123456789</small>Code language: HTML, XML (xml)Kesimpulan
Input type HTML5 adalah fitur powerful yang sangat meningkatkan user experience dan mempermudah validasi form. Dengan memahami dan menggunakan input type yang tepat seperti email, number, range, date, time, color, tel, url, dan lainnya, Anda dapat membuat form yang lebih intuitif, mobile-friendly, dan user-friendly.
Setiap input type HTML5 memiliki karakteristik dan kegunaan spesifik yang harus dipahami untuk implementasi yang optimal. Mulai gunakan input type HTML5 dalam project Anda untuk menciptakan form yang modern dan efektif.
