Membuat Formulir HTML – Seri Tutorial HTML untuk Pemula

Halo Authemers! Jumpa lagi dengan Mas Hedi dalam Tutorial HTML untuk Pemula. Setelah kita belajar tentang berbagai dasar HTML di bab-bab sebelumnya seperti formating teks HTML, Multimedia, List dan Link serta membuat tabel HTML, sekarang kita memasuki topik yang sangat penting dalam pengembangan website, yaitu formulir HTML. Formulir merupakan komponen yang memungkinkan sebuah website berinteraksi langsung dengan penggunanya. Melalui formulir, pengunjung dapat mengisi data, memberikan informasi, atau mengirimkan pesan kepada pemilik website.

📋 Daftar Isi

Dalam praktiknya, formulir HTML sering digunakan untuk berbagai kebutuhan, seperti halaman login, pendaftaran akun, kolom komentar, hingga formulir kontak. Elemen ini bekerja dengan cara mengumpulkan input dari pengguna melalui berbagai komponen seperti kolom teks, tombol pilihan, checkbox, dropdown, dan tombol kirim. Data yang dimasukkan kemudian dapat diproses oleh sistem di sisi server untuk berbagai keperluan, misalnya penyimpanan data atau pengolahan informasi.

Pada bab ini, kita akan mempelajari struktur dasar formulir HTML, berbagai jenis input yang tersedia, serta bagaimana cara menggunakannya secara efektif dalam sebuah halaman web. Dengan memahami formulir HTML, kamu akan mampu membuat website yang tidak hanya menampilkan informasi, tetapi juga memungkinkan pengguna berinteraksi secara aktif. Jadi, mari kita mulai pembahasannya! 🚀

📚 Baca Juga

1. Pengertian Formulir HTML

Formulir HTML dibuat menggunakan tag <form>. Formulir terdiri dari berbagai input fields yang memungkinkan pengguna memasukkan data. Data ini kemudian bisa diproses melalui server atau JavaScript.

Tag utama dalam formulir:

  • <form> → membungkus seluruh elemen input
  • <input> → berbagai tipe input, seperti text, password, email, checkbox, radio, dll
  • <textarea> → untuk input teks panjang
  • <select> dan <option> → dropdown list
  • <button> atau <input type="submit"> → tombol untuk submit

2. Contoh Formulir HTML Sederhana

Setelah memahami struktur dasar formulir HTML, sekarang kita akan melihat beberapa contoh penggunaan formulir dalam berbagai kebutuhan di website. Dengan melihat beberapa contoh ini, Authemers akan lebih mudah memahami bagaimana formulir bekerja dan bagaimana cara menggunakannya dalam situasi yang berbeda.

Formulir HTML pada dasarnya menggunakan tag <form> sebagai wadah utama. Di dalamnya terdapat berbagai elemen input seperti kolom teks, email, pilihan, hingga tombol kirim. Setiap elemen memiliki fungsi tertentu untuk menerima data dari pengguna. Berikut beberapa contoh formulir yang sering digunakan dalam pengembangan website.

2. 1. Formulir Kontak Sederhana

Formulir ini biasanya digunakan pada halaman Contact Us untuk memungkinkan pengunjung mengirim pesan kepada pemilik website.

<form action="/submit" method="post">
  <label for="name">Nama:</label><br>
  <input type="text" id="name" name="name" placeholder="Masukkan nama" required><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" placeholder="Masukkan email" required><br><br>

  <label for="message">Pesan:</label><br>
  <textarea id="message" name="message" rows="5" placeholder="Tulis pesan Anda"></textarea><br><br>

  <button type="submit">Kirim</button>
</form>

Penjelasan:

  • action="/submit" → menentukan alamat tujuan pengiriman data formulir.
  • method="post" → metode pengiriman data ke server.
  • required → membuat kolom wajib diisi sebelum formulir dapat dikirim.
  • <textarea> → digunakan untuk input teks panjang seperti pesan atau komentar.

Formulir ini sangat umum digunakan pada website perusahaan, blog, maupun landing page.

2. 2. Formulir Login

Formulir login digunakan untuk proses autentikasi pengguna sebelum masuk ke dalam sistem atau dashboard.

<form action="/login" method="post">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username" placeholder="Masukkan username" required><br><br>

  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password" placeholder="Masukkan password" required><br><br>

  <button type="submit">Login</button>
</form>

Penjelasan:

  • type="password" → membuat teks yang diketik tidak terlihat (ditampilkan sebagai simbol).
  • Digunakan pada halaman login website, aplikasi web, maupun sistem manajemen.

2. 3. Formulir Pendaftaran Akun

Formulir ini biasanya digunakan pada halaman registrasi pengguna untuk membuat akun baru.

<form action="/register" method="post">
  <label for="fullname">Nama Lengkap:</label><br>
  <input type="text" id="fullname" name="fullname" required><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password" required><br><br>

  <label for="gender">Jenis Kelamin:</label><br>
  <select id="gender" name="gender">
    <option value="male">Laki-laki</option>
    <option value="female">Perempuan</option>
  </select><br><br>

  <button type="submit">Daftar</button>
</form>

Penjelasan:

  • <select> digunakan untuk membuat menu dropdown.
  • <option> berisi pilihan yang tersedia bagi pengguna.
  • Biasanya formulir seperti ini juga ditambahkan validasi tambahan di sisi server.

2. 4. Formulir Survei atau Pilihan

Formulir ini digunakan ketika pengguna harus memilih satu atau beberapa opsi tertentu.

<form action="/survey" method="post">

  <p>Bahasa pemrograman favorit Anda:</p>

  <input type="radio" id="html" name="language" value="HTML">
  <label for="html">HTML</label><br>

  <input type="radio" id="css" name="language" value="CSS">
  <label for="css">CSS</label><br>

  <input type="radio" id="javascript" name="language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>

  <p>Teknologi yang pernah Anda pelajari:</p>

  <input type="checkbox" id="react" name="tech" value="React">
  <label for="react">React</label><br>

  <input type="checkbox" id="vue" name="tech" value="Vue">
  <label for="vue">Vue</label><br>

  <input type="checkbox" id="angular" name="tech" value="Angular">
  <label for="angular">Angular</label><br><br>

  <button type="submit">Kirim Jawaban</button>

</form>

Penjelasan:

  • radio → hanya bisa memilih satu pilihan.
  • checkbox → bisa memilih lebih dari satu pilihan.
  • Biasanya digunakan pada survei, polling, atau kuesioner.

Tip SEO & UX pada Formulir HTML

Membuat formulir HTML tidak hanya soal menampilkan kolom input dan tombol kirim saja. Dalam praktik pengembangan website modern, formulir harus dirancang dengan memperhatikan SEO (Search Engine Optimization) dan UX (User Experience) agar lebih mudah digunakan oleh pengunjung sekaligus lebih ramah terhadap mesin pencari. Formulir yang baik akan meningkatkan interaksi pengguna, memperbesar kemungkinan data terkirim dengan benar, dan mengurangi kesalahan input.

Salah satu prinsip paling penting adalah menggunakan label yang jelas untuk setiap input. Label membantu pengguna memahami informasi apa yang harus diisi pada kolom tertentu. Selain itu, label juga sangat penting untuk aksesibilitas, karena screen reader yang digunakan oleh pengguna dengan keterbatasan penglihatan akan membaca label tersebut untuk menjelaskan fungsi input. Oleh karena itu, selalu hubungkan label dengan atribut for yang sesuai dengan id pada input.

Hal berikutnya yang tidak kalah penting adalah penggunaan placeholder. Placeholder berfungsi memberikan contoh atau petunjuk singkat mengenai format data yang diharapkan. Misalnya, pada kolom email kita dapat menambahkan placeholder seperti “contoh@email.com“. Ini akan membantu pengguna menghindari kesalahan saat mengisi formulir, terutama bagi pengguna yang belum familiar dengan format data tertentu.

Selain itu, gunakan atribut required pada input yang wajib diisi. Atribut ini akan mencegah formulir dikirim jika kolom penting masih kosong. Validasi sederhana seperti ini sangat membantu meningkatkan kualitas data yang diterima oleh server. Meskipun demikian, validasi juga tetap perlu dilakukan di sisi server untuk memastikan keamanan sistem.

Dari sisi desain, formulir sebaiknya disusun dengan rapi dan mudah dibaca. Gunakan jarak antar elemen yang cukup, ukuran font yang nyaman, serta tombol aksi yang jelas. Formulir yang berantakan akan membuat pengguna bingung dan berpotensi meninggalkan halaman sebelum menyelesaikan pengisian data.

Selain tampilan desktop, formulir juga harus responsif di perangkat mobile. Saat ini sebagian besar pengguna internet mengakses website melalui smartphone. Oleh karena itu, kolom input harus cukup besar untuk disentuh dengan jari, teks harus mudah dibaca, dan tata letak harus menyesuaikan ukuran layar.

Untuk membantu Authemers memahami bagaimana desain formulir yang baik, berikut contoh CSS sederhana yang dapat digunakan untuk mempercantik keempat formulir sebelumnya. CSS ini dapat langsung dicoba di CodePen agar terlihat bagaimana perubahan tampilan formulir dari yang sederhana menjadi lebih menarik.

CSS untuk Formulir Kontak

CSS berikut dapat digunakan untuk mempercantik formulir kontak agar terlihat lebih profesional dan nyaman digunakan.

body{
  font-family: Arial, sans-serif;
  background:#f4f6f9;
}

form{
  max-width:500px;
  margin:40px auto;
  padding:25px;
  background:white;
  border-radius:8px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

label{
  font-weight:bold;
  display:block;
  margin-bottom:6px;
}

input, textarea{
  width:100%;
  padding:10px;
  margin-bottom:15px;
  border:1px solid #ddd;
  border-radius:5px;
}

button{
  background:#2563eb;
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:5px;
  cursor:pointer;
}

button:hover{
  background:#1e4ed8;
}

Desain ini memberikan tampilan bersih dan modern, cocok digunakan pada halaman Contact Us.

CSS untuk Formulir Login

Form login biasanya dibuat lebih sederhana namun tetap elegan agar fokus pengguna langsung pada proses autentikasi.

.login-form{
  max-width:350px;
  margin:60px auto;
  padding:25px;
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

.login-form h2{
  text-align:center;
  margin-bottom:20px;
}

.login-form input{
  width:100%;
  padding:10px;
  margin-bottom:15px;
  border:1px solid #ccc;
  border-radius:6px;
}

.login-form button{
  width:100%;
  padding:10px;
  background:#16a34a;
  border:none;
  color:white;
  border-radius:6px;
  cursor:pointer;
}

.login-form button:hover{
  background:#15803d;
}

CSS untuk Formulir Registrasi

Formulir pendaftaran biasanya memiliki lebih banyak kolom sehingga perlu tata letak yang rapi.

.register-form{
  max-width:500px;
  margin:40px auto;
  padding:30px;
  background:white;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

.register-form input,
.register-form select{
  width:100%;
  padding:10px;
  margin-bottom:15px;
  border:1px solid #ccc;
  border-radius:6px;
}

.register-form button{
  background:#7c3aed;
  color:white;
  border:none;
  padding:12px;
  width:100%;
  border-radius:6px;
  cursor:pointer;
}

.register-form button:hover{
  background:#6d28d9;
}

CSS untuk Formulir Survei

Formulir survei biasanya berisi pilihan radio dan checkbox, sehingga perlu tata letak yang nyaman dibaca.

.survey-form{
  max-width:600px;
  margin:40px auto;
  padding:25px;
  background:#ffffff;
  border-radius:8px;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.survey-form p{
  font-weight:bold;
  margin-top:15px;
}

.survey-form label{
  margin-left:5px;
}

.survey-form button{
  margin-top:20px;
  padding:10px 20px;
  background:#f97316;
  color:white;
  border:none;
  border-radius:5px;
  cursor:pointer;
}

.survey-form button:hover{
  background:#ea580c;
}

Dengan desain ini, formulir survei akan terlihat lebih terstruktur dan mudah dipahami oleh pengguna.

Dengan memahami prinsip SEO, UX, dan desain formulir, Authemers tidak hanya mampu membuat formulir yang berfungsi dengan baik, tetapi juga meningkatkan kenyamanan pengguna saat berinteraksi dengan website. Formulir yang baik akan meningkatkan tingkat konversi, mengurangi kesalahan input, dan membuat pengalaman pengguna menjadi lebih positif.

Pada bagian berikutnya, kita akan membahas jenis-jenis input dalam HTML Form secara lebih lengkap, seperti date, file, number, range, dan berbagai tipe input lainnya yang sering digunakan dalam pengembangan web modern. Dengan memahami berbagai tipe input tersebut, Authemers akan mampu membuat formulir yang jauh lebih interaktif, canggih, dan profesional.

Artikel terkait