Formlar: input label button
Etiketlenmiş input'lar, farklı input türleri, textarea'lar, select'ler ve gönderme düğmeleriyle erişilebilir HTML formları oluşturun.
Formlar: input label button, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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.
HTML Formları Neden Kullanılır?
Formlar, kullanıcıların sunucuya veri göndermesinin temel yoludur: giriş, arama, ödeme ve geri bildirim. Tarayıcılar, yerel form öğelerini kullanmanız sayesinde doğrulama, klavye girdisi ve mobil klavyeler gibi büyük miktarda yerleşik davranışı ek çaba gerektirmeden sağlar.
<form> Öğesi
<form> öğesi, ilgili tüm denetim öğelerini sarar. action özniteliği verileri alacak adresi belirler; method ise GET veya POST değerini belirler. Tek sayfalı uygulamalarda genellikle varsayılan gönderimi engeller ve bunu JavaScript ile işlersiniz.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Metin ve E-posta Girdileri
<input> öğesi, formların temel öğesidir. type özniteliği davranışını değiştirir. Serbest metin için type="text", e-posta adresleri için type="email" kullanılır; bu, biçimi doğrular ve doğru mobil klavyeyi gösterir.
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Parola, Sayı ve Diğer Türler
Diğer kullanışlı girdi türleri şunlardır: password (karakterleri gizler), number (sayısal değerleri doğrular ve döndürücüler gösterir), date (tarih seçiciyi gösterir), range (kaydırıcı), checkbox (doğru/yanlış geçişi) ve radio (çok seçenekten birini seçme).
<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"><label> Öğesi — Erişilebilirlik İçin Kritik
Her girdinin ilişkili bir <label> öğesi olmalıdır. Etiket, kullanıcılara ve ekran okuyucularına alanın ne amaçla kullanıldığını söyler. Etikete tıklamak girdiyi odaklar. Girdinin id değeriyle eşleşen for özniteliğini kullanın.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea ve Select
Birden çok satırlı metin için <textarea> kullanın (örneğin yorumlar). Açılır liste seçenekleri için alt öğeleri <option> olan <select> öğesini kullanın. Her zaman "Bir kategori seçin" gibi bir yönlendirme içeren varsayılan boş bir seçenek ekleyin.
<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>Onay Kutuları ve Radyo Düğmeleri
İlişkili onay kutularını bir <fieldset> ve <legend> ile gruplayın. Aynı name değerini paylaşan radyo düğmeleri yalnızca bir seçime izin verir. Her birinin kendi etiketi olmalıdır.
<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>Düğmeler: gönderme, sıfırlama, düğme
<button type="submit"> formu gönderir. type="reset" tüm alanları temizler. type="button" varsayılan olarak hiçbir şey yapmaz ve JavaScript olay dinleyicileriyle kullanılır. Türü her zaman ayarlayın — varsayılan tür gönderme işlemidir.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Girişleri <fieldset> ile Gruplama
<fieldset>, ilişkili denetimleri görsel ve anlamsal olarak gruplar. Zorunlu <legend> bir başlık sağlar. Ekran okuyucuları, gruptaki her denetimden önce açıklamayı okuyarak bağlam sağlar.
name Özniteliği — Neler Gönderilir
Bir form gönderildiğinde tarayıcılar her denetim için name=value çiftini gönderir. Yalnızca name özniteliğine sahip denetimler dahil edilir. Onay kutularında yalnızca işaretli olanlar gönderilir.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Otomatik Doldurma ve Otomatik Tamamlama
Parola yöneticilerinin ve tarayıcıların form alanlarını doğru şekilde doldurmasına yardımcı olmak için autocomplete özniteliğine email, given-name, new-password veya current-password gibi değerler atayın.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Hızlı Kontrol
Bir <label> öğesindeki for özniteliğinin amacı nedir?
Özet: Erişilebilir HTML Formları
Her giriş alanının bir etiketi olmalıdır. Veriye uygun giriş türünü seçin. İlişkili denetimleri alan kümesiyle gruplayın. Gönderim için gönderme türündeki düğmeyi kullanın. JavaScript eklemeden önce yerleşik form özelliklerinden (doğrulama, klavyeyle gezinme, otomatik doldurma) yararlanın.
Sıkça Sorulan Sorular
“Formlar: input label button” dersi ücretsiz mi?
Evet — “Formlar: input label button” 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.
“Formlar: input label button” dersinde ne öğreneceğim?
Etiketlenmiş input'lar, farklı input türleri, textarea'lar, select'ler ve gönderme düğmeleriyle erişilebilir HTML formları oluşturun. 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 4. dersidir.
“Formlar: input label button” 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
- Belge Yapısı: DOCTYPE html head body
- Anlamsal Etiketler: header nav main article footer
- Metinler, Görseller, Bağlantılar ve Listeler
- Formlar: input label button