HTML Form Öğeleri
Form öznitelikleri form etiketini ayarladı. Form öğeleri içindeki parçalardır — etiketler, metin alanları, listeler, düğmeler, gruplama. Bu ders araç setini haritalar. input türleri sonra.
Form öğeleri neden önemli
Yalnızca öznitelikli çıplak form yanıt toplamaz. Kontroller gerekir. textarea yerine tek satır input veya serbest metin yerine select kullanım ve veriyi değiştirir.
Doğrudan yanıt
1) Her görünür kontrolü label ile eşleştirin. 2) input birçok tek satır için. 3) textarea çok satır. 4) select+option sabit liste. 5) button eylem. 6) fieldset+legend grup. action/method dış formda.
📊 Common form pieces
| Element | Role | Beginner tip |
|---|---|---|
| label | Names a control for humans and assistive tech | Match for= to the control id |
| input | Single-line text, email, checks, radios, … | Types catalog is the next lesson |
| textarea | Multi-line text | Prefer over input for bios and messages |
| select / option | Choose from a fixed list | Each option needs a value |
| button | submit, reset, or generic action | Default in a form is often submit — set type explicitly |
| fieldset / legend | Group related controls with a title | legend is the accessible group name — not a plain div |
Karışık kontrollü profil fieldset
Küçük profil düzenleyici: bir grup, çok satırlı bio, düzey listesi, kaydet düğmesi.
<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>
Profil demosunu okuyun
- fieldset+legend grubu adlandırır
- textarea bio için daha uygun
- select/option düzeyi sınırlar
- her kontrolde id ve name
- submit formu gönderir
- action/method önceki dersten
Tercihler: radyo ve düğme türleri
Bazen yanıt dışlayıcıdır. Radyolar name paylaşır. Her seçenekte label. submit’i reset ve button ile karşılaştırın.
<form action="/prefs" method="post">
<fieldset>
<legend>Theme</legend>
<label>
<input type="radio" name="theme" value="light" checked>
Light
</label>
<label>
<input type="radio" name="theme" value="dark">
Dark
</label>
</fieldset>
<button type="submit">Save prefs</button>
<button type="reset">Clear</button>
</form>
Tercih demosunu okuyun
- aynı name’li radyolar bir grup
- label içindeki radyo metni tıklanabilir yapar
- legend Theme başlığı verir
- submit gönderir; reset temizler — kaydetmez
- diğer input türleri sonra
Doğru kontrolü seçin
- kısa yanıt/e-posta/şifre: input
- uzun metin: textarea
- sabit liste: select veya radyo
- bölüm grupla: fieldset+legend
- adlandır: label
- gönder: button type=submit
Alıştırma — öğeleri birleştirin
- Profili kopyalayın; legend ve option değiştirin
- Geçici olarak textarea’yı input yapın
- Notlar için ikinci fieldset
- Tema radyoları; label’a tıklayın
- Clear sonra Save
- Bir kontrolü form dışına taşıyın
- Cümle: öğeler içeride etiketli kontrollerdir; form etiketindeki öznitelikler ayrı katmandır
Kolay hatalar
- labelsiz kontrol
- legend yerine div başlık
- submit veya alanlar form dışında
- uzun mesaj için tek satır input
- name unutmak
- reset’i sunucuya kaydet sanmak
- bu dersin action/method’u değiştirdiğini sanmak
Özet
- Form öğeleri form içindeki kontrollerdir
- label, input, textarea, select, button, fieldset/legend çoğu başlangıç UI’sini kapsar
- Her zaman etiketleyin; fieldset ile gruplayın
- Soruya göre kontrol seçin
- Form öznitelikleri ve input türleri ayrı katmanlar
- sırada: input türleri
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek