Form Yapısının Temel Öğeleri
2.. <form> Etiketi
Formun temel kapsayıcı elemanıdır. Kullanım:
action: Verilerin gönderileceği adres.
method: Gönderim yöntemi (GET veya POST).
Örnek:
<form action="[Link]" method="post">
<!-- Form elemanları buraya gelir -->
</form>
3. <input> Türleri ve Özellikleri
Genel Özellikler
name: Form verisini tanımlayan anahtar.
id: Eleman için benzersiz kimlik.
placeholder: İpucu metni.
required: Zorunlu alan.
readonly: Yalnızca okunabilir alan.
disabled: Kullanıcı girişine kapalı alan.
pattern: Veri doğrulama için düzenli ifade
3.1. Metin Girişi Türleri
Tür Açıklama Örnek
text Serbest metin giriş alanı. <input type="text" name="ad" placeholder="Adınızı girin">
password Girilen karakterleri gizleyen bir şifre alanı. <input type="password" name="sifre">
email E-posta formatı doğrulama özelliği olan alan. <input type="email" name="email" placeholder="ornek@[Link]">
Telefon numarası için giriş alanı. pattern ile
tel <input type="tel" name="telefon" pattern="\d{3}-\d{3}-\d{4}">
format zorunlu hale getirilebilir.
url URL formatı doğrulama özelliği olan giriş alanı. <input type="url" name="website" placeholder="[Link]
3.2. Sayı ve Tarih Girişi Türleri
Tür Açıklama Örnek
number Sayı giriş alanı. min, max, step ile sınırlandırılabilir. <input type="number" name="yas" min="18" max="99" step="1">
range Kaydırıcı ile değer seçimi. <input type="range" name="ses" min="0" max="100">
date Takvim arayüzü ile tarih seçimi. <input type="date" name="dogumtarihi">
time Saat seçimi için giriş alanı. <input type="time" name="saat">
datetime-local Tarih ve saat kombinasyonunu seçmek için giriş alanı. <input type="datetime-local" name="tarihvesaat">
month Ay ve yıl seçimi için giriş alanı. <input type="month" name="ay">
week Yılın haftasını seçmek için giriş alanı. <input type="week" name="hafta">
3.3. Diğer Giriş Türleri
Tür Açıklama Örnek
color Renk seçici bir giriş alanı. <input type="color" name="renk" value="#ff0000">
checkbox Çoklu seçim yapılabilen onay kutuları. <input type="checkbox" name="abonelik" value="evet">
Aynı gruptaki elemanlardan sadece birinin seçilebileceği radyo
radio <input type="radio" name="cinsiyet" value="erkek"> Erkek
düğmeleri.
file Dosya yüklemek için giriş alanı. <input type="file" name="belge">
hidden Kullanıcıya görünmeyen, ancak form ile gönderilen gizli alan. <input type="hidden" name="id" value="12345">
submit Formu göndermek için buton. <input type="submit" value="Gönder">
reset Form girişlerini sıfırlayan buton. <input type="reset" value="Temizle">
<input type="button" value="Tıklayın" onclick="alert('Butona
button JavaScript ile kullanılabilir bir buton.
tıklandı!')">
4. Diğer Form Elemanları
Eleman Açıklama Örnek
<textarea> Çok satırlı metin giriş alanı sağlar. <textarea name="mesaj" rows="4" cols="40">Mesajınız...</textarea>
<select> Açılır menü (dropdown). <select name="cinsiyet"><option>Erkek</option><option>Kadın</option></select>
<optgroup> <select> içinde seçenek grupları oluşturur. <optgroup label="Renkler"><option>Kırmızı</option></optgroup>
<fieldset> Formdaki öğeleri gruplamak için kullanılır. <fieldset><legend>Kişisel Bilgiler</legend>Ad: <input type="text"></fieldset>
<legend> <fieldset> için başlık belirler. <legend>Bilgiler</legend>
<datalist> Önerilen giriş seçenekleri sunar (otomatik tamamlama). <input list="sehirler"><datalist id="sehirler"><option value="İstanbul"></datalist>
<output> Hesaplama veya işlem sonuçlarını göstermek için kullanılır. <output name="sonuc">Sonuç burada</output>
<progress> Bir işlemdeki ilerlemeyi temsil eder. <progress value="50" max="100"></progress>
<meter> Bir değerin belirli bir aralık içindeki durumu. <meter min="0" max="100" value="75"></meter>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detaylı Kayıt Formu (Labelsiz)</title>
</head>
<body>
<h1>Kayıt Formu</h1>
<p>Lütfen aşağıdaki formu doldurarak kayıt olunuz.</p>
<form action="[Link]" method="post"
<input type="text" name="fullname" placeholder="Adınız ve soyadınız"
required pattern="[A-Za-z\s]{2,50}"
title="Adınız sadece harflerden oluşmalı ve en az 2 karakter olmalıdır."><br><br>
<input type="email" name="email" placeholder="E-posta adresiniz" required><br><br>
<input type="password" name="password" placeholder="Şifreniz (8 karakter, 1 büyük harf, 1 sayı)"
pattern="(?=.*\d)(?=.*[A-Z]).{8,}"
title="Şifreniz en az 8 karakter uzunluğunda olmalı, bir büyük harf ve bir sayı içermelidir."
required><br><br>
<input type="date" name="birthdate" required><br><br>
<input type="tel" name="phone" placeholder="Telefon (555-555-5555)"
pattern="\d{3}-\d{3}-\d{4}"
title="Telefon numarası 555-555-5555 formatında olmalıdır."><br><br>
<input type="radio" name="gender" value="male" required> Erkek<br>
<input type="radio" name="gender" value="female"> Kadın<br>
<input type="radio" name="gender" value="other"> Diğer<br><br>
<input type="checkbox" name="interests" value="coding"> Kodlama<br>
<input type="checkbox" name="interests" value="music"> Müzik<br>
<input type="checkbox" name="interests" value="sports"> Spor<br><br>
<input type="file" name="profile-picture" accept="image/*"><br><br>
<textarea name="about" rows="4" cols="50" placeholder="Kendinizi kısaca
tanıtın..."></textarea><br><br>
<select name="city" required>
<option value="">Yaşadığınız Şehir</option>
<option value="istanbul">İstanbul</option>
<option value="ankara">Ankara</option>
<option value="izmir">İzmir</option>
<option value="antalya">Antalya</option>
</select><br><br>
<input type="color" name="favorite-color" value="#0000ff"><br><br>
<input type="file" name="cv" accept=".pdf,.doc,.docx"><br><br>
<button type="submit">Kayıt Ol</button>
<button type="reset">Formu Temizle</button>
</form>
</body>
</html>