Form Elemanları

<!-- Metin -->
<input type="text" placeholder="Adınız" minlength="2" maxlength="50">

<!-- E-posta (@ kontrolü otomatik) -->
<input type="email" placeholder="ornek@mail.com" required>

<!-- Şifre -->
<input type="password" minlength="8" placeholder="En az 8 karakter">

<!-- Telefon (mobilde sayı klavyesi) -->
<input type="tel" placeholder="05XX XXX XX XX">

<!-- Sayı -->
<input type="number" min="1" max="100" step="1" value="18">

<!-- Aralık (slider) -->
<input type="range" min="0" max="100" value="50">

<!-- Renk seçici -->
<input type="color" value="#6366f1">

<!-- Tarih -->
<input type="date">

<!-- Saat -->
<input type="time">

<!-- Dosya yükleme -->
<input type="file" accept="image/*" multiple>

<!-- Gizli alan -->
<input type="hidden" name="token" value="abc123">

<!-- Arama (temizle butonu çıkar) -->
<input type="search" placeholder="Ara...">

<!-- URL -->
<input type="url" placeholder="https://site.com">

<!-- Temel select -->
<select name="sehir">
  <option value="">Şehir seçin...</option>
  <option value="ankara">Ankara</option>
  <option value="istanbul" selected>İstanbul</option>
  <option value="izmir">İzmir</option>
</select>

<!-- Gruplu select -->
<select name="araba">
  <optgroup label="Alman Markaları">
    <option value="bmw">BMW</option>
    <option value="mercedes">Mercedes</option>
  </optgroup>
  <optgroup label="Japon Markaları">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

<!-- Çoklu seçim -->
<select name="diller" multiple size="4">
  <option value="php">PHP</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
  <option value="css">CSS</option>
</select>

<form action="kayit.php" method="POST" novalidate>

  <fieldset>
    <legend>Kişisel Bilgiler</legend>

    <label for="ad">Ad Soyad *</label>
    <input type="text" id="ad" name="ad"
           required
           minlength="3"
           maxlength="50"
           pattern="[A-Za-zÇĞİÖŞÜçğışöşü\s]+"
           title="Sadece harf girin">

    <label for="yas">Yaş *</label>
    <input type="number" id="yas" name="yas"
           min="18" max="100" required>

    <label for="eposta">E-posta *</label>
    <input type="email" id="eposta" name="eposta" required>

  </fieldset>

  <fieldset>
    <legend>Tercihler</legend>

    <!-- Radio butonlar -->
    <p>Cinsiyet:</p>
    <label>
      <input type="radio" name="cinsiyet" value="erkek"> Erkek
    </label>
    <label>
      <input type="radio" name="cinsiyet" value="kadin"> Kadın
    </label>

    <!-- Checkbox -->
    <label>
      <input type="checkbox" name="bülten" value="1">
      Bülten almak istiyorum
    </label>

    <label>
      <input type="checkbox" name="sartlar" required>
      Kullanım şartlarını kabul ediyorum *
    </label>
  </fieldset>

  <button type="submit">Kayıt Ol</button>
  <button type="reset">Temizle</button>

</form>