Belajar Input Type HTML5 Terbaru (email, number, range, date, dll)

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

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
email	✅	✅	✅	✅
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.