Kontrol Formulir: tipe input, select, textarea
Gunakan input teks, email, angka, tanggal, kotak centang, radio, rentang, berkas, dan warna bersama elemen select serta textarea.
Kontrol Formulir: tipe input, select, textarea adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Ragam Lengkap Jenis Masukan
HTML5 memperkenalkan banyak jenis masukan khusus selain teks. Masing-masing memberi tahu peramban jenis data yang diharapkan, sehingga memungkinkan validasi bawaan, papan ketik yang sesuai di perangkat seluler, serta kontrol antarmuka asli platform.
Masukan Teks, Pencarian, dan URL
type="text" adalah alternatif cadangan untuk teks biasa. type="search" menyarankan papan ketik yang dioptimalkan untuk pencarian dan sering menampilkan tombol hapus. type="url" memvalidasi format URL dan menampilkan papan ketik URL di perangkat seluler.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">Surel dan Telepon
type="email" memvalidasi format surel dan menampilkan papan ketik yang dioptimalkan untuk surel, lengkap dengan tombol @. type="tel" menampilkan papan ketik numerik telepon (tidak memvalidasi format karena format telepon berbeda-beda di setiap negara).
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Jenis Angka, Rentang, dan Tanggal
type="number" dengan min/max/step untuk data numerik. type="range" untuk penggeser. type="date", type="time", type="datetime-local" untuk data waktu dengan pemilih bawaan.
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">Kotak Centang dan Tombol Radio
Kotak centang adalah tombol yang berdiri sendiri. Tombol radio dalam grup yang sama (dengan name yang sama) hanya mengizinkan satu pilihan. Masing-masing memerlukan label yang berpasangan.
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Warna, Berkas, dan Tersembunyi
type="color" menampilkan pemilih warna bawaan. type="file" membuka dialog berkas; gunakan atribut accept untuk membatasi jenis berkas. type="hidden" mengirimkan data tanpa kontrol antarmuka.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Menu Tarik-Turun
Elemen <select> membuat menu tarik-turun. Gunakan multiple untuk memilih banyak opsi (jarang menghasilkan pengalaman pengguna yang baik). Kelompokkan opsi dengan <optgroup> untuk daftar yang panjang.
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>Area Teks
<textarea> membuat masukan teks beberapa baris. Gunakan rows dan cols untuk menentukan ukuran awal, atau gunakan CSS untuk kontrol yang lebih besar. Tag penutup wajib ada, dan konten apa pun di antara tag menjadi nilai bawaan.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — Opsi Pelengkapan Otomatis
<datalist> menyediakan daftar saran untuk suatu masukan tanpa membatasi teks bebas. Hubungkan masukan ke datalist dengan atribut list dan id.
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>Atribut Nilai dan Nama
name adalah kunci yang dikirim dalam pengiriman formulir. value menetapkan nilai awal. Untuk kotak centang dan tombol radio, value adalah hal yang dikirim ketika pilihan dicentang. Untuk masukan teks, value adalah konten yang telah diisi sebelumnya.
Ukuran Masukan dan Teks Pengganti
placeholder menampilkan teks petunjuk ketika masukan kosong. Teks ini menghilang saat masukan mendapatkan fokus dan bukan pengganti label yang terlihat. size menetapkan lebar yang terlihat dalam jumlah karakter; sebaiknya gunakan CSS untuk mengatur ukuran.
Pemeriksaan Singkat
Jenis masukan apa yang menampilkan papan ketik numerik di perangkat seluler dan memvalidasi bahwa nilai yang dimasukkan merupakan angka yang valid?
Ringkasan: Kontrol Formulir
Gunakan jenis masukan semantik: email untuk surel, number untuk angka, dan date untuk tanggal. Gunakan select untuk pilihan tetap, datalist untuk pelengkapan otomatis berbasis saran, serta textarea untuk teks beberapa baris. Selalu sertakan atribut name untuk pengiriman dan atribut value jika sesuai.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Kontrol Formulir: tipe input, select, textarea” gratis?
Ya — teks lengkap “Kontrol Formulir: tipe input, select, textarea” 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 “Kontrol Formulir: tipe input, select, textarea”?
Gunakan input teks, email, angka, tanggal, kotak centang, radio, rentang, berkas, dan warna bersama elemen select serta textarea. 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 1 dari 4.
Berapa lama pelajaran “Kontrol Formulir: tipe input, select, textarea” 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
- Kontrol Formulir: tipe input, select, textarea
- ARIA dan Aksesibilitas: label, role, aria-*
- HTML5 Semantik: Semantik vs Sup Div
- Atribut Validasi Formulir