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.
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.
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; }