Cara Membuat Form Input Data dengan HTML dan CSS

By Posted on

Cara Membuat Form Input Data dengan HTML dan CSS – Membuat form input data dengan HTML dan CSS merupakan langkah dasar dalam pengembangan web. Dalam artikel ini, haikalweb akan membahas langkah-langkah detail untuk membuatnya. Ini cocok bagi pemula yang ingin mempelajari dasar-dasar pembuatan formulir web.

Alat yang Harus disiapkan

Berikut ini beberapa alat penting harus diperhatikan untuk dapat membuat form input data dengan HTML dan CSS:

  • Perangkat Laptop,
  • Text editor code (Sublime text),
  • Web browser (chrome),
  • Niat yang sungguh-sungguh.

Cara Membuat Form Input Data dengan HTML dan CSS

1. Buat Folder Project Form Input Data

Langkah pertama adalah membuat folder proyek untuk menyimpan semua file terkait form input data. Anda dapat memberi nama folder sesuai keinginan Anda, misalnya “form-input-data“.

2. Buat Folder Img

Selanjutnya, di dalam folder proyek, buat folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan dalam proyek ini. Download gambar berikut ini untuk dapat di implementasikan pada project form input data.

3. Buat Sebuah File form_input_data.html

Sekarang, mari kita mulai membuat file HTML untuk form input data. Buatlah file baru dengan nama “form_input_data.html” di dalam folder proyek Anda. Gunakan editor teks favorit Anda untuk membuat file ini.

Berikut ini file HTML yang harus Anda tambahkan untuk membuat form input data:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Input Data</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="img/logo.png" alt="Logo" class="logo">
        <h1>Form Input Data</h1>
        <form action="#" method="POST">
            <label for="nama">Nama:</label>
            <input type="text" id="nama" name="nama" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>

            <label for="pesan">Pesan:</label>
            <textarea id="pesan" name="pesan" required></textarea>

            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita akan membuat file CSS untuk mengatur tampilan form. Buatlah file baru dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:  Cara Membuat Website Pariwisata dengan HTML dan CSS

Berikut ini file CSS yang harus Anda tambahkan untuk dapat membuat form input data:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.logo {
    width: 100px;
    margin-bottom: 20px;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

form {
    text-align: left;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

input[type="text"],
input[type="email"],
textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #45a049;
}
 

5. Mengubah Tampilan Form Input Data

Setelah membuat struktur dasar HTML untuk form input data, kita akan mengubah tampilannya agar lebih menarik menggunakan CSS. Berikut adalah beberapa langkah yang dapat Anda ikuti:

a. Container Styling

Pertama, kita akan membuat tampilan lebih rapi dengan menempatkan semua elemen ke dalam sebuah wadah atau container. Ini memungkinkan kita untuk mengatur posisi dan tata letak elemen dengan lebih mudah.

.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

Dalam kode CSS di atas, kita menetapkan lebar maksimum container menjadi 600px dan mengatur margin otomatis pada sisi kiri dan kanan agar konten berada di tengah halaman. Lalu, kita memberikan padding agar konten tidak terlalu dekat dengan tepi container. Background-color diatur menjadi putih (#fff) dengan border-radius untuk membuat sudut-sudut elemen menjadi sedikit melengkung. Box-shadow menambahkan efek bayangan pada container untuk memberikan sedikit dimensi.

Artikel Terkait:  Cara Membuat Form Biodata dengan HTML dan CSS
b. Logo Styling

Kita ingin menambahkan logo perusahaan di bagian atas form. Untuk itu, kita menggunakan elemen <img> dalam HTML dan memberinya beberapa gaya CSS.

.logo {
width: 100px;
margin-bottom: 20px;
}

Dalam kode CSS di atas, kita menetapkan lebar gambar menjadi 100px dan memberikan margin bawah sebesar 20px untuk sedikit ruang di bawah logo.

c. Font dan Judul Styling

Judul “Form Input Data” akan kita beri gaya agar lebih menonjol dan mudah dibaca.

h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}

Dalam kode CSS di atas, kita menetapkan ukuran font judul menjadi 24px untuk menonjolkan judul. Margin bottom sebesar 20px memberikan ruang antara judul dan elemen berikutnya. Warna teks diatur menjadi #333 untuk memberikan kontras dengan latar belakang dan memastikan mudah dibaca.

d. Form Styling

Terakhir, kita akan memberikan gaya pada elemen-elemen form seperti label, input, dan tombol.

label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

input[type="text"],
input[type="email"],
textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #45a049;
}
 

Dalam kode CSS di atas, kita mengatur gaya untuk label, input, textarea, dan tombol. Label ditampilkan sebagai blok untuk memberikan ruang antara setiap label. Input dan textarea memiliki padding 10px untuk memberikan ruang di dalam elemen input, dan border-radius 5px memberikan sudut-sudut yang melengkung. Tombol submit memiliki gaya yang mencolok dengan background warna hijau (#4CAF50) dan efek hover (#45a049) saat kursor berada di atasnya.

Artikel Terkait:  Cara Membuat Website Makanan dengan HTML dan CSS

6. Simpan & Lihat Tampilan

Simpan semua perubahan yang telah Anda buat pada file HTML dan CSS. Kemudian buka file “form_input_data.html” menggunakan browser web favorit Anda untuk melihat tampilan formulir yang telah Anda buat.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat form input data sederhana menggunakan HTML dan CSS. Selamat mencoba!

Related posts: