Cara Membuat Form di HTML: Element dan Jenis Input

Cara buat form HTML sangat penting untuk dipahami ketika membangun website interaktif yang memerlukan pengumpulan data dari pengunjung. Dalam HTML, form digunakan untuk menerima input dari pengguna, seperti nama, alamat email, atau pesan.

Form ini terdiri dari berbagai elemen dan atribut yang memungkinkan pengaturan tampilan dan pengolahan data yang dimasukkan. Pada artikel ini, kita akan membahas langkah-langkah dalam membuat formulir HTML, atribut dalam formulir, serta elemen dan jenis input yang dapat digunakan.

Cara Membuat Form di HTML

Membuat form di HTML dapat dilakukan dengan langkah-langkah sederhana. Berikut adalah panduan langkah demi langkah untuk membuat form yang dapat digunakan untuk mengumpulkan informasi dari pengguna, seperti form pendaftaran, login, atau umpan balik:

1. Membuat Tag <form>

Langkah pertama adalah memulai dengan tag <form>. Tag ini bertugas untuk mengelompokkan semua elemen input yang ada di dalam form.

Kamu harus menetapkan atribut action, yang menentukan URL tempat data akan dikirim, serta atribut method untuk memilih cara pengiriman data, seperti post atau get.

2. Menambahkan Elemen Input

Setelah form terbentuk, langkah berikutnya adalah menambahkan elemen input untuk mengumpulkan data dari pengguna. Ada beberapa jenis input yang sering digunakan, di antaranya:

• Input Nama

Untuk meminta nama pengguna, gunakan elemen <input type=”text”>. Ini memungkinkan pengguna untuk memasukkan teks, seperti nama mereka.

<label for=”nama”>Nama:</label> 

<input type=”text” id=”nama” name=”nama”>

• Input Password

Untuk meminta kata sandi, gunakan elemen <input type=”password”>. Ini berfungsi untuk menyembunyikan karakter yang dimasukkan agar lebih aman.

<label for=”password”>Kata Sandi:</label> 

<input type=”password” id=”password” name=”password”>

3. Menambahkan Tombol Submit

Setelah elemen input selesai, langkah selanjutnya adalah menambahkan tombol untuk mengirimkan form. Tombol ini memungkinkan pengguna untuk mengirimkan data yang telah mereka isi di dalam form.

Gunakan elemen <input type=”submit”> untuk membuat tombol kirim. Nilai pada atribut value adalah teks yang akan ditampilkan di tombol.

<input type=”submit” value=”Kirim”>

4. Menutup Tag <form>

Langkah terakhir adalah menutup tag <form> dengan </form>. Ini menandakan bahwa seluruh form telah selesai didefinisikan.

Semua elemen input yang ada di dalam tag <form> akan dikirimkan bersama data lainnya saat tombol submit diklik.

Atribut dalam Form HTML

Atribut dalam form HTML sangat penting untuk mengontrol bagaimana elemen form berfungsi, seperti cara data dikirim, identifikasi elemen, atau pengaturan tampilan. Berikut adalah beberapa atribut utama yang sering digunakan dalam form HTML:

A. Atribut action

Atribut action pada tag <form> digunakan untuk menentukan URL atau file yang akan memproses data yang dikirimkan oleh form. Ketika pengguna mengisi form dan menekan tombol submit, data form akan dikirim ke URL yang tertera pada atribut action untuk diproses lebih lanjut.

URL ini bisa berupa halaman yang ada di server atau sebuah skrip PHP, Python, atau bahasa pemrograman lainnya yang menerima dan memproses data yang dikirim.

B. Atribut method

Atribut method menentukan bagaimana data dikirim dari form ke server. Ada dua metode utama yang digunakan untuk pengiriman data, yaitu GET dan POST.

• GET

Mengirimkan data melalui URL. Ini cocok untuk form yang tidak memerlukan pengiriman data yang sensitif atau data dalam jumlah besar. Data akan terlihat di URL, sehingga tidak disarankan untuk form yang berisi informasi pribadi.

• POST

Mengirimkan data melalui body dari permintaan HTTP. Ini lebih aman dan dapat menangani data yang lebih besar karena data tidak dikirimkan melalui URL. Biasanya, POST digunakan untuk form pendaftaran atau login.

Apa Itu Field dalam Form HTML?

Dalam konteks form HTML, field merujuk pada elemen input atau area dalam form yang dapat diisi oleh pengguna dengan data. Field ini dapat berupa berbagai macam tipe input, seperti teks, pilihan tanggal, pilihan radio, checkbox, dan lain-lain.

Setiap field memiliki tujuan yang berbeda-beda, tergantung pada jenis data yang ingin dikumpulkan, misalnya nama, alamat email, atau password. Salah satu contoh field adalah input teks, yang memungkinkan pengguna untuk memasukkan informasi seperti nama atau alamat email: <input type=”text” name=”info” />

Elemen di dalam Form HTML

Form HTML berisi berbagai elemen yang digunakan untuk mengumpulkan input dari pengguna. Setiap elemen memiliki fungsinya masing-masing dan dapat diatur dengan berbagai atribut untuk memudahkan interaksi dengan pengguna. Berikut adalah beberapa elemen yang umum digunakan dalam form HTML:

1. Inputs

Elemen <input> adalah komponen utama dalam form HTML. Elemen ini digunakan untuk memungkinkan pengguna memasukkan data, seperti teks, angka, atau file.

Elemen <input> dapat memiliki berbagai jenis, sesuai dengan kebutuhan, seperti type=”text”, type=”password”, atau type=”checkbox”.

Setiap jenis input memiliki fungsinya sendiri, seperti input teks untuk nama pengguna atau password untuk memasukkan kata sandi.

2. Labels

Elemen <label> digunakan untuk memberikan keterangan atau judul pada setiap input field.

Labels membantu pengguna memahami informasi apa yang harus dimasukkan di kolom tersebut. Atribut for dalam tag <label> menghubungkan label dengan input tertentu berdasarkan id input tersebut.

3. Buttons

Elemen <button> digunakan dalam form HTML untuk melakukan aksi, seperti mengirimkan atau mereset data form.

Tipe button yang umum digunakan adalah type=”submit” untuk mengirimkan form dan type=”reset” untuk mengosongkan seluruh field input. Button bisa digunakan dengan tag <button> atau <input>.

4. Select

Elemen <select> memungkinkan pengguna untuk memilih opsi dari daftar dropdown atau list.

Elemen ini digunakan bersama dengan elemen <option> untuk mendefinisikan pilihan yang tersedia. Pengguna dapat memilih satu atau lebih opsi, tergantung pada pengaturan.

5. Textarea

Elemen <textarea> digunakan untuk input teks dalam bentuk multi-baris, seperti untuk menulis komentar atau alamat.

Ini memungkinkan pengguna menulis lebih banyak teks daripada elemen input biasa yang hanya terdiri dari satu baris.

6. Fieldset dan Legend

Elemen <fieldset> digunakan untuk mengelompokkan elemen-elemen form yang terkait, membuat form lebih terstruktur dan mudah dipahami.

Elemen <legend> memberikan judul atau deskripsi pada grup elemen yang ada di dalam <fieldset>.

7. Radio Buttons

Radio buttons memungkinkan pengguna untuk memilih hanya satu opsi dari beberapa pilihan yang ada. Mereka sering digunakan untuk memilih jenis kelamin atau preferensi lainnya. Setiap pilihan memiliki tipe radio dalam elemen <input>.

Jenis-Jenis Input dalam Form HTML

Dalam form HTML, elemen <input> memiliki berbagai jenis (type) yang digunakan untuk menangani berbagai macam input dari pengguna.

Setiap jenis input diatur dengan atribut type, dan masing-masing memiliki fungsi spesifik yang memudahkan pengumpulan data dalam bentuk yang sesuai. Berikut adalah beberapa jenis input yang sering digunakan dalam form HTML:

1. Teks (text)

Input type=”text” digunakan untuk mengumpulkan data berupa teks bebas, seperti nama, alamat, atau deskripsi.

Field ini memungkinkan pengguna untuk mengetikkan informasi dalam satu baris. Ini adalah jenis input yang paling sering digunakan dalam form HTML.

2. Nomor (number)

Input type=”number” digunakan untuk mengumpulkan angka saja. Jenis input ini mempermudah validasi, karena hanya angka yang bisa dimasukkan, sehingga meminimalisir kesalahan.

Ini sangat berguna untuk form yang memerlukan input numerik, seperti usia atau jumlah barang.

3. Tanggal (date)

Input type=”date” memungkinkan pengguna untuk memilih tanggal dari kalender. Ini mempermudah audiens dalam memasukkan tanggal secara akurat dan konsisten.

Browser modern akan menampilkan antarmuka tanggal untuk memudahkan pemilihan.

4. Kata Sandi (password)

Input type=”password” digunakan untuk mengumpulkan data sensitif seperti kata sandi.

Karakter yang dimasukkan oleh pengguna akan disembunyikan dengan tanda bintang atau titik, menjaga privasi informasi tersebut.

5. E-mail (email)

Input type=”email” digunakan untuk memvalidasi bahwa input yang dimasukkan adalah alamat email yang valid.

Browser akan memeriksa apakah format email sesuai dengan standar, seperti adanya tanda “@” dan domain.

6. Checkbox

Input type=”checkbox” memungkinkan pengguna untuk memilih satu atau lebih opsi dari beberapa pilihan yang tersedia. Checkbox biasanya digunakan untuk pilihan “ya/tidak” atau memilih beberapa fitur.

7. Radio

Input type=”radio” digunakan ketika pengguna harus memilih hanya satu opsi dari beberapa pilihan yang tersedia.

Setiap pilihan radio memiliki nama yang sama, yang memastikan hanya satu opsi yang dapat dipilih pada suatu waktu.

8. File

Input type=”file” memungkinkan pengguna untuk mengunggah file dari perangkat mereka.

Field ini memungkinkan pengguna memilih file yang ingin diunggah, seperti gambar, dokumen, atau video.

9. Range

Input type=”range” memungkinkan pengguna untuk memilih nilai dalam rentang tertentu menggunakan slider.

Ini sangat berguna untuk memilih nilai dalam skala, seperti pengaturan volume atau level kepuasan.

10. Search

Input type=”search” dirancang khusus untuk bidang pencarian. Biasanya digunakan pada form pencarian situs web atau aplikasi.

Meskipun fungsinya mirip dengan input teks, elemen ini memberikan antarmuka pencarian yang lebih terfokus.

Ingin Membuat Formulir di HTML dengan Mudah?

Formulir HTML sangat berguna untuk mengumpulkan informasi dari pengguna dan bisa diubah untuk berbagai jenis kebutuhan, baik untuk pendaftaran, komentar, maupun pengisian data lainnya. Dengan memahami elemen-elemen ini, kamu bisa membuat formulir yang efektif dan mudah digunakan.

Ingin memiliki website yang menarik dan efektif? Whello hadir untuk membantu kamu! Dengan memahami tren desain website terkini dan menerapkan tips mendesain website terbaik, Whello menciptakan situs yang tidak hanya indah secara visual tetapi juga fungsional.

Di era digital ini, alasan harus membuat website sangat jelas: website adalah kunci utama untuk menarik pelanggan dan membangun kredibilitas bisnis kamu. Dengan Whello, kamu bisa mendapatkan solusi website yang dirancang untuk memenuhi kebutuhan bisnis dan meningkatkan konversi. Jangan ragu, percayakan pembuatan website kepada Whello sekarang!