Cara Membuat Form Biodata dengan HTML dan CSS

By Posted on

Cara Membuat Form Biodata dengan HTML dan CSS – Dalam dunia yang semakin terhubung secara digital, kemampuan untuk membuat formulir web menjadi sangat penting. Formulir adalah jendela interaksi antara pengguna dan situs web, dan salah satu jenis formulir yang paling umum adalah formulir biodata. Formulir ini digunakan untuk mengumpulkan informasi pribadi penting, seperti nama, umur, alamat, dan lain-lain. Dalam artikel ini, kita akan membahas cara membuat formulir biodata yang menarik dan fungsional menggunakan bahasa pemrograman web dasar, HTML dan CSS.

Saat ini, memiliki kehadiran online menjadi semakin penting, terutama di era di mana teknologi digital mengubah cara kita berinteraksi dengan dunia. Baik itu untuk melamar pekerjaan, mendaftar kursus online, atau sekadar membuat profil pribadi, formulir biodata merupakan elemen yang tak terhindarkan dalam pengalaman online kita. Oleh karena itu, mempelajari cara membuat formulir biodata yang baik adalah langkah pertama yang tepat dalam memahami dasar-dasar pengembangan web.

Dalam artikel ini, haikalweb akan membimbing Anda melalui langkah-langkah praktis untuk membuat formulir biodata yang menarik dan mudah dipahami. Tidak perlu khawatir jika Anda masih pemula dalam dunia pengembangan web, karena langkah-langkahnya akan dijelaskan secara rinci dan didukung dengan contoh kode yang dapat Anda ikuti dengan mudah.

Jadi, jika Anda tertarik untuk mempelajari bagaimana membuat formulir biodata yang unik dan menarik, maka Anda berada di tempat yang tepat! Mari kita mulai perjalanan kita dalam menguasai dasar-dasar pembuatan formulir web yang efektif.

Alat yang Harus di Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat form biodata dengan html dan css:

  • Perangkat laptop,
  • Web browser (disarankan menggunakan Chrome),
  • Text editor code (Sublime text),
  • Niat yang sungguh-sungguh.
Artikel Terkait:  Cara Membuat Website Toko Sepatu dengan HTML dan CSS

Cara Membuat Form Biodata dengan HTML dan CSS

1. Buat Folder Project Form Biodata

Langkah pertama adalah membuat folder proyek di komputer Anda. Misalnya, Anda dapat membuat folder bernama “Form_Biodata“.

2. Buat Folder Img

Di dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan gambar-gambar yang akan digunakan dalam formulir. Download gambar disini untuk dapat di terapkan pada form biodata nantinya.

3. Buat Sebuah File form_biodata.html

Buka editor teks favorit Anda dan buatlah file baru dengan nama “form_biodata.html”. Ini akan menjadi file utama tempat kita akan membuat formulir biodata.

Berikut ini file HTML yang perlu Anda buat dan tambahkan:

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

    <!-- Mulai Formulir -->
    <div class="container">
        <form action="#" method="post">
            <h2>Form Biodata</h2>
            <div class="img-container">
                <img src="img/biodata-image.jpg" alt="Biodata Image">
            </div>
            <div class="form-group">
                <label for="nama">Nama:</label>
                <input type="text" id="nama" name="nama">
            </div>
            <div class="form-group">
                <label for="umur">Umur:</label>
                <input type="number" id="umur" name="umur">
            </div>
            <div class="form-group">
                <label for="alamat">Alamat:</label>
                <textarea id="alamat" name="alamat"></textarea>
            </div>
            <div class="form-group">
                <input type="submit" value="Submit">
            </div>
        </form>
    </div>
    <!-- Akhir Formulir -->

</body>
</html>
 

4. Buat File style.css

Selanjutnya, buatlah file CSS untuk mengatur tampilan formulir biodata. Buat file baru dengan nama “style.css” di dalam folder proyek Anda.

Artikel Terkait:  Cara Membuat Tampilan Facebook dengan HTML dan CSS

Berikut ini file CSS yang harus Anda buat dan tambahkan:

/* style.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

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

h2 {
    text-align: center;
}

.img-container {
    text-align: center;
    margin-bottom: 20px;
}

.img-container img {
    width: 200px;
    border-radius: 50%;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
}

input[type="text"],
input[type="number"],
textarea {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}
 

5. Mengubah Tampilan Form Biodata

Anda dapat menyesuaikan tampilan formulir sesuai keinginan Anda dengan mengedit file CSS “style.css“. Anda dapat mengubah warna latar belakang, ukuran font, atau menambahkan dekorasi lainnya.

6. Simpan & Lihat Tampilan

Simpan semua perubahan yang telah Anda buat pada file HTML dan CSS, dan buka file “form_biodata.html” di browser web Anda untuk melihat hasilnya.

Penutup

Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat formulir biodata sederhana menggunakan HTML dan CSS. Semoga artikel ini membantu Anda memahami dasar-dasar pembuatan formulir web!

Related posts: