HTML Formlar
HTML formları, kullanıcıların veri girişi yapabilmesini sağlamak için kullanılan önemli bir bileşendir. Web sayfalarında kullanıcıdan bilgi toplamak, geri bildirim almak, kayıt işlemleri yapmak ve diğer etkileşimli işlemleri gerçekleştirmek için yaygın olarak kullanılır.
HTML formu, <form> etiketi ile başlar ve kullanıcıdan alınacak verilerin türüne göre çeşitli bileşenleri içerir.
<form action="form_veri_gonderilecek_url" method="post">- GET: Veriler URL üzerinden gönderilir (genellikle arama formları için kullanılır).
- POST: Veriler HTTP isteği gövdesinde gönderilir (genellikle kayıt ve giriş işlemleri için kullanılır).
- Metin Kutusu (<input type=”text”>): Kullanıcıdan metin girişi almak için kullanılır.
<label for="ad">Ad:</label>
<input type="text" id="ad" name="ad">2. Parola Kutusu (<input type=”password”>): Şifre girişi için kullanılır. Girişi gizler.
<label for="sifre">Şifre:</label> <br>
<input type="password" id="sifre" name="sifre">3. Gönderim Düğmesi (<input type=”submit”>): Formu göndermek için kullanılır.
<input type="submit" value="Kaydet">Örnek: Kullanıcı adı ve şifre giriş ekranı ile gönder butonu bulunan bir form giriş alanı hazırlayalım.
<html>
<head>
<title>Kullanıcı Giriş Ekranı</title>
</head>
<body>
<h2>Giriş Yap</h2>
<form action="/giris" method="post">
<label for="username">Kullanıcı Adı:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Şifre:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Giriş">
</form>
</body>
</html>4. Seçim Kutusu (<select>): Kullanıcının birden fazla seçenek arasından seçim yapmasını sağlar.
<label for="sehir">Şehir:</label>
<select id="sehir" name="sehir">
<option value="istanbul">İstanbul</option>
<option value="ankara">Ankara</option>
<option value="izmir">İzmir</option>
</select>5. Onay Kutusu (<input type=”checkbox”>): Kullanıcının bir seçeneği seçip seçmediğini belirtmesi için kullanılır.
<label for="kabul">Kabul ediyorum:</label>
<input type="checkbox" id="kabul" name="kabul">6. Radio Düğmeleri (<input type=”radio”>): Kullanıcının bir grup seçenekten sadece birini seçmesine olanak tanır.
<label for="cinsiyet">Cinsiyet:</label> <br>
<label for="cinsiyet_erkek">Erkek</label>
<input type="radio" id="cinsiyet_erkek" name="cinsiyet" value="erkek"><label for="cinsiyet_kadin">Kadın</label>
<input type="radio" id="cinsiyet_kadin" name="cinsiyet" value="kadin">7. Dosya Yükleme (<input type=”file”>): Kullanıcının dosya yüklemesine izin verir.
<label for="dosya">Dosya Yükle:</label>
<input type="file" id="dosya" name="dosya">