Home Coding Cara Membuat Form HTML Responsif + Contoh Kode (HTML, CSS & JS)

Cara Membuat Form HTML Responsif + Contoh Kode (HTML, CSS & JS)

Farhan Hidayat 8 Februari 2025 5 min read

Formulir HTML adalah elemen penting dalam sebuah website, terutama untuk interaksi pengguna seperti pendaftaran, login, dan pengiriman pesan. Dalam artikel ini, kita akan membahas cara membuat form HTML yang responsif dan mudah digunakan dengan bantuan CSS untuk tampilan modern dan JavaScript untuk validasi input.

Persiapan Sebelum Membuat Form HTML

Sebelum mulai membuat Elemen Input Web, pastikan Anda memiliki:

Editor kode seperti Visual Studio Code atau Sublime Text.
Browser modern seperti Chrome atau Firefox untuk pengujian.
Pengetahuan dasar tentang HTML, CSS, dan JavaScript.
Sumber daya online seperti dokumentasi W3Schools atau MDN Web Docs.

Membuat Form HTML Responsif + Contoh Kode

Struktur dasar form HTML terdiri dari elemen-elemen seperti input, textarea, dan button. Berikut adalah contoh Elemen Input Web sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulir Kontak</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h2>Hubungi Kami</h2>
        <form id="contactForm">
            <label for="name">Nama</label>
            <input type="text" id="name" name="name" placeholder="Masukkan nama Anda" required>

            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Masukkan email Anda" required>

            <label for="message">Pesan</label>
            <textarea id="message" name="message" rows="5" placeholder="Tulis pesan Anda..." required></textarea>

            <button type="submit">Kirim</button>
        </form>

        <p id="responseMessage"></p>
    </div>

    <script src="script.js"></script>

</body>
</html>

Mengatur CSS agar Form Lebih Mobile-Friendly

Agar form tampil lebih menarik dan responsif di berbagai ukuran layar, kita akan menggunakan CSS modern seperti Flexbox dan media queries:

Also Read: Micro Interaction CSS: 10 Efek UI agar Website Lebih Interaktif

/* Reset margin dan padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling body */
body {
    font-family: Arial, sans-serif;
    background: url('img/background1.jpeg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
}

/* Overlay Transparan */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Bisa ubah opacity sesuai kebutuhan */
    backdrop-filter: blur(5px); /* Efek blur */
    z-index: -1;
}

/* Styling container */
.container {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    transition: 0.3s ease-in-out;
}

/* Animasi hover */
.container:hover {
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

/* Styling form */
h2 {
    text-align: center;
    color: #333;
    margin-bottom: 15px;
}

/* Styling form input dan textarea */
form {
    display: flex;
    flex-direction: column;
}

label {
    font-weight: bold;
    margin-top: 10px;
    font-size: 14px;
}

input, textarea {
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
    transition: all 0.2s ease-in-out;
}

/* Fokus pada input */
input:focus, textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

/* Styling tombol */
button {
    margin-top: 15px;
    background: #007bff;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease-in-out;
}

button:hover {
    background: #0056b3;
}

/* Pesan respons */
#responseMessage {
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 500px) {
    .container {
        max-width: 90%;
        padding: 15px;
    }

    input, textarea {
        font-size: 14px;
        padding: 10px;
    }

    button {
        font-size: 14px;
        padding: 10px;
    }
}

Validasi Form dengan JavaScript (Langkah Tepat)

Agar form tampil lebih menarik dan responsif di berbagai ukuran layar, kita akan menggunakan CSS modern seperti Flexbox dan media queries. Berikut adalah beberapa aturan tambahan untuk meningkatkan tampilan:

document.getElementById("contactForm").addEventListener("submit", function(event) {
    event.preventDefault();

    let name = document.getElementById("name").value.trim();
    let email = document.getElementById("email").value.trim();
    let message = document.getElementById("message").value.trim();
    let responseMessage = document.getElementById("responseMessage");

    if (name === "" || email === "" || message === "") {
        responseMessage.style.color = "red";
        responseMessage.textContent = "Harap isi semua bidang!";
        return;
    }

    if (!validateEmail(email)) {
        responseMessage.style.color = "red";
        responseMessage.textContent = "Format email tidak valid!";
        return;
    }

    responseMessage.style.color = "green";
    responseMessage.textContent = "Pesan berhasil dikirim!";
    
    // Bisa ditambahkan fungsi untuk mengirim data ke server melalui AJAX atau Fetch API.
    
    // Reset Form
    document.getElementById("contactForm").reset();
});

function validateEmail(email) {
    let re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return re.test(email);
}

Menambahkan Efek Animasi dan Background Transparan

Untuk memastikan input yang dimasukkan valid, kita dapat menggunakan JavaScript untuk validasi email dan pesan kosong:

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: -1;
}

Pengujian dan Implementasi di Website

Setelah membuat form, kita bisa mengujinya dengan:

Also Read: Panduan Membuat Navbar Transparan ke Solid Saat Scroll

Mengubah ukuran layar untuk melihat responsivitas.
Menguji validasi input dengan memasukkan data yang salah.
Menambahkan form ke proyek website.
Menggunakan alat pengujian browser seperti Chrome DevTools untuk debugging.

Kesimpulan

Kita telah belajar Proses Pembuatan Elemen Input Web yang responsif dan mudah digunakan dengan validasi input menggunakan JavaScript dan tampilan modern menggunakan CSS. Form ini tidak hanya berfungsi dengan baik tetapi juga memiliki desain yang menarik dan profesional. Selain itu, kita juga telah memahami pentingnya pengujian sebelum mengimplementasikan form ke dalam proyek website.

“Sudah coba form di atas? Bagikan pengalamanmu atau tanyakan di kolom komentar!”

Also Read: 5 Contoh Animasi Cursor Custom untuk UI Website Interaktif

Tagged with: