- Katılım
- 19 Ocak 2024
- Mesajlar
- 160
- Tepkime puanı
- 11
- Puanları
- 18
- Ödüller
- 6
HTML'de Formlar ve Kullanımı
HTML, kullanıcı ile web sayfası arasındaki etkileşimi sağlamak için form yapısını sunar. Formlar, veri toplamak, giriş almak ve bunları bir sunucuya göndermek için kullanılır. Bu yazıda, HTML formlarının temel yapısını ve kullanımlarını inceleyeceğiz.
HTML Form Yapısı
Bir HTML formu, `<form>` etiketi ile tanımlanır ve şu temel bileşenlere sahiptir:
- action: Verilerin gönderileceği URL'yi belirtir.
- method: Verilerin nasıl gönderileceğini belirler (GET veya POST).
HTML:
<form action="/submit" method="POST">
<label for="isim">İsim:</label>
<input type="text" id="isim" name="isim" required>
<br>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">Gönder</button>
</form>Bu örnek, kullanıcının isim ve e-posta bilgilerini girebileceği bir form oluşturur. Veriler, POST yöntemiyle `/submit` adresine gönderilir.
HTML Form Elemanları
Formlarda kullanılabilen çeşitli giriş türleri vardır. İşte bazı yaygın form elemanları:
1. **Metin Kutusu**: Kullanıcıdan metin almak için kullanılır.
HTML:
<input type="text" name="isim" placeholder="Adınızı girin">2. **Parola Kutusu**: Kullanıcının şifre girmesi için kullanılır.
HTML:
<input type="password" name="sifre" placeholder="Şifrenizi girin">3. **Onay Kutusu**: Kullanıcıdan bir veya daha fazla seçeneği seçmesini ister.
HTML:
<label><input type="checkbox" name="hobi" value="spor"> Spor</label>
<label><input type="checkbox" name="hobi" value="müzik"> Müzik</label>4. **Radyo Düğmesi**: Kullanıcının yalnızca bir seçenek seçmesine izin verir.
HTML:
<label><input type="radio" name="cinsiyet" value="erkek"> Erkek</label>
<label><input type="radio" name="cinsiyet" value="kadın"> Kadın</label>5. **Açılır Menü**: Birden fazla seçenek arasından seçim yapma imkanı sunar.
HTML:
<select name="şehir">
<option value="istanbul">İstanbul</option>
<option value="ankara">Ankara</option>
<option value="izmir">İzmir</option>
</select>6. **Dosya Yükleme**: Kullanıcının dosya seçip yüklemesine izin verir.
HTML:
<input type="file" name="dosya">7. **Gönderme Düğmesi**: Formu göndermek için kullanılır.
HTML:
<button type="submit">Formu Gönder</button>HTML Formlarının Kullanım Alanları
HTML formları birçok alanda kullanılır:
- Kullanıcı kayıt ve giriş işlemleri
- Anket ve veri toplama
- E-ticaret sitelerinde sipariş formları
- İletişim sayfalarında geri bildirim formları
Sonuç
HTML formları, web sayfalarında kullanıcı ile etkileşim sağlamak için vazgeçilmez bir araçtır. Doğru kullanıldığında kullanıcı dostu ve işlevsel formlar oluşturabilirsiniz. Form elemanlarını ve özelliklerini öğrenerek, web projelerinizde ihtiyaç duyulan formları kolayca oluşturabilirsiniz.
