HTML Formlarına Giriş
Formlar, web sitelerinin kullanıcılardan bilgi toplama aracıdır. Kayıt formu, iletişim formu, arama kutusu gibi tüm etkileşimli elementler HTML formları ile oluşturulur.
Form Etiketi (<form>)
Her form <form> etiketi ile başlar ve bitirilir:
<form action="/submit" method="POST">
<!-- Form elemanları buraya gelir -->
</form>Form Özellikleri
action: Form verilerinin gönderileceği URLmethod: Veri gönderme yöntemi (GET veya POST)enctype: Veri kodlama türü (dosya yükleme için gerekli)
<form
action="/contact"
method="POST"
enctype="multipart/form-data">
<!-- Form içeriği -->
</form>Input Etiketi ve Türleri
Temel Input Türleri
Metin Girişi
<input type="text" name="username" placeholder="Kullanıcı adınız">Şifre Girişi
<input type="password" name="password" placeholder="Şifreniz">E-posta Girişi
<input type="email" name="email" placeholder="[email protected]">Numara Girişi
<input type="number" name="age" min="18" max="100" step="1">Telefon Girişi
<input type="tel" name="phone" placeholder="0555 123 45 67">URL Girişi
<input type="url" name="website" placeholder="https://example.com">Tarih ve Zaman Input’ları
<!-- Tarih seçici -->
<input type="date" name="birthdate">
<!-- Zaman seçici -->
<input type="time" name="meeting-time">
<!-- Tarih ve zaman -->
<input type="datetime-local" name="appointment">
<!-- Ay seçici -->
<input type="month" name="birth-month">
<!-- Hafta seçici -->
<input type="week" name="project-week">Seçim Input’ları
Checkbox (Çoklu Seçim)
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="newsletter">E-bülten almak istiyorum</label>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Kullanım şartlarını kabul ediyorum</label>Radio Button (Tekli Seçim)
<input type="radio" id="male" name="gender" value="male">
<label for="male">Erkek</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Kadın</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Diğer</label>Dosya ve Medya Input’ları
Dosya Yükleme
<input type="file" name="resume" accept=".pdf,.doc,.docx">Çoklu Dosya Yükleme
<input type="file" name="photos" multiple accept="image/*">Resim Yakalama
<input type="file" name="photo" accept="image/*" capture="camera">Özel Input Türleri
Renk Seçici
<input type="color" name="theme-color" value="#3498db">Aralık Seçici (Range)
<input type="range" name="volume" min="0" max="100" value="50">Arama Kutusu
<input type="search" name="query" placeholder="Arama yapın...">Label Etiketi
Her input için label kullanmak erişilebilirlik açısından kritiktir:
<!-- İki farklı kullanım -->
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username">
<!-- Veya -->
<label>
E-posta:
<input type="email" name="email">
</label>Ipucu
Erişilebilirlik İpucu: Label kullanımı ekran okuyucular için önemlidir ve kullanıcı deneyimini artırır. Label’a tıklandığında ilgili input aktif olur.
Select ve Option (Açılır Liste)
Basit Açılır Liste
<label for="country">Ülke:</label>
<select id="country" name="country">
<option value="">Ülke seçin</option>
<option value="tr">Türkiye</option>
<option value="us">Amerika Birleşik Devletleri</option>
<option value="de">Almanya</option>
<option value="fr">Fransa</option>
</select>Çoklu Seçim
<label for="skills">Yetenekler:</label>
<select id="skills" name="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="python">Python</option>
</select>Gruplu Seçenekler
<label for="course">Kurs:</label>
<select id="course" name="course">
<optgroup label="Frontend">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Backend">
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="nodejs">Node.js</option>
</optgroup>
</select>Textarea (Çok Satırlı Metin)
<label for="message">Mesajınız:</label>
<textarea
id="message"
name="message"
rows="5"
cols="40"
placeholder="Mesajınızı buraya yazın..."
maxlength="500">
</textarea>Form Butonları
Submit Butonu
<input type="submit" value="Gönder">
<!-- veya -->
<button type="submit">Formu Gönder</button>Reset Butonu
<input type="reset" value="Temizle">
<!-- veya -->
<button type="reset">Formu Temizle</button>Normal Buton
<input type="button" value="Tıkla">
<!-- veya -->
<button type="button">Özel İşlem</button>Fieldset ve Legend (Form Gruplama)
İlgili form elemanlarını gruplamak için:
<form>
<fieldset>
<legend>Kişisel Bilgiler</legend>
<label for="name">Ad Soyad:</label>
<input type="text" id="name" name="name">
<label for="email">E-posta:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>İletişim Tercihleri</legend>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">E-bülten al</label>
<input type="checkbox" id="sms" name="sms">
<label for="sms">SMS bildirimleri al</label>
</fieldset>
</form>Form Validasyonu (Doğrulama)
HTML5 Doğrulama Özellikleri
Required (Zorunlu Alan)
<input type="text" name="username" required>
<input type="email" name="email" required>Min/Max Değerler
<input type="number" name="age" min="18" max="100" required>
<input type="date" name="startdate" min="2025-01-01">Pattern (Düzenli İfade)
<!-- Türk telefon numarası -->
<input
type="tel"
name="phone"
pattern="[0-9]{4} [0-9]{3} [0-9]{2} [0-9]{2}"
placeholder="0555 123 45 67">
<!-- Sadece harfler -->
<input
type="text"
name="name"
pattern="[A-Za-zÇçĞğİıÖöŞşÜü\s]+"
title="Sadece harfler girebilirsiniz">Uzunluk Kısıtlamaları
<input type="text" name="username" minlength="3" maxlength="20">
<textarea name="comment" maxlength="500"></textarea>Özel Doğrulama Mesajları
<input
type="email"
name="email"
required
title="Geçerli bir e-posta adresi girin"
oninvalid="this.setCustomValidity('Lütfen geçerli bir e-posta girin')"
oninput="this.setCustomValidity('')">Kapsamlı Form Örneği
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kayıt Formu</title>
</head>
<body>
<h1>Üyelik Kayıt Formu</h1>
<form action="/register" method="POST" enctype="multipart/form-data">
<!-- Kişisel Bilgiler -->
<fieldset>
<legend>Kişisel Bilgiler</legend>
<div>
<label for="firstName">Ad:</label>
<input type="text" id="firstName" name="firstName" required minlength="2">
</div>
<div>
<label for="lastName">Soyad:</label>
<input type="text" id="lastName" name="lastName" required minlength="2">
</div>
<div>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{4} [0-9]{3} [0-9]{2} [0-9]{2}"
placeholder="0555 123 45 67">
</div>
<div>
<label for="birthdate">Doğum Tarihi:</label>
<input type="date" id="birthdate" name="birthdate" max="2007-01-01">
</div>
<div>
<label>Cinsiyet:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Erkek</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Kadın</label>
</div>
</fieldset>
<!-- Hesap Bilgileri -->
<fieldset>
<legend>Hesap Bilgileri</legend>
<div>
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username"
required minlength="3" maxlength="20"
pattern="[a-zA-Z0-9_]+"
title="Sadece harfler, rakamlar ve alt çizgi kullanın">
</div>
<div>
<label for="password">Şifre:</label>
<input type="password" id="password" name="password"
required minlength="8"
title="En az 8 karakter olmalı">
</div>
<div>
<label for="confirmPassword">Şifre Tekrar:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
</div>
</fieldset>
<!-- Profil Bilgileri -->
<fieldset>
<legend>Profil Bilgileri</legend>
<div>
<label for="avatar">Profil Fotoğrafı:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">
</div>
<div>
<label for="bio">Hakkınızda:</label>
<textarea id="bio" name="bio" rows="4" cols="50"
maxlength="500" placeholder="Kendinizi tanıtın..."></textarea>
</div>
<div>
<label for="website">Web Siteniz:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
</div>
<div>
<label for="country">Ülke:</label>
<select id="country" name="country" required>
<option value="">Ülke seçin</option>
<option value="tr">Türkiye</option>
<option value="us">ABD</option>
<option value="de">Almanya</option>
<option value="fr">Fransa</option>
</select>
</div>
</fieldset>
<!-- İlgi Alanları -->
<fieldset>
<legend>İlgi Alanları</legend>
<input type="checkbox" id="tech" name="interests" value="technology">
<label for="tech">Teknoloji</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Spor</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Müzik</label>
<input type="checkbox" id="travel" name="interests" value="travel">
<label for="travel">Seyahat</label>
</fieldset>
<!-- Anlaşmalar -->
<fieldset>
<legend>Anlaşmalar</legend>
<div>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">
<a href="/terms" target="_blank">Kullanım şartlarını</a> kabul ediyorum
</label>
</div>
<div>
<input type="checkbox" id="privacy" name="privacy" required>
<label for="privacy">
<a href="/privacy" target="_blank">Gizlilik politikasını</a> kabul ediyorum
</label>
</div>
<div>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">E-bülten almak istiyorum</label>
</div>
</fieldset>
<!-- Form Butonları -->
<div>
<button type="submit">Kayıt Ol</button>
<button type="reset">Formu Temizle</button>
</div>
</form>
</body>
</html>Modern Form Teknikleri
Datalist (Önerilerde Bulunma)
<label for="city">Şehir:</label>
<input type="text" id="city" name="city" list="cities">
<datalist id="cities">
<option value="İstanbul">
<option value="Ankara">
<option value="İzmir">
<option value="Bursa">
<option value="Antalya">
</datalist>Progress ve Meter
<!-- İlerleme çubuğu -->
<label for="progress">Form tamamlanma:</label>
<progress id="progress" value="70" max="100">%70</progress>
<!-- Ölçüm göstergesi -->
<label for="score">Puan:</label>
<meter id="score" value="85" min="0" max="100" optimum="90">85/100</meter>Output Etiketi
<form oninput="total.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" name="a" value="0"> +
<input type="number" id="b" name="b" value="0"> =
<output name="total" for="a b">0</output>
</form>Form Erişilebilirliği
En İyi Uygulamalar
- Her input için label kullanın
- Fieldset ile gruplandırın
- Required alanları belirtin
- Hata mesajlarını açık yazın
- Klavye navigasyonunu destekleyin
Örnek Erişilebilir Form
<form>
<fieldset>
<legend>İletişim Formu</legend>
<div>
<label for="name">Ad Soyad <span aria-label="zorunlu">*</span></label>
<input type="text" id="name" name="name" required
aria-describedby="name-error">
<div id="name-error" role="alert" aria-live="polite">
<!-- Hata mesajı buraya gelir -->
</div>
</div>
<div>
<label for="email">E-posta <span aria-label="zorunlu">*</span></label>
<input type="email" id="email" name="email" required
aria-describedby="email-help email-error">
<div id="email-help">Geçerli bir e-posta adresi girin</div>
<div id="email-error" role="alert" aria-live="polite">
<!-- Hata mesajı buraya gelir -->
</div>
</div>
</fieldset>
</form>Özet ve Ödev
Bu bölümde öğrendikleriniz:
✅ Form yapısı ve temel etiketler
✅ Çeşitli input türleri ve kullanımları
✅ Form validasyonu ve doğrulama
✅ Erişilebilir form tasarımı
✅ Modern form teknikleri
Pratik Ödev
-
İletişim formu oluşturun:
- Ad, soyad, e-posta, telefon alanları
- Konu seçimi (select)
- Mesaj alanı (textarea)
- Form validasyonu ekleyin
-
Kayıt formu oluşturun:
- Kullanıcı bilgileri
- Şifre kontrolü
- Çoklu seçim alanları
- Dosya yükleme
- Anlaşma onayları
Sonraki bölümde HTML semantik yapısı ve modern HTML5 özelliklerini öğreneceksiniz!