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

Farhan Hidayat — Sat, 08 Feb 2025 14:05:00 +0000

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:




    
    
    Formulir Kontak
    



    
        Hubungi Kami
        
            Nama
            

            Email
            

            Pesan

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:

/* 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:

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!”

Artikel Cara Membuat Form HTML Responsif + Contoh Kode (HTML, CSS & JS) pertama kali tampil pada Farhanhidayat.com.

Form HTML Responsif Arsip - Farhanhidayat.com