Form Denetimleri: input türleri, select, textarea
select ve textarea öğelerinin yanı sıra metin, e-posta, sayı, tarih, onay kutusu, radyo, aralık, dosya ve renk input'larını kullanın.
Form Denetimleri: input türleri, select, textarea, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Girdi Türlerinin Eksiksiz Yelpazesi
HTML5, metnin ötesinde birçok özel amaçlı girdi türü sunmuştur. Her biri tarayıcıya ne tür veri beklemesi gerektiğini bildirir; böylece yerleşik doğrulama, mobil cihazlarda uygun klavyeler ve platforma özgü arayüz denetimleri etkinleşir.
Metin, Arama ve Web Adresi Girdileri
type="text", düz metin için yedek seçenektir. type="search", arama için iyileştirilmiş bir klavye önerir ve çoğu zaman temizleme düğmesi gösterir. type="url", web adresi biçimini doğrular ve mobil cihazlarda web adresi klavyesi gösterir.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">E-posta ve Telefon
type="email", e-posta biçimini doğrular ve @ tuşu bulunan, e-posta için iyileştirilmiş bir klavye gösterir. type="tel", telefonlar için sayısal bir klavye gösterir; telefon biçimleri ülkeye göre değiştiğinden biçimi doğrulamaz.
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Sayı, Aralık ve Tarih Türleri
Sayısal veriler için min/max/step ile birlikte type="number" kullanılır. Kaydırıcılar için type="range" kullanılır. type="date", type="time" ve type="datetime-local", yerleşik seçicilerle zaman bilgileri için kullanılır.
<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">Onay Kutuları ve Radyo Düğmeleri
Onay kutuları birbirinden bağımsız açma-kapama denetimleridir. Aynı gruptaki (aynı ada sahip) radyo düğmeleri yalnızca bir seçime izin verir. Her biriyle eşleştirilmiş bir etiket bulunmalıdır.
<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>Renk, Dosya ve Gizli Girdiler
type="color", yerleşik bir renk seçici gösterir. type="file", bir dosya iletişim kutusu açar; dosya türlerini kısıtlamak için accept özniteliğini kullanın. type="hidden", bir arayüz denetimi göstermeden veri gönderir.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Seçim Açılır Listeleri
<select> öğesi bir açılır liste oluşturur. Çoklu seçim için multiple kullanın; ancak bu, kullanıcı deneyimi açısından nadiren iyi bir seçimdir. Uzun listelerde seçenekleri <optgroup> ile gruplandırın.
<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>Çok Satırlı Metin Alanı
<textarea>, çok satırlı bir metin girdisi oluşturur. Başlangıç boyutu için rows ve cols kullanın; daha fazla denetim için CSS kullanabilirsiniz. Kapanış etiketi zorunludur ve etiketler arasındaki içerik varsayılan değerdir.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — Otomatik Tamamlama Seçenekleri
<datalist>, serbest metni kısıtlamadan bir girdi için öneri listesi sağlar. Girdiyi datalist'e list ve id öznitelikleriyle bağlayın.
<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>value ve name Öznitelikleri
name, form gönderiminde gönderilen anahtardır. value, başlangıç değerini belirler. Onay kutuları ve radyo düğmelerinde value, işaretlendiğinde gönderilen değerdir. Metin girdilerinde value, önceden doldurulmuş içeriktir.
Girdi Boyutlandırması ve Yer Tutucu
placeholder, girdi boşken ipucu metni gösterir. Odaklanıldığında kaybolur ve görünür bir etiketin yerine geçmez. size, karakter cinsinden görünen genişliği belirler; boyutlandırma için CSS'yi tercih edin.
Kısa Kontrol
Mobil cihazlarda sayısal klavye gösteren ve girilen değerin geçerli bir sayı olduğunu doğrulayan girdi türü hangisidir?
Özet: Form Denetimleri
Anlamlı girdi türlerini kullanın: e-posta için e-posta türünü, sayılar için sayı türünü, tarihler için tarih türünü seçin. Sabit seçenekler için seçim listesi, önerili otomatik tamamlama için datalist, çok satırlı metin için metin alanı kullanın. Gönderim için her zaman name özniteliklerini, uygun yerlerde de value özniteliklerini ekleyin.
Sıkça Sorulan Sorular
“Form Denetimleri: input türleri, select, textarea” dersi ücretsiz mi?
Evet — “Form Denetimleri: input türleri, select, textarea” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Form Denetimleri: input türleri, select, textarea” dersinde ne öğreneceğim?
select ve textarea öğelerinin yanı sıra metin, e-posta, sayı, tarih, onay kutusu, radyo, aralık, dosya ve renk input'larını kullanın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Form Denetimleri: input türleri, select, textarea” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Form Denetimleri: input türleri, select, textarea
- ARIA ve Erişilebilirlik: label role aria-*
- Anlamsal HTML5: Anlamsal Yapı ve Div Karmaşası
- Form Doğrulama Öznitelikleri