CARA MEMBUAT FORM HTML DAN CSS

Dalam dunia web design, kamu mungkin sering menjumpai istilah HTML dan CSS. Kedua hal ini adalah komponen penting dalam pembuatan website. Kali ini, kita akan membahas cara membuat form HTML dan CSS secara sederhana.

Langkah Pertama: Buat Struktur Form dengan HTML

Membuat form HTML adalah langkah pertama yang perlu dilakukan. Dalam hal ini, kita akan membuat form sederhana yang terdiri dari beberapa input field seperti nama, email, dan pesan.

Berikut adalah contoh kode HTML untuk membuat form tersebut:

<form action="/submit_form" method="post">
  <label for="fname">Nama:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email">
  <label for="message">Pesan:</label><br>
  <textarea id="message" name="message"></textarea>
  <input type="submit" value="Submit">
</form>

Dalam kode diatas, kita telah membuat form dengan tiga field input, yaitu ‘Nama’, ‘Email’, dan ‘Pesan’. Setiap field diberi label untuk kejelasan fungsi yang ditandai oleh tag label. Metode form diatur ke ‘post’ yang berarti data dari form ini akan dikirim ke server saat pengguna mengklik tombol ‘Submit’.

Langkah Kedua: Style Form dengan CSS

Setelah rancangan HTML untuk form selesai, langkah berikutnya adalah menambahkan style menggunakan CSS.

Berikut adalah contoh kode CSS yang bisa kamu gunakan:

form {
  width: 300px;
  margin: auto;
}
form input[type="text"], form textarea {
  width: 100%;
  margin: 10px 0;
}
form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

Kode CSS di atas menambahkan style ke elemen form kita. Form diatur memiliki lebar 300px dan berada di tengah-tengah halaman. Field input dan textarea memiliki lebar 100% dari form dan memiliki margin 10px di bagian atas dan bawah. Tombol submit diatur dengan warna latar belakang hijau, warna teks putih, padding 10px, tanpa border, dan cursor berubah menjadi pointer saat mouse berada di atasnya.

Dengan menggabungkan kode HTML dan CSS ini, kamu telah berhasil membuat form yang fungsional dan menarik. Tentu saja, kamu bisa mengubah style sesuai dengan keinginan dan kebutuhan kamu. Selamat mencoba!