CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Kişi alanları

HTML kursu · Orta seviye · Ders 43/67

İsim, e-posta ve telefon alanlarını doğru tiplerle eklersin.

text, email ve tel türleri

İletişim formunda üç temel kişi alanı vardır: ad, e-posta ve telefon. <input type='text'> serbest metin alır, <input type='email'> e-posta biçimini denetler, <input type='tel'> telefon numarası için ekranda uygun klavyeyi açar.

Tür doğru seçilince tarayıcı yerleşik doğrulama yapar, mobil cihazda doğru klavyeyi gösterir ve forma kullanıcı güveni artırır. Yanlış tür kullanırsan bu avantajları kaybedersin.

required ve placeholder

required özniteliği bir alanın boş bırakılamayacağını söyler; tarayıcı formu göndermeden önce uyarır. placeholder ise alanın içine ne yazılması gerektiğine dair kısa bir ipucu gösterir.

Placeholder bir varsayılan değer değildir: kullanıcı yazana kadar silik görünür ve sunucuya gönderilmez. Onu etiket yerine kullanma; alan adını her zaman label ile ver.

Uygulama E-posta ve telefon alanlarını ekle

Formundaki 'İletişim bilgileri' fieldset'ine iki label+input çifti daha ekle. Birincisi: label for='eposta' 'E-posta', input type='email' id='eposta' name='eposta' placeholder='ad.soyad@eposta.com' required. İkincisi: label for='telefon' 'Telefon', input type='tel' id='telefon' name='telefon' placeholder='+90 555 123 45 67'.

Örnek çözümü göster 
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kafe Dem - İletişim</title>
  </head>
  <body>
    <form action="/bize-yazin" method="post">
      <fieldset>
        <legend>İletişim bilgileri</legend>
        <label for="ad">Adınız</label>
        <input type="text" id="ad" name="ad">
        <label for="eposta">E-posta</label>
        <input type="email" id="eposta" name="eposta" placeholder="ad.soyad@eposta.com" required>
        <label for="telefon">Telefon</label>
        <input type="tel" id="telefon" name="telefon" placeholder="+90 555 123 45 67">
      </fieldset>
    </form>
  </body>
</html>

Kendini test et

  1. Hangi input türü e-posta biçimini otomatik denetler?

    <input type="?" name="eposta">
    • text
    • email
    • tel
    • search
    Cevabı göster

    email — Doğru! type='email' tarayıcıya e-posta biçimi denetimi yaptırır.

  2. Boşluğu doldur: required ekle

    <input type="email" id="eposta" name="eposta" placeholder="ad.soyad@eposta.com" ____>
    Cevabı göster 
    <input type="email" id="eposta" name="eposta" placeholder="ad.soyad@eposta.com" required>

  3. Türleri beklenen girdilerle eşleştir

    text
    Ad soyad
    email
    E-posta adresi
    tel
    Telefon numarası
    password
    Gizli parola

Orta seviye bölümündeki tüm dersler

1 İleri metin etiketleri

  1. Abbr, cite ve time
  2. Code, kbd ve samp
  3. Sub ve sup
  4. Pre ve code bloğu
  5. Wbr ve bdi, bdo
  6. Özet - Teknik doküman

2 İleri bağlantılar

  1. Download bağlantıları
  2. Ping ve rel türleri
  3. Hreflang ve canonical
  4. Bağlantı erişilebilirliği
  5. Buton vs bağlantı
  6. Özet - Çok dilli menü

3 Proje: Landing sayfası

  1. Proje: Ürün landing sayfası
  2. Hero bölümü
  3. Özellik listesi
  4. Fiyat tablosu
  5. Proje sonu - Landing

4 İleri tablolar

  1. Col ve colgroup
  2. Scope ve headers
  3. Tablo erişilebilirliği
  4. Responsive tablolar
  5. Tablo görsel yapısı
  6. Özet - Karşılaştırma tablosu

5 Proje: Veri tablosu

  1. Proje: Veri tablosu
  2. Başlık ve caption
  3. Gövde verisi
  4. Toplam satırı
  5. Proje sonu - Veri tablosu

6 İleri form öğeleri

  1. Fieldset ve legend
  2. Datalist ve output
  3. Progress ve meter
  4. Input öznitelikleri
  5. Autocomplete ve inputmode
  6. Özet - Anket formu

7 Form doğrulama

  1. Required ve pattern
  2. Min, max ve step
  3. Minlength ve maxlength
  4. Type-based doğrulama
  5. Novalidate ve formnovalidate
  6. Özet - Kayıt formu doğrulama

8 Proje: İletişim formu

  1. Proje: İletişim formu
  2. Form iskeleti
  3. Kişi alanları
  4. Mesaj ve konu
  5. Proje sonu - İletişim formu

9 Anlamsal düzen

  1. Header yapısı
  2. Ana içerik
  3. Sidebar ve aside
  4. Footer yapısı
  5. Bölümleme kuralları
  6. Özet - Magazin sayfası

10 Erişilebilirlik temelleri

  1. ARIA temelleri
  2. Saklı başlık
  3. Skip link
  4. Form erişilebilirliği
  5. Tablo erişilebilirliği
  6. Özet - Erişilebilir kart

11 Proje: Site iskeleti

  1. Proje: Çok sayfalı site iskeleti
  2. Tutarlı header/footer
  3. Ana sayfa
  4. Hakkında ve iletişim
  5. Proje sonu - Site iskeleti

12 Orta seviye finali

  1. Meydan okuma - İleri metin
  2. Meydan okuma - Erişilebilir tablo
  3. Meydan okuma - Doğrulamalı form
  4. Meydan okuma - Anlamsal düzen
  5. Meydan okuma - Orta seviye projesi