Yükleniyor...

HTML input öznitelikleri

Input türleri type ile yüzü seçti. Input öznitelikleri aynı etikette davranışı inceler: ipuçları, zorunlu, aralık, uzunluk, desen, kilit. Günlük yardımcı kataloğu — ikinci bir type haritası değil, sonraki form= hilesi değil.

Input öznitelikleri neden önemli

Doğru type boş zorunlu alan, aralık dışı yaş, uzun kod bırakır. Öznitelikler hafif tarayıcı denetimi ekler. Gerçek uygulamada sunucuda da doğrulayın.

Doğrudan yanıt

1) name, id, value tutun. 2) placeholder kısa ipucu — label yerine geçmez. 3) Zorunlu için required. 4) Sayı/tarih için min/max/step; metin için maxlength; bazen pattern. 5) readonly görünür ve genelde gönderilir; disabled engeller ve genelde göndermez. 6) Öznitelikler type'ı inceler — yerine geçmez; form='dan ayrı.

📊 Handy input attributes

Attribute Role Beginner tip
placeholder Hint text in an empty field Not a label — always keep a real label
required Must be filled before submit Browser may block empty submit
min / max / step Limits for number/date-like types Match the type you already chose
maxlength Max characters for text-like types Soft cap in the UI; still check on the server
pattern Allowed character pattern Keep patterns simple for beginners
disabled Not usable; usually not submitted Do not disable fields you still need to send
readonly Visible, not editable; still submitted Good for fixed display values

Profil: zorunlu, ipucu, uzunluk

Küçük form: ad required+placeholder, kullanıcı maxlength/pattern, isteğe bağlı şehir.

Profile with input attributes

html 
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>

<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>

<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">

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

Profil demosunu okuyun

  • ad ve kullanıcıda required
  • placeholder yalnızca boşken — ad label'dan
  • maxlength=12
  • pattern harf/rakam/_
  • şehir required'suz
  • type=text zaten seçili; öznitelikler inceler

Rezervasyon: aralıklar ve kilitler

Sayı/tarih min/max/step ile anlam kazanır. readonly kod görünür/genelde gider; disabled promo genelde gitmez.

Booking ranges and locks

html 
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>

<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>

<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>

<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>

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

Rezervasyon demosunu okuyun

  • misafir ve gece için min/max/step
  • value=2 başlangıç
  • readonly kodu tutar/genelde gönderir
  • disabled düzenlemeyi ve çoğu zaman gönderimi keser
  • tarih sınırları type=date ile
  • sonraki: form=id ilişkilendirme

Doğru yardımcıları seçin

  • Doldurulmalı: required
  • Boş ipucu: placeholder (+ label)
  • Sayı/tarih sınırı: min max step
  • Karakter tavanı: maxlength
  • Basit biçim: pattern
  • Görünsün, düzenlenmesin, gitsin: readonly
  • Kilitle, çoğu zaman gönderme: disabled
  • Kablo: name id value
  • type'ı burada yeniden seçmeyin

Alıştırma — özniteliklerle sıkın

  1. Profil; required kaldırıp geri koyun
  2. placeholder boşaltın; label kalsın
  3. maxlength 20
  4. Misafir min/max dışı
  5. Kodda readonly değiştirin
  6. Gönderim: kod vs promo
  7. Cümle: öznitelikler davranışı inceler; type yüzü seçti

Kolay hatalar

  • label yerine placeholder
  • gönderilmesi gereken alanı disable
  • yalnızca tarayıcıya güvenmek
  • yok sayan türlerde min/max
  • karmaşık pattern
  • type kataloğuyla karıştırmak
  • erken form='a atlamak

Özet

  • Öznitelikler type'tan sonra davranışı inceler
  • Günlük: required, placeholder, aralıklar, maxlength, pattern
  • readonly genelde gönderilir; disabled değil
  • placeholder ipucu; label adlandırır
  • name/id/value tutun
  • Sonraki: input form ö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 52 / 68
Html Ders