Yükleniyor...

HTML input türleri

Form öğeleri form içindeki etiketleri haritaladı. Input türleri tek etikete odaklanır: input. type denetimin yüzünü seçer. Bu ders bir type kataloğudur. required gibi yardımcılar sonra.

Input türleri neden önemli

type=text neredeyse her şey için çalışır ama telefon yanlış klavye gösterir, parolalar görünür kalır, tarihler serbest metin olur. type'ı verilere uydurmak yazmayı, kontrolleri ve değer biçimini iyileştirir.

Doğrudan yanıt

1) input'a type koyun — text, email, password, number, checkbox, radio, date, file, hidden, submit. 2) Her görünürü label ile eşleyin. 3) Aynı yanıtın radyoları name paylaşır; checkbox bağımsızdır. 4) Göndermek için button type=submit tercih edin. 5) type yalnızca yüzü seçer — action/method ve sonraki öznitelikler ayrı katmanlardır.

📊 Starter input types

type Use Beginner tip
text General single-line text Default when nothing fitter exists
email Email addresses Mobile email keyboard + light format check
password Masked secrets Never store the real password in page source
number Numeric values Good for ages/qty — still validate on the server
checkbox Independent on/off Many can be checked at once
radio One choice in a named group Same name = one group
date Calendar date Browser UI varies; value is YYYY-MM-DD style
file Upload a file Needs multipart form encoding for real uploads
hidden Value not shown Still submitted with name/value

Kayıt: türlenmiş alanlar

Küçük katılım formu: e-posta, parola, yaş number ve başlangıç tarihi.

Signup with typed inputs

html 
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">

<label for="pw">Password</label>
<input id="pw" name="pw" type="password">

<label for="age">Age</label>
<input id="age" name="age" type="number">

<label for="start">Start date</label>
<input id="start" name="start" type="date">

<button type="submit">Join</button>
</form>

Kayıt demosunu okumak

  • email → e-posta UI
  • password karakterleri maskeler
  • number sayısal giriş
  • date tarih denetimi
  • label for/id; name anahtar
  • action/method aynı

Anket: checkbox, radio ve file

Anahtarlar ve yüklemeler aynı input, farklı type. Radyolar name=plan paylaşır. checkbox yalnızdır. file seçici açar.

Survey checkbox radio file

html 
<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>

<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>

<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">

<button type="submit">Send</button>
</form>

Anket demosunu okumak

  • bülten checkbox bağımsız
  • aynı name → tek radyo seçimi
  • label metni tıklanabilir yapar
  • file + multipart yükleme için
  • fieldset Plan'ı çerçeveler — odak type
  • sonraki ders: required gibi öznitelikler

Doğru type'ı seçmek

  • kısa metin: text
  • e-posta/parola: email/password
  • miktar veya yaş: number
  • tekil seçenek: aynı name'li radio
  • bağımsız anahtar: checkbox
  • takvim günü: date
  • ek: file
  • gizli: hidden
  • çok satır hâlâ textarea

Alıştırma — türleri değiştirin

  1. Kaydı kopyalayın; email→text
  2. password kısa süre text
  3. miktar için ikinci number
  4. farklı name'li radyolar, sonra düzeltin
  5. Newsletter + Pro; beklenen name'leri yazın
  6. multipart'siz file — farkındalık
  7. Cümle: type input'un yüzünü seçer

Kolay hatalar

  • parolalar için text
  • farklı name'li radyolar
  • labelsiz
  • encoding olmadan file yükleme beklemek
  • type'ın action/name yerine geçtiğini sanmak
  • uzun metin için textarea yerine input
  • sonraki öznitelik dersiyle karıştırmak

Özet

  • bir input — type ile birçok yüz
  • type'ı verilere uydurun
  • radyolar name paylaşır; checkbox yalnız
  • görünürü her zaman etiketleyin
  • form öğeleri ve input öznitelikleri ayrı katmanlar
  • sırada: input öznitelikleri

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 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
Konu 51 / 68
Html Ders