CARA MEMBUAT FORM INPUT DATA DENGAN HTML DAN CSS

Dalam pembuatan website, form input data menjadi salah satu elemen yang cukup penting, baik untuk registrasi, login, maupun pengumpulan data lain dari pengguna. Pada artikel ini, kamu akan belajar bagaimana cara membuat form input data dengan HTML dan CSS.

Langkah 1: Buat Struktur Form dengan HTML

Awalnya, kamu harus membuat struktur dasar dari form tersebut dengan HTML. Contoh struktur dasar sebuah form adalah sebagai berikut:

<form>
  <label for="nama">Nama:</label><br>
  <input type="text" id="nama" name="nama"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

Di sini, kita menggunakan tag <form> untuk membuat form, <label> untuk membuat label input, dan <input> untuk membuat field input.

Langkah 2: Berikan Style pada Form dengan CSS

Setelah struktur form terbentuk, langkah selanjutnya adalah memberikan style pada form tersebut dengan CSS. Kamu bisa menggunakan inline CSS atau membuat file CSS terpisah. Berikut ini adalah contoh penggunaan CSS untuk memberikan style pada form:

form {
  width: 300px;
  margin: 50px auto;
}

label {
  display: block;
  margin: 10px 0;
}

input[type="text"] {
  width: 100%;
  padding: 7px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  border: none;
  cursor: pointer;
}

Langkah 3: Lakukan Validasi Input Form

Pada tahap terakhir, untuk meningkatkan pengalaman pengguna, kamu dapat melakukan validasi input form. HTML5 menyediakan fungsi validasi dasar yang bisa kamu gunakan. Berikut adalah contoh cara melakukan validasi dengan HTML:

<form>
  <label for="nama">Nama:</label><br>
  <input type="text" id="nama" name="nama" required><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br>
  <input type="submit" value="Submit">
</form>

Dengan menggunakan atribut “required”, pengguna tidak bisa mengirim form tanpa mengisi field tersebut. Untuk field email, kamu bisa menggunakan input type “email” untuk memastikan pengguna memasukkan alamat email yang valid.

Dengan mengikuti panduan di atas, sekarang kamu sudah bisa membuat form input data dengan HTML dan CSS. Jangan ragu untuk bereksperimen dengan style dan validasi form sesuai kebutuhan webmu. Selamat mencoba!