Form Doğrulama

Ders 28/45 · 6 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda kullanıcının eksik veya hatalı bilgi girmesini engelleyen, erişilebilir formlar yazabileceksiniz.

Doğrulama nitelikleri

HTML, form gönderilmeden önce bazı kontrolleri kendisi yapabilir:

required Alan boş bırakılamaz.
min ve max En küçük ve en büyük sayı veya tarih.
step Sayıların artış miktarı.
minlength ve maxlength En az ve en çok karakter sayısı.
pattern Değerin uyması gereken kalıp.

type="email" ve type="url" alanları da değerin biçimini kontrol eder.

Bu formu kendi dosyanıza kopyalayıp boş veya yanlış değerlerle göndermeyi deneyin. Hata mesajlarını yalnızca kendi dosyanızda görürsünüz, çünkü bu sitedeki önizleme kutuları form gönderimini engeller.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Doğrulama</title>
</head>
<body>
  <form>
    <p>
      <label for="ad">Ad (zorunlu):</label>
      <input type="text" id="ad" name="ad" required minlength="2">
    </p>
    <p>
      <label for="yas">Yaş (12-18):</label>
      <input type="number" id="yas" name="yas" min="12" max="18">
    </p>
    <p>
      <label for="posta">Posta kodu (5 rakam):</label>
      <input type="text" id="posta" name="posta" pattern="[0-9]{5}" title="5 rakam yazın">
    </p>
    <button type="submit">Gönder</button>
  </form>
</body>
</html>

pattern değeri bir düzenli ifadedir. Yukarıdaki [0-9]{5} tam olarak beş rakam demektir. Bu konuya şimdilik girmemize gerek yok.

`disabled` ve `readonly`

disabled Alan kullanılamaz ve değeri gönderilmez.
readonly Alan değiştirilemez ama değeri gönderilir.

Alanları gruplamak

fieldset birbiriyle ilgili alanları bir arada tutar, legend ise bu grubun başlığıdır. Ekran okuyucular grubun adını alanlarla birlikte okur.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fieldset</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>Sınıfınız</legend>
      <input type="radio" id="dokuz" name="sinif" value="9">
      <label for="dokuz">9</label>
      <input type="radio" id="on" name="sinif" value="10">
      <label for="on">10</label>
    </fieldset>
  </form>
</body>
</html>

Otomatik doldurma

autocomplete niteliği, tarayıcının ve şifre yöneticilerinin formu doğru doldurmasına yardım eder. Örnekler: autocomplete="name", autocomplete="email", autocomplete="tel".

HTML doğrulaması güvenlik değildir

Bu kontroller kullanıcıya kolaylık sağlar ama kötü niyetli birini durdurmaz. Geliştirici araçlarından required niteliğini silmek birkaç saniye sürer. Sunucuya gelen veriler her zaman sunucuda yeniden kontrol edilmelidir.

Sık yapılan hatalar

pattern için açıklama yazmamak. Kullanıcı neyi yanlış yaptığını anlamaz. title niteliğine beklenen biçimi yazın.

placeholder metnini kurallar için kullanmak. Yazmaya başlayınca kaybolur. Kuralları label içine veya alanın yanına yazın.

Değeri gönderilmesi gereken alanı disabled yapmak. Bu durumda readonly kullanın.

Soru 1

Alanın boş bırakılmasını engellemek için hangi nitelik kullanılır?

required :: Doğru.
readonly :: readonly alanı değiştirilemez yapar.
checked :: checked onay kutularını işaretler.

Soru 2

HTML doğrulaması varken sunucuda yeniden kontrol yapmak gerekir mi?

Hayır, HTML yeterlidir :: Tarayıcıdaki kontroller kolayca aşılabilir.
Evet, her zaman gerekir :: Doğru.
Yalnızca şifre alanlarında gerekir :: Bütün veriler kontrol edilmelidir.

Kulüp kayıt formu

Hedefteki formu yazın. Yalnızca body içine yazılacak kodu yazın. Bütün alanlar fieldset içinde olsun, başlığı Kulüp Kaydı olsun. Ad zorunlu olsun. Yaş 12 ile 18 arasında olsun. Kurallar kutusu zorunlu olsun. Niteliklerin sırası hedefle aynı olsun: type, id, name, ardından kurallar.

<form>
  <fieldset>
    <legend>Kulüp Kaydı</legend>
    <label for="ad">Ad:</label>
    <input type="text" id="ad" name="ad" required>
    <label for="yas">Yaş:</label>
    <input type="number" id="yas" name="yas" min="12" max="18">
    <input type="checkbox" id="kural" name="kural" required>
    <label for="kural">Kuralları okudum</label>
    <button type="submit">Kaydol</button>
  </fieldset>
</form>

Gerçek bir sitede kullanımı

Örnek bir uygulama olmakla beraber öğrenmediğiniz bilgiker içerir, merak etmeyin, hepsini CSS’te öğreneceğiz.

<html lang="tr"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Üniversite Tercih Ekranı</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 16px;
      color: #000;
      font-size: 12px;
    }

    h2 {
      color: navy;
      text-align: center;
      font-size: 24px;
      margin: 18px 0 16px;
    }

    h3 {
      color: darkgreen;
      font-size: 16px;
      margin: 14px 0;
    }

    .bilgi-notu {
      background-color: #ffffe0;
      border: 1px solid orange;
      padding: 7px;
      margin-bottom: 14px;
    }

    ul {
      padding-left: 28px;
      margin-top: 10px;
      margin-bottom: 14px;
    }

    .tercih-formu {
      width: 80%;
      margin: 0 auto 12px;
      border-collapse: collapse;
      background-color: white;
    }

    .tercih-formu th {
      background-color: navy;
      color: white;
      text-align: left;
      padding: 7px;
    }

    .tercih-formu td {
      border: 1px solid black;
      padding: 7px;
    }

    .tercih-formu tr:nth-child(even) td {
      background-color: #e5e5e5;
    }

    .tercih-formu input,
    .tercih-formu select,
    .tercih-formu textarea {
      width: 98%;
      box-sizing: border-box;
      padding: 5px;
      font-family: Arial, sans-serif;
      font-size: 10px;
    }

    .tercih-formu textarea {
      height: 58px;
      resize: both;
    }

    .buton-alani {
      text-align: center;
    }

    button {
      background-color: navy;
      color: white;
      border: none;
      padding: 6px 14px;
      cursor: pointer;
      font-size: 10px;
    }

    .ornek-tablo {
      width: 100%;
      border-collapse: collapse;
      background-color: white;
    }

    .ornek-tablo th {
      background-color: navy;
      color: white;
      text-align: left;
      padding: 7px;
    }

    .ornek-tablo td {
      border: 1px solid black;
      padding: 7px;
    }

    .ornek-tablo tr:nth-child(even) td {
      background-color: #e5e5e5;
    }

    hr {
      border: 0;
      border-top: 1px solid #aaa;
      margin-top: 6px;
    }
  </style>
</head>
<body>
  <h2>Üniversite Tercih Ekranı</h2>

  <div class="bilgi-notu">
    Üniversite adayları aşağıdaki formu doldurarak tercih etmek istedikleri bölümleri belirleyebilir.
  </div>

  <h3>Tercih Yaparken Dikkat Edilecekler</h3>
  <ul>
    <li>Başarı sıralamanızı kontrol ediniz.</li>
    <li>Üniversitelerin eğitim sürelerini inceleyiniz.</li>
    <li>İlgi alanlarınıza uygun bölümleri seçiniz.</li>
    <li>Tercih sıralamanızı dikkatli yapınız.</li>
  </ul>

  <h3>Öğrenci ve Tercih Bilgileri</h3>

  <form>
    <table class="tercih-formu">
      <tbody><tr>
        <th colspan="2">Öğrenci Bilgileri</th>
      </tr>
      <tr>
        <td>Ad Soyad:</td>
        <td><input type="text" placeholder="Adınızı ve soyadınızı giriniz"></td>
      </tr>
      <tr>
        <td>Öğrenci Numarası:</td>
        <td><input type="text" placeholder="Öğrenci numaranızı giriniz"></td>
      </tr>
      <tr>
        <td>Başarı Sıralaması:</td>
        <td><input type="number" placeholder="Örnek: 150000"></td>
      </tr>
      <tr>
        <th colspan="2">Üniversite Tercihleri</th>
      </tr>
      <tr>
        <td>1. Tercih:</td>
        <td>
          <select>
            <option value="">Bölüm seçiniz</option>
            <option>Bilgisayar Mühendisliği</option>
            <option>Yazılım Mühendisliği</option>
            <option>Bilgisayar Programcılığı</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>2. Tercih:</td>
        <td>
          <select>
            <option value="">Bölüm seçiniz</option>
            <option>Bilgisayar Mühendisliği</option>
            <option>Yazılım Mühendisliği</option>
            <option>Bilgisayar Programcılığı</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>3. Tercih:</td>
        <td>
          <select>
            <option value="">Bölüm seçiniz</option>
            <option>Bilgisayar Mühendisliği</option>
            <option>Yazılım Mühendisliği</option>
            <option>Bilgisayar Programcılığı</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Ek Açıklama:</td>
        <td><textarea placeholder="Açıklamanızı yazınız"></textarea></td>
      </tr>
      <tr>
        <td colspan="2" class="buton-alani">
          <button type="submit">Tercihleri Gönder</button>
          <button type="reset">Formu Temizle</button>
        </td>
      </tr>
    </tbody></table>
  </form>

  <h3>Örnek Üniversite Bölümleri</h3>
  <table class="ornek-tablo">
    <tbody><tr>
      <th>Üniversite</th>
      <th>Bölüm</th>
      <th>Öğrenim Süresi</th>
    </tr>
    <tr>
      <td>Kocaeli Üniversitesi</td>
      <td>Bilgisayar Mühendisliği</td>
      <td>4 Yıl</td>
    </tr>
    <tr>
      <td>Sakarya Üniversitesi</td>
      <td>Yazılım Mühendisliği</td>
      <td>4 Yıl</td>
    </tr>
    <tr>
      <td>Düzce Üniversitesi</td>
      <td>Bilgisayar Programcılığı</td>
      <td>2 Yıl</td>
    </tr>
  </tbody></table>

  <hr>
  <p>Bilgilendirme: Bu sayfa HTML ve CSS uygulaması amacıyla hazırlanmıştır. Form bilgileri veri tabanına kaydedilmez.</p>


</body></html>

Bu derste öğrendikleriniz

required, min, max, minlength, maxlength ve pattern değerleri kontrol eder.
fieldset ve legend ilgili alanları gruplar.
Tarayıcı kontrolleri kolaylık içindir, güvenlik için sunucu kontrolü gerekir.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.