Kursus ini menguraikan bentuk HTML menjadi bagian-bagian yang mudah dipahami. Dalam beberapa modul berikutnya, Anda akan mempelajari cara kerja formulir HTML dan cara menggunakannya secara efektif dalam proyek Anda. Gunakan panel menu berlogo Pelajari Formulir untuk membuka modul.
Anda akan mempelajari cara membuat formulir HTML dasar, tentang elemen formulir HTML, menata gaya formulir, membantu pengguna memasukkan kembali data, memastikan formulir dapat diakses, dan aman, cara menguji formulir, serta tentang jenis formulir tertentu.
Setiap modul penuh dengan demo interaktif dan penilaian mandiri untuk menguji pengetahuan Anda.
Kursus ini sesuai untuk developer HTML pemula dan lanjutan. Beberapa modul pertama membantu Anda mulai membuat formulir HTML, sedangkan modul lainnya memberikan detail lebih lanjut. Anda dapat mempelajari rangkaian ini dari awal hingga akhir untuk mendapatkan pemahaman umum tentang formulir HTML, atau memilih modul tertentu yang ingin dipelajari lebih lanjut.
Prasyarat
Sebelum memulai materi ini, Anda harus mengetahui tentang HTML. Bagi yang baru mengenal pengembangan web, lihat kursus pengantar HTML dari MDN untuk mempelajari semua cara menulis markup.
Demo
Untuk sebagian besar demo, kami menggunakan CodePen.
Melihat demonya, Anda mungkin bertanya-tanya dari mana gaya tersebut berasal. Kami menggunakan stylesheet umum yang disertakan di semua demo, sehingga hanya gaya yang relevan yang ditampilkan di sana. Di CodePen, Anda dapat memilih file CSS yang disertakan dari Setelan.
Kontrol formulir dan kolom formulir
Kontrol formulir adalah elemen yang memungkinkan interaksi pengguna dan entri atau pemilihan data:
<input>, <select>, <textarea>, atau <button>.
Terkadang kolom formulir digunakan untuk merujuk pada kontrol formulir,
khususnya elemen untuk entri teks: <input> dan <textarea>.
Inilah yang akan Anda pelajari
Menggunakan formulir untuk mendapatkan data dari pengguna
Pelajari dasar-dasar penggunaan formulir di web dengan pengantar elemen formulir ini.
Membantu pengguna memasukkan data dalam formulir
Ringkasan berbagai elemen formulir yang dapat Anda pilih untuk membuat formulir.
Membantu pengguna agar tidak perlu memasukkan ulang data ke dalam formulir
Permudah pengguna untuk mengisi formulir.
Membantu pengguna memasukkan data yang benar dalam formulir
Pelajari cara memvalidasi formulir di frontend.
Menguji formulir
Pelajari cara menguji dan menganalisis formulir.
Dasar-dasar desain
Pelajari cara membuat formulir yang mudah digunakan.
Aksesibilitas
Cara membuat bentuk inklusif.
Internasionalisasi dan pelokalan
Bersiaplah untuk format data internasional, dan pelajari cara merencanakan formulir untuk pelokalan.
Keamanan dan privasi
Pelajari cara mengamankan formulir dan menjaga privasi data pengguna.
Isi Otomatis
Pelajari semua tentang isi otomatis dan atribut pelengkapan otomatis.
Cara menguji kegunaan formulir
Pelajari cara melakukan pengujian kegunaan dan pastikan formulir Anda berfungsi dengan baik untuk semua pengguna.
Menguji formulir di berbagai perangkat dan platform
Pastikan formulir Anda dapat digunakan dengan berbagai perangkat, browser, platform, dan konteks yang berbeda.
Mengumpulkan data
Pelajari cara mengukur dan menganalisis formulir Anda.
Elemen formulir secara mendalam
Pelajari semua hal tentang elemen formulir, kapan Anda harus menggunakan formulir, dan cara kerja formulir secara mendetail.
Membuat kolom formulir secara mendalam
Pelajari berbagai kolom formulir yang dapat Anda gunakan, dan cara memilih elemen formulir yang tepat.
Membentuk atribut secara mendalam
Pelajari semua tentang atribut formulir: cara memodifikasi tata letak keyboard virtual, mengaktifkan validasi bawaan, dan lainnya.
Menata gaya visual formulir
Atur gaya formulir menggunakan CSS, sambil memastikannya tetap dapat digunakan dan dapat dibaca oleh semua orang.
Kontrol formulir gaya visual
Pelajari cara menerapkan kontrol formulir dengan CSS.
JavaScript
Cari tahu cara menggunakan JavaScript untuk menyempurnakan formulir Anda.
Formulir pembayaran
Tingkatkan rasio konversi dengan membuat formulir pembayaran yang lebih baik.
Formulir alamat
Membantu pengguna mengisi formulir alamat dengan cepat dan mudah.
Kesimpulan dan langkah berikutnya
Referensi lebih lanjut untuk membantu Anda mengambil langkah berikutnya.
Jadi, apakah Anda siap mempelajari formulir? Mari kita mulai.