ELztech

Bahas technology bermanfaat dari 'A' sampai 'Z'

• 20 July 2023

Dasar HTML : Panduan Lengkap Membuat Form pada HTML

Dasar HTML : Panduan Lengkap Membuat Form pada HTML

Form dalam HTML adalah elemen yang digunakan untuk mengumpulkan data dari pengguna melalui berbagai jenis input, seperti teks, pilihan, dan lainnya. Form ini merupakan salah satu komponen penting dalam pengembangan website yang berinteraksi dengan pengguna. Dengan menggunakan form, pengguna dapat mengirimkan data, melakukan pendaftaran, memberikan umpan balik, dan berinteraksi dengan berbagai fitur pada halaman web.

Form dalam HTML diimplementasikan dengan menggunakan tag <form>. Tag ini mengelompokkan elemen-elemen input dan menentukan bagaimana data akan dikirim ke server. Form dapat diatur untuk menggunakan metode pengiriman data “GET” atau “POST” yang menentukan bagaimana data tersebut akan ditransmisikan ke server.

Pentingnya Form dalam Pengembangan Website

Form merupakan elemen vital dalam pengembangan website, karena berperan dalam menghubungkan pengguna dengan halaman web dan memungkinkan interaksi dua arah. Beberapa alasan mengapa form sangat penting dalam pengembangan website adalah:

  1. Pengumpulan Data: Form memungkinkan pengguna untuk mengirimkan data kepada website, seperti informasi pribadi, pesan, atau jawaban dari pertanyaan tertentu.
  2. Interaksi Pengguna: Dengan form, pengguna dapat berinteraksi secara langsung dengan website, misalnya dengan mengisi survei, memberikan komentar, atau mengirimkan pesan.
  3. Registrasi Pengguna: Form digunakan untuk mendaftarkan pengguna baru ke dalam sistem, seperti formulir pendaftaran akun.
  4. Pencarian Informasi: Form pencarian memungkinkan pengguna untuk mencari informasi tertentu di dalam website.
  5. Umpan Balik: Form umpan balik memungkinkan pengguna memberikan tanggapan atau saran terhadap produk atau layanan yang disediakan.
  6. Proses Pembayaran: Form digunakan dalam proses pembayaran online, di mana pengguna memasukkan rincian kartu kredit atau metode pembayaran lainnya.

Dengan menggunakan form yang baik dan efektif, pengembang website dapat meningkatkan interaksi dengan pengguna, mengumpulkan data yang diperlukan, dan memberikan pengalaman pengguna yang lebih positif. Selain itu, form juga berperan dalam membentuk kesan awal pengguna terhadap suatu website, sehingga penting untuk merancangnya dengan desain yang menarik dan mudah digunakan.

Persiapan Awal dalam menggunakan Form pada HTML

Struktur Dasar Dokumen HTML

Sebelum membuat form pada HTML, langkah pertama yang perlu dilakukan adalah menyiapkan struktur dasar dokumen HTML. Dokumen HTML dimulai dengan tag <html> yang menandakan awal dari halaman web. Di dalam tag <html>, terdapat tag <head> dan tag <body>. Tag <head> berisi informasi-informasi tentang halaman web, seperti judul halaman, tautan ke file eksternal (CSS, JavaScript), dan meta informasi. Sedangkan tag <body> merupakan bagian utama halaman yang akan ditampilkan kepada pengguna.

Berikut adalah contoh struktur dasar dokumen HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
    <!-- Tautan ke file CSS atau JavaScript -->
</head>
<body>
    <!-- Konten halaman web, termasuk form, akan diletakkan di sini -->
</body>
</html>

Menggunakan Tag <form> untuk Membuat Form

Setelah menyiapkan struktur dasar dokumen HTML, langkah berikutnya adalah menggunakan tag <form> untuk membuat form. Tag <form>digunakan untuk mengelompokkan elemen-elemen input dalam form dan menentukan bagaimana data yang dikumpulkan akan dikirimkan ke server.

Contoh penggunaan tag <form>dalam dokumen HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <form>
        <!-- Elemen-elemen input akan diletakkan di sini -->
    </form>
</body>
</html>

Menentukan Metode Pengiriman Data (GET dan POST)

Ketika menggunakan tag <form>, kita perlu menentukan metode pengiriman data yang akan digunakan saat form dikirimkan ke server. Terdapat dua metode pengiriman data yang umum digunakan, yaitu “GET” dan “POST”.

  1. GET: Metode “GET” digunakan untuk mengirimkan data form melalui URL. Data form akan tampil di bagian URL dan dapat dilihat oleh semua orang. Metode ini cocok digunakan untuk form pencarian atau form dengan data yang tidak sensitif.

Contoh penggunaan metode “GET”:

<form method="get" action="proses_form.php">
    <!-- Elemen-elemen input akan diletakkan di sini -->
</form>
  1. POST: Metode “POST” digunakan untuk mengirimkan data form melalui permintaan HTTP tanpa menampilkan data tersebut di URL. Data form dikirimkan secara tersembunyi dan lebih aman dibandingkan metode “GET”. Metode ini cocok digunakan untuk form dengan data yang sensitif, seperti form pendaftaran atau proses pembayaran.

Contoh penggunaan metode “POST”:

<form method="post" action="proses_form.php">
    <!-- Elemen-elemen input akan diletakkan di sini -->
</form>

Dengan menentukan metode pengiriman data yang sesuai, form pada HTML dapat berfungsi dengan baik dan data yang dikumpulkan dapat dikirimkan ke server untuk diproses lebih lanjut.

Input Teks

Menggunakan Tag <input> dengan type=“text”

Input teks adalah salah satu jenis elemen input dalam form yang memungkinkan pengguna untuk memasukkan data dalam bentuk teks atau kalimat. Untuk membuat input teks pada form, kita menggunakan tag <input> dengan atribut type=“text” .

Contoh penggunaan input teks dalam “form”:

<form>
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama">
</form>

Pada contoh di atas, input teks akan menampilkan kotak input kosong yang memungkinkan pengguna untuk mengetikkan nama mereka.

Mengatur Atribut “name” dan “placeholder”

Atribut name digunakan untuk memberikan nama pada elemen input sehingga data yang dimasukkan pengguna dapat diidentifikasi saat form dikirimkan ke server. Nama ini akan digunakan sebagai kunci untuk mengakses nilai data input dalam skrip server.

Contoh penggunaan atribut “name”:

<form>
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama">
</form>

Dalam contoh di atas, atribut name=“nama” memberikan nama “nama” pada input teks sehingga data yang dimasukkan oleh pengguna dapat diakses dengan menggunakan nama tersebut dalam skrip server.

Selain itu, atribut ‘placeholder’ dapat digunakan untuk memberikan petunjuk atau contoh data yang diharapkan kepada pengguna. Petunjuk ini akan muncul di dalam input teks sebelum pengguna memasukkan data, dan akan hilang ketika pengguna mulai mengetikkan teks.

Contoh penggunaan atribut “placeholder”:

<form>
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap">
</form>

Pada contoh di atas, input teks akan menampilkan teks “Masukkan nama lengkap” sebagai petunjuk kepada pengguna.

Memanfaatkan Atribut “required” untuk Pengisian Wajib

Atribut “required” dapat digunakan untuk membuat pengisian suatu input menjadi wajib. Jika atribut “required” diterapkan pada elemen input, maka pengguna harus mengisi input tersebut sebelum form dapat dikirimkan. Jika input tersebut tidak diisi, maka browser akan menampilkan pesan kesalahan dan mencegah form untuk dikirimkan.

Contoh penggunaan atribut required:

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

Dalam contoh di atas, input email akan menjadi wajib diisi karena terdapat atribut “required” pada elemen input. Jika pengguna mencoba mengirimkan form tanpa mengisi input email, maka browser akan menampilkan pesan kesalahan hingga input tersebut diisi.

Dengan mengatur atribut “name”, “placeholder”, dan memanfaatkan atribut “required” dengan tepat, pengguna dapat dengan mudah mengisi input teks pada form, dan data yang dikumpulkan akan lebih akurat dan lengkap.

Kotak Centang dan Tombol Radio

Menggunakan Tag <input>dengan type=“checkbox”

Kotak centang (checkbox) adalah salah satu jenis elemen input dalam form yang memungkinkan pengguna untuk memilih satu atau beberapa opsi dari beberapa pilihan. Setiap kotak centang biasanya berhubungan dengan sebuah label yang menjelaskan pilihan tersebut. Untuk membuat kotak centang pada form, kita menggunakan tag <input> dengan atribut type=“checkbox”. Contoh penggunaan kotak centang dalam form:

<form>
    <input type="checkbox" id="hobi1" name="hobi1" value="Sepak Bola">
    <label for="hobi1">Sepak Bola</label><br>

    <input type="checkbox" id="hobi2" name="hobi2" value="Renang">
    <label for="hobi2">Renang</label><br>

    <input type="checkbox" id="hobi3" name="hobi3" value="Bersepeda">
    <label for="hobi3">Bersepeda</label><br>
</form>

Pada contoh di atas, kita membuat tiga kotak centang dengan label yang mewakili pilihan hobi yang dapat dipilih oleh pengguna. Setiap kotak centang diberikan atribut “name” dan “value” yang berbeda sehingga ketika form dikirimkan ke server, pilihan hobi yang dipilih oleh pengguna dapat diidentifikasi dengan menggunakan nama tersebut dalam skrip server.

Menangani Pilihan Ganda dengan Tag <input> type=“radio”

Tombol radio (radio button) adalah jenis elemen input dalam form yang memungkinkan pengguna untuk memilih salah satu opsi dari beberapa pilihan. Perbedaan utama antara tombol radio dan kotak centang adalah pada tombol radio, hanya satu pilihan yang dapat dipilih dalam satu kelompok pilihan, sementara pada kotak centang, beberapa pilihan dapat dipilih secara bersamaan. Untuk membuat tombol radio pada form, kita juga menggunakan tag <input> tetapi dengan atribut type=“radio”.

Contoh penggunaan tombol radio dalam form:

<form>
    <input type="radio" id="gender1" name="gender" value="Laki-laki">
    <label for="gender1">Laki-laki</label><br>

    <input type="radio" id="gender2" name="gender" value="Perempuan">
    <label for="gender2">Perempuan</label><br>

    <input type="radio" id="gender3" name="gender" value="Lainnya">
    <label for="gender3">Lainnya</label><br>
</form>

Pada contoh di atas, kita membuat tiga tombol radio dengan label yang mewakili pilihan gender yang dapat dipilih oleh pengguna. Setiap tombol radio diberikan atribut name yang sama, yaitu “gender”, sehingga hanya satu opsi yang dapat dipilih dalam satu kelompok pilihan. Nilai dari tombol radio yang dipilih oleh pengguna dapat diakses melalui nama tersebut dalam skrip server.

Dengan menggunakan kotak centang dan tombol radio, pengembang web dapat memberikan opsi pilihan kepada pengguna dan mengumpulkan data pilihan tersebut melalui form. Selain itu, penggunaan label yang tepat juga mempermudah interaksi pengguna dengan form dan meningkatkan pengalaman pengguna secara keseluruhan.

Kotak Pilihan (Select Dropdown) dan Kotak Teks Multibaris (Textarea)

Membuat Dropdown dengan Tag <select> dan <option>

Kotak pilihan (select dropdown) adalah salah satu jenis elemen input dalam form yang memungkinkan pengguna untuk memilih satu opsi dari beberapa pilihan yang tersedia. Opsi-opsi tersebut ditampilkan dalam bentuk daftar turun (dropdown) yang dapat dibuka dan ditutup. Untuk membuat dropdown pada form, kita menggunakan tag <select> untuk mengelompokkan opsi-opsi dan tag <option> untuk menentukan setiap pilihan.

Contoh penggunaan dropdown dalam form:

<form>
    <label for="hobi">Pilih Hobi:</label>
    <select id="hobi" name="hobi">
        <option value="Sepak Bola">Sepak Bola</option>
        <option value="Renang">Renang</option>
        <option value="Bersepeda">Bersepeda</option>
        <option value="Membaca">Membaca</option>
    </select>
</form>

Pada contoh di atas, kita membuat dropdown dengan label “Pilih Hobi” dan empat opsi hobi yang dapat dipilih oleh pengguna. Setiap opsi didefinisikan dalam tag <option> dengan atribut value yang berisi nilai yang akan dikirimkan ke server ketika opsi tersebut dipilih. Nama atribut name=“hobi” pada tag <select> digunakan untuk mengidentifikasi pilihan yang dipilih oleh pengguna saat form dikirimkan ke server.

Membuat Kotak Teks Multibaris dengan Tag <textarea>

Kotak teks multibaris (textarea) adalah jenis elemen input dalam form yang memungkinkan pengguna untuk memasukkan teks dalam jumlah yang lebih banyak dan dalam beberapa baris. Kotak teks ini biasanya digunakan untuk mengumpulkan informasi yang lebih detail, seperti komentar, alamat, atau deskripsi. Untuk membuat kotak teks multibaris pada form, kita menggunakan tag <textarea>. Contoh penggunaan kotak teks multibaris dalam form:

<form>
    <label for="pesan">Masukkan Pesan:</label>
    <textarea id="pesan" name="pesan" rows="4" cols="50"></textarea>
</form>

Pada contoh di atas, kita membuat kotak teks multibaris dengan label “Masukkan Pesan”. Atribut rows dan cols pada tag <textarea> digunakan untuk menentukan jumlah baris dan kolom yang akan ditampilkan di kotak teks. Nilai yang dimasukkan ke dalam kotak teks multibaris akan dikirimkan ke server dengan menggunakan atribut name=“pesan” saat form dikirimkan.

Dengan menggunakan kotak pilihan (select dropdown) dan kotak teks multibaris (textarea), pengguna dapat memberikan pilihan dan informasi yang lebih kaya dalam form. Hal ini memungkinkan pengembang web untuk mengumpulkan data yang lebih detail dan lebih khusus sesuai dengan kebutuhan form dan meningkatkan kualitas interaksi antara pengguna dengan website.

Input Tanggal dan Input Angka

Penggunaan Tag <input> dengan type=“date”

Input tanggal adalah jenis elemen input dalam form yang memungkinkan pengguna untuk memilih tanggal dari sebuah kalender. Untuk membuat input tanggal pada form, kita menggunakan tag <input> dengan atribut type=“date”.

Contoh penggunaan input tanggal dalam form:

<form>
    <label for="tgl_lahir">Tanggal Lahir:</label>
    <input type="date" id="tgl_lahir" name="tgl_lahir">
</form>

Pada contoh di atas, kita membuat input tanggal dengan label “Tanggal Lahir”. Ketika pengguna memilih tanggal melalui kalender yang muncul saat input tersebut diklik, nilai tanggal yang dipilih akan dikirimkan ke server ketika form dikirimkan dengan menggunakan atribut name=“tgl_lahir”.

Perlu diingat bahwa dukungan terhadap jenis input “date” dapat bervariasi tergantung pada jenis dan versi browser yang digunakan oleh pengguna. Selain itu, input tanggal juga akan beradaptasi dengan format tanggal yang sesuai dengan aturan lokal pengguna.

Batasi Input Angka dengan Tag <input> type=“number`

Input angka adalah jenis elemen input dalam form yang memungkinkan pengguna untuk memasukkan nilai numerik. Untuk membatasi input hanya pada nilai angka, kita menggunakan tag <input> dengan atribut type=“number”.

Contoh penggunaan input angka dalam form:

<form>
    <label for="usia">Usia:</label>
    <input type="number" id="usia" name="usia" min="0" max="100">
</form>

Pada contoh di atas, kita membuat input angka dengan label “Usia”. Atribut min=“0” dan max=“100” digunakan untuk membatasi rentang nilai yang dapat dimasukkan oleh pengguna, yaitu dari 0 hingga 100. Dengan pengaturan ini, pengguna hanya dapat memasukkan angka dalam rentang tersebut.

Ketika form dikirimkan ke server, nilai angka yang dimasukkan oleh pengguna akan dikirimkan dengan menggunakan atribut name=“usia”. Skrip server kemudian dapat memproses nilai angka tersebut sesuai dengan kebutuhan aplikasi.

Dengan menggunakan input tanggal dan input angka, pengembang web dapat mengumpulkan informasi lebih spesifik dan lebih terstruktur dari pengguna. Penggunaan jenis input yang tepat akan memastikan data yang dikumpulkan berkualitas dan sesuai dengan format yang diharapkan, sehingga meningkatkan efektivitas dan efisiensi dalam pengolahan data di sisi server.

Validasi Form

Memastikan Pengisian yang Benar dengan Atribut “pattern”

Validasi form adalah proses memastikan bahwa data yang dimasukkan oleh pengguna sesuai dengan format atau pola yang diharapkan. Salah satu cara untuk melakukan validasi form adalah dengan menggunakan atribut “pattern” pada elemen input. Atribut “pattern” memungkinkan kita untuk menentukan pola atau ekspresi reguler (regular expression) yang harus dipenuhi oleh data yang dimasukkan.

Contoh penggunaan atribut “pattern” untuk memvalidasi input email dalam form:

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
</form>

Pada contoh di atas, atribut “pattern” ditetapkan dengan nilai [a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$. Pola ini memastikan bahwa data yang dimasukkan harus mengikuti format email yang umum, seperti “[email protected]”. Jika pengguna memasukkan data yang tidak sesuai dengan pola tersebut, maka form tidak akan dapat dikirimkan dan pesan kesalahan akan ditampilkan.

Membuat Pesan Kesalahan dengan Atribut “title”

Untuk memberikan pesan kesalahan yang lebih deskriptif dan membantu pengguna memahami alasan ketika form tidak berhasil dikirimkan, kita dapat menggunakan atribut “title”. Atribut “title” digunakan untuk memberikan teks yang akan muncul saat pengguna mengarahkan kursor ke elemen input.

Contoh penggunaan atribut “title” untuk memberikan pesan kesalahan pada input teks:

<form>
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" pattern="[A-Za-z]+" title="Harap masukkan hanya huruf alfabet" required>
</form>

Pada contoh di atas, saat pengguna mengarahkan kursor ke input teks, pesan “Harap masukkan hanya huruf alfabet” akan muncul sebagai petunjuk jika pengguna mencoba memasukkan karakter selain huruf alfabet.

Dengan menggunakan atribut “pattern” dan “title”, form dapat lebih mudah diverifikasi dan data yang tidak sesuai format dapat dicegah. Pesan kesalahan yang jelas juga membantu pengguna memperbaiki masalah dengan cepat dan meningkatkan pengalaman pengguna dalam penggunaan form.

Pengiriman Data Form ke Server

Menggunakan Metode GET untuk Pengiriman Data

Metode “GET” adalah salah satu cara untuk mengirimkan data form dari halaman web ke server. Dalam metode “GET”, data form dikodekan dan ditambahkan ke bagian URL (query string) sebagai parameter. Metode ini cocok digunakan untuk form dengan data yang sederhana dan tidak sensitif, seperti form pencarian atau halaman filter.

Contoh penggunaan metode “GET” dalam form:

<form method="get" action="proses_form.php">
    <!-- Elemen-elemen input akan diletakkan di sini -->
    <input type="text" name="username" placeholder="Masukkan nama pengguna">
    <input type="submit" value="Kirim">
</form>

Pada contoh di atas, data dari elemen input dengan atribut name=“username” akan dikirimkan ke server menggunakan metode “GET” saat tombol “Kirim” ditekan. URL yang akan digunakan untuk pengiriman data akan terlihat seperti ini: “proses_form.php?username=nama_pengguna” .

Menggunakan Metode POST untuk Pengiriman Data

Metode “POST” juga digunakan untuk mengirimkan data form dari halaman web ke server. Namun, dalam metode “POST”, data form dikodekan dan dikirimkan dalam tubuh permintaan HTTP, sehingga tidak akan terlihat di URL. Metode ini lebih aman digunakan untuk form dengan data yang sensitif, seperti form pendaftaran atau proses pembayaran.

Contoh penggunaan metode “POST” dalam form:

<form method="post" action="proses_form.php">
    <!-- Elemen-elemen input akan diletakkan di sini -->
    <input type="password" name="password" placeholder="Masukkan kata sandi">
    <input type="submit" value="Kirim">
</form>

Pada contoh di atas, data dari elemen input dengan atribut name=“password” akan dikirimkan ke server menggunakan metode “POST” saat tombol “Kirim” ditekan. Data tersebut tidak akan terlihat di URL, sehingga lebih aman untuk data yang bersifat rahasia seperti kata sandi.

Memahami Keamanan Pengiriman Data

Penting untuk memahami bahwa baik metode “GET” maupun “POST” memiliki risiko keamanan. Data yang dikirimkan melalui metode “GET” akan terlihat di URL, sehingga data tersebut dapat dengan mudah diakses dan dilihat oleh orang lain. Oleh karena itu, data sensitif seperti kata sandi tidak sebaiknya dikirimkan menggunakan metode “GET”.

Di sisi lain, metode “POST” lebih aman karena data tidak terlihat di URL. Namun, data tersebut masih dapat diakses oleh pihak yang berwenang dengan menggunakan teknik tertentu. Oleh karena itu, untuk mengamankan data yang dikirimkan, kita perlu menggunakan koneksi yang aman (misalnya HTTPS) dan melakukan validasi data di sisi server.

Dalam pengiriman data form, pilihan metode (GET atau POST) harus disesuaikan dengan kebutuhan form dan tingkat keamanan yang diinginkan. Penggunaan metode “POST” lebih disarankan untuk form dengan data sensitif, sementara metode “GET” dapat digunakan untuk form dengan data yang tidak sensitif atau ketika kita ingin melihat data yang dikirimkan di URL secara langsung.

Menyusun Form dalam Bentuk Kelompok

Menggunakan Tag dan untuk Membuat Grup Input

Saat kita memiliki beberapa elemen input yang terkait dalam satu tema atau kelompok, kita dapat menggunakan tag <fieldset> dan <legend> untuk mengelompokkan elemen-elemen tersebut dan memberikan keterangan atau judul pada kelompok tersebut.

Contoh penggunaan tag <fieldset> dan <legend> untuk membuat grup input dalam form:

<form>
    <fieldset>
        <legend>Informasi Pribadi</legend>
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama" required><br>

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

    <fieldset>
        <legend>Pilihan Hobi</legend>
        <input type="checkbox" id="hobi1" name="hobi" value="Sepak Bola">
        <label for="hobi1">Sepak Bola</label><br>

        <input type="checkbox" id="hobi2" name="hobi" value="Renang">
        <label for="hobi2">Renang</label><br>

        <input type="checkbox" id="hobi3" name="hobi" value="Bersepeda">
        <label for="hobi3">Bersepeda</label><br>
    </fieldset>

    <!-- Elemen-elemen input lainnya -->
</form>

Pada contoh di atas, elemen-elemen input yang terkait dengan informasi pribadi dikelompokkan dalam <fieldset> dengan judul “Informasi Pribadi”. Demikian juga, elemen-elemen input yang terkait dengan pilihan hobi dikelompokkan dalam <fieldset> dengan judul “Pilihan Hobi”. Penggunaan <legend> di dalam <fieldset> memberikan keterangan atau judul yang menjelaskan isi dari kelompok input.

Mendesain Tampilan Form dengan CSS

Untuk meningkatkan tampilan form dan membuatnya lebih menarik, kita dapat menggunakan CSS (Cascading Style Sheets) untuk mengubah tata letak, warna, font, dan gaya elemen-elemen dalam form.

Contoh penerapan CSS untuk mengubah tampilan form:

<style>
    /* Gaya umum untuk form */
    form {
        width: 400px;
        margin: auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
    }

    /* Gaya untuk fieldset dan legend */
    fieldset {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 20px;
    }

    legend {
        font-size: 16px;
        font-weight: bold;
        color: #555;
    }

    /* Gaya untuk label dan input */
    label {
        display: block;
        margin-bottom: 5px;
        color: #333;
    }

    input[type="text"],
    input[type="email"],
    input[type="checkbox"],
    textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 14px;
    }

    input[type="submit"] {
        background-color: #007bff;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    /* Gaya untuk pesan kesalahan */
    input:invalid {
        border-color: red;
    }

    input:invalid:focus {
        box-shadow: none;
    }
</style>

Dalam contoh CSS di atas, kita mendesain tampilan form dengan mengatur lebar, margin, padding, warna latar belakang, jenis font, dan lainnya. Selain itu, kita juga memberikan gaya khusus untuk elemen <fieldset>, <legend>, <label> , dan elemen-elemen input seperti <input> dan <textarea>. Penggunaan :invalid pada pesan kesalahan akan mengubah warna garis tepi elemen input yang tidak valid menjadi merah saat form dikirimkan.

Dengan menggunakan CSS, kita dapat meningkatkan tampilan form dan membuatnya lebih konsisten dengan tampilan keseluruhan website. Selain itu, dengan memberikan kelompok input menggunakan <fieldset> dan <legend>, pengguna akan lebih mudah memahami struktur form dan kelompok input yang terkait.

Contoh Kasus: Membuat Form Kontak Sederhana

Langkah-langkah Membuat Form Kontak

Berikut ini adalah langkah-langkah untuk membuat form kontak sederhana menggunakan HTML dan CSS:

1. Siapkan Struktur Dasar HTML

Mulailah dengan menyiapkan struktur dasar dokumen HTML dengan tag <html>, <head>, dan <body> . Di dalam tag <body>, kita akan menempatkan form kontak dan elemen-elemen input.

2. Buat Form Kontak dengan Elemen Input

Dalam form kontak, tambahkan elemen input seperti input teks untuk nama, email, subjek, kotak teks multibaris untuk pesan, dan tombol “Kirim” untuk mengirimkan form.

<form method="post" action="proses_kontak.php">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required><br>

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

    <label for="subjek">Subjek:</label>
    <input type="text" id="subjek" name="subjek" required><br>

    <label for="pesan">Pesan:</label>
    <textarea id="pesan" name="pesan" rows="4" cols="50" required></textarea><br>

    <input type="submit" value="Kirim">
</form>

3. Tambahkan CSS untuk Desain Form

Gunakan CSS untuk mendesain tampilan form kontak agar terlihat lebih menarik dan mudah dibaca. Sesuaikan warna, ukuran, dan jenis font sesuai dengan kebutuhan desain website.

<style>
    form {
        width: 400px;
        margin: auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
    }

    label {
        display: block;
        margin-bottom: 5px;
        color: #333;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 14px;
    }

    input[type="submit"] {
        background-color: #007bff;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    input:invalid {
        border-color: red;
    }

    input:invalid:focus {
        box-shadow: none;
    }
</style>

4. Tambahkan Pesan Kesalahan

Jika diperlukan, tambahkan atribut pattern pada elemen input untuk membatasi atau memvalidasi data yang dimasukkan. Sertakan juga atribut title untuk memberikan pesan kesalahan yang jelas jika data tidak sesuai format.

<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    title="Masukkan alamat email yang valid">

Memvalidasi dan Mengirim Data ke Server

Untuk memvalidasi data yang dimasukkan oleh pengguna, kita dapat menggunakan atribut required, pattern, atau type pada elemen input. Validasi dapat membantu memastikan data yang diterima oleh server sesuai dengan format yang diharapkan.

Setelah form dikirimkan oleh pengguna, data akan diproses oleh skrip di server. Untuk tujuan demonstrasi, form kontak kami mengirimkan data ke file “proses_kontak.php”. Di dalam skrip “proses_kontak.php”, kita dapat mengakses data yang dikirimkan melalui metode POST atau GET, dan melakukan tindakan selanjutnya, misalnya mengirim email atau menyimpan data dalam database.

Ingatlah untuk selalu memvalidasi data lagi di sisi server sebelum menyimpan atau mengolahnya lebih lanjut. Dengan demikian, form kontak sederhana telah berhasil dibuat dan dapat digunakan oleh pengguna untuk mengirimkan pesan kepada pemilik situs.

Tips dan Trik untuk Form yang Efektif

Meminimalisir Jumlah Input untuk Kepuasan Pengguna

Salah satu kunci untuk menciptakan form yang efektif adalah dengan meminimalisir jumlah input yang diminta dari pengguna. Semakin sedikit input yang diminta, semakin mudah dan cepat bagi pengguna untuk mengisi form. Pertimbangkan untuk hanya meminta informasi yang benar-benar penting dan relevan untuk keperluan form tersebut. Jika beberapa informasi tidak diperlukan, lebih baik tidak menyertakannya dalam form.

Pemilihan Jenis Input yang Tepat untuk Keperluan Tertentu

Pilihlah jenis input yang tepat untuk setiap keperluan form. Gunakanlah input teks untuk data berupa teks, input email untuk alamat email, input tanggal untuk meminta tanggal, dan sebagainya. Memilih jenis input yang sesuai akan memudahkan pengguna dalam memasukkan data dan juga membantu validasi data secara otomatis.

Memberikan Pesan Kesalahan yang Jelas

Saat pengguna mengisi form dengan data yang tidak sesuai format atau membiarkan beberapa input kosong, berikan pesan kesalahan yang jelas dan deskriptif. Pesan kesalahan yang baik akan memberitahu pengguna tentang kesalahan yang dibuatnya dan memberikan petunjuk untuk memperbaikinya. Pastikan pesan kesalahan tampil secara dekat dengan input yang bermasalah agar pengguna dapat dengan mudah mengidentifikasinya.

Penggunaan Placeholder dan Label yang Tepat

Gunakan placeholder dan label yang tepat pada elemen input. Placeholder dapat memberikan petunjuk singkat tentang data yang diharapkan pada input tertentu, sementara label memberikan penjelasan lebih lengkap mengenai input tersebut. Pastikan label terkait dengan input menggunakan atribut “for” dan “id” agar penggunaan form menjadi lebih mudah dipahami.

Contoh penggunaan placeholder dan label pada elemen input:

<label for="nama">Nama Lengkap:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap Anda" required>

Dengan menerapkan tips dan trik di atas, kita dapat menciptakan form yang lebih efektif dan memudahkan pengguna dalam mengisi dan mengirimkan data. Form yang baik akan meningkatkan pengalaman pengguna di situs web, meningkatkan tingkat keberhasilan pengisian form, dan mengurangi tingkat frustrasi pengguna akibat kesalahan dan kebingungan dalam mengisi form.

Kesimpulan

Ringkasan Materi yang Dibahas

Dalam artikel ini, kita telah membahas tentang pembuatan form pada HTML dan beberapa elemen penting yang terlibat dalam proses tersebut. Berikut adalah ringkasan materi yang telah dibahas:

1. Pengenalan

  • Definisi Form dalam HTML
  • Pentingnya Form dalam Pengembangan Website

2. Persiapan Awal

  • Struktur Dasar Dokumen HTML
  • Menggunakan Tag <form> untuk Membuat Form
  • Menentukan Metode Pengiriman Data (GET dan POST)

3. Input Teks

  • Menggunakan Tag <input> dengan type=“text”
  • Mengatur Atribut “name” dan “placeholder”
  • Memanfaatkan Atribut “required” untuk Pengisian Wajib

4. Kotak Centang dan Tombol Radio

  • Menggunakan Tag <input> dengan type=“checkbox”
  • Menangani Pilihan Ganda dengan Tag <input> type=“radio”

5. Kotak Pilihan (Select Dropdown) dan Kotak Teks Multibaris (Textarea)

  • Membuat Dropdown dengan Tag <select> dan <option>
  • Membuat Kotak Teks Multibaris dengan Tag <textarea>

6. Validasi Form

  • Memastikan Pengisian yang Benar dengan Atribut “pattern”
  • Membuat Pesan Kesalahan dengan Atribut “title”

7. Pengiriman Data Form ke Server

  • Menggunakan Metode GET untuk Pengiriman Data
  • Menggunakan Metode POST untuk Pengiriman Data
  • Memahami Keamanan Pengiriman Data

8. Contoh Kasus: Membuat Form Kontak Sederhana

  • Langkah-langkah Membuat Form Kontak
  • Memvalidasi dan Mengirim Data ke Server

9. Tips dan Trik untuk Form yang Efektif

  • Meminimalisir Jumlah Input untuk Kepuasan Pengguna
  • Pemilihan Jenis Input yang Tepat untuk Keperluan Tertentu
  • Memberikan Pesan Kesalahan yang Jelas
  • Penggunaan Placeholder dan Label yang Tepat

Pentingnya Form yang Efektif dalam Pengalaman Pengguna

Form adalah salah satu elemen penting dalam interaksi pengguna dengan website. Form yang efektif akan meningkatkan pengalaman pengguna secara keseluruhan. Dengan menggunakan validasi form, pesan kesalahan yang jelas, dan pengaturan jenis input yang tepat, kita dapat mengoptimalkan proses pengisian form, mengurangi kesalahan pengguna, dan meningkatkan tingkat keberhasilan pengisian.

Penting untuk selalu memikirkan kepuasan pengguna dalam mendesain dan mengimplementasikan form. Form yang baik akan membuat pengguna merasa nyaman dan mudah berinteraksi dengan website, sehingga meningkatkan tingkat konversi dan retensi pengguna.

Dengan memahami konsep dasar pembuatan form pada HTML dan menerapkan tips dan trik yang telah dipelajari, kita dapat menciptakan form yang efektif, fungsional, dan menyenangkan bagi pengguna. Sebagai pengembang web, menguasai teknik-teknik ini akan membantu meningkatkan kualitas situs web dan memberikan pengalaman yang lebih baik kepada pengguna.

Previous

Dasar HTML : Memahami Cara Menampilkan Gambar di HTML

Next

Dasar HTML : Cara Menambahkan Audio ke Halaman HTML