Formulir: input label button
Bangun formulir HTML yang mudah diakses dengan input berlabel, berbagai tipe input, textarea, select, dan tombol kirim.
Formulir: input label button adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Mengapa Formulir HTML?
Formulir adalah cara utama pengguna mengirim data ke server: masuk, pencarian, pembayaran, dan umpan balik. Peramban menyediakan banyak perilaku bawaan — validasi, masukan papan ketik, dan papan ketik seluler — yang tersedia tanpa usaha tambahan jika Anda menggunakan elemen formulir asli.
Elemen <form>
Elemen <form> membungkus semua kontrol terkait. Atribut action menetapkan URL yang menerima data; method menetapkan GET atau POST. Untuk SPA, Anda sering kali mencegah pengiriman bawaan dan menanganinya dengan JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Masukan Teks dan Surel
Elemen <input> adalah andalan formulir. Atribut type mengubah perilakunya. Gunakan type="text" untuk teks bebas dan type="email" untuk alamat surel (memvalidasi format dan menampilkan papan ketik seluler yang sesuai).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Kata Sandi, Angka, dan Jenis Lainnya
Jenis masukan lain yang berguna: password (menyembunyikan karakter), number (memvalidasi angka dan menampilkan pemutar), date (menampilkan pemilih tanggal), range (penggeser), checkbox (sakelar benar/salah), radio (pilihan satu dari banyak).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">Elemen <label> — Penting untuk Aksesibilitas
Setiap masukan harus memiliki <label> terkait. Label memberi tahu pengguna (dan pembaca layar) kegunaan bidang tersebut. Mengeklik label akan memfokuskan masukan. Gunakan atribut for yang cocok dengan id masukan.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea dan Select
Gunakan <textarea> untuk teks beberapa baris (misalnya, komentar). Gunakan <select> dengan anak <option> untuk pilihan tarik-turun. Selalu sertakan opsi kosong bawaan dengan petunjuk seperti "Pilih kategori".
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Kotak Centang dan Tombol Radio
Kelompokkan kotak centang yang berkaitan dengan <fieldset> dan <legend>. Tombol radio yang menggunakan name yang sama hanya memungkinkan satu pilihan. Masing-masing memerlukan labelnya sendiri.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Tombol: kirim, atur ulang, tombol biasa
<button type="submit"> mengirimkan formulir. type="reset" menghapus semua bidang. type="button" tidak melakukan apa pun secara bawaan dan digunakan bersama pendengar peristiwa JavaScript. Selalu tetapkan tipenya — bawaan-nya adalah kirim.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Mengelompokkan Masukan dengan <fieldset>
<fieldset> mengelompokkan kontrol yang berkaitan secara visual dan semantis. <legend> yang wajib ada memberikan keterangan. Pembaca layar membacakan legenda sebelum setiap kontrol dalam kelompok tersebut sehingga konteksnya jelas.
Atribut nama — Yang Dikirim
Saat formulir dikirimkan, peramban mengirimkan pasangan name=value untuk setiap kontrol. Hanya kontrol dengan atribut name yang disertakan. Untuk kotak centang, hanya kotak yang dicentang yang dikirim.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Pengisian Otomatis dan Pelengkapan Otomatis
Tetapkan nilai atribut autocomplete seperti email, given-name, new-password, atau current-password untuk membantu pengelola kata sandi dan pengisian otomatis peramban mengisi formulir dengan benar.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Pemeriksaan Singkat
Apa tujuan atribut for pada elemen <label>?
Ringkasan: Formulir HTML yang Aksesibel
Setiap masukan memerlukan label. Pilih tipe masukan yang tepat untuk datanya. Kelompokkan kontrol yang berkaitan dengan elemen fieldset. Gunakan tipe tombol kirim untuk pengiriman. Manfaatkan fitur formulir bawaan — validasi, navigasi dengan papan ketik, dan pengisian otomatis — sebelum menambahkan JavaScript.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Formulir: input label button” gratis?
Ya — teks lengkap “Formulir: input label button” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Formulir: input label button”?
Bangun formulir HTML yang mudah diakses dengan input berlabel, berbagai tipe input, textarea, select, dan tombol kirim. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Formulir: input label button” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Struktur Dokumen: DOCTYPE html head body
- Tag Semantik: header nav main article footer
- Teks, Gambar, Tautan, dan Daftar
- Formulir: input label button