Membuat Form Input Biodata
Musa Irrfan | Syahnara | Tatia
form input biodata merupakan komponen dasar untuk mengumpulkan data yang berfungsi untuk menyimpan informasi pribadi. proses pembuatan form input biodata melibatkan elemen-elemen seperti input teks, number, tanggal, checkbox, dan submit pada HTML. lalu pada kerangka program tersebut didesain serapi mungkin demi kenyamanan user. nah, untuk itu kita perlu bantuan CSS sebagai penunjang kebutuhan website ini. berikut langkah-langkah dan penjelasan mengenai pembuatan form input biodata
1. buat folder pada Vscode lalu buat file dengan format .html dan .css
2. pada file html buat deklarasi html5 dan tambahkan link href untuk menghubungkan ke css
3. buat kelas container dengan elemen div. ini akan digunakan untuk membungkus program ke dalam class container yang akan didesain nantinya.
4. selanjutnya membuat form input dengan bantuan tabel agar tata letaknya lebih tersusun rapi.
gunakan tag <tr> dan <td> sebagai format baris dan kolom. untuk form input, gunakan format elemen sesuai dengan kebutuhan, lebih jelasnya terlihat dalam gambar di bawah
pada gambar di atas terlihat jelas bahwa penggunaan elemen form input berbeda setiap kriterianya. misal seperti form input nama yang menggunakan elemen 'type="text"' yang bertujuan untuk menampung jawaban bertipe tulisan, dan elemen 'type="number"' yang guna untuk menampung angka.
5. jangan lupa untuk membuat penutup tag pada bagian akhir program seperti tag</div> </table> dsb.
untuk bagian kerangka program, yaitu html sudah selesai kita buat. sekarang kita akan mendsain program agar tertata lebih rapi dan menarik di dalam file CSS.
1. masuk ke dalam file style.css
2. untuk kelas container, kita bisa mengaksesnya di dalam css dengan awalan (.) seperti pada gambar .container
atur width, padding,margin sesuai kebutuhan.
5. selanjutnya pada bagian input kita akan mendesainnya seperti format di bawah yang bertujuan untuk membuat jarak yang rapi antar field tabel.
Komentar
Posting Komentar