HTML formlar, kullanıcıdan bilgi alıp bunu bir sunucuya göndermek için kullanılan en önemli araçlardan biridir. Bu yazıda, bir formun temel yapısını ve nasıl çalıştığını öğrenmek için adım adım ilerleyeceğiz.
1. Form Nedir ve Neden Kullanılır?
Form, kullanıcıdan alınan bilgilerin (örneğin metin, şifre, seçimler) bir sunucuya gönderilmesi için kullanılan bir HTML elementidir. Formlar, bir web sitesindeki etkileşimli özelliklerin temelini oluşturur.
Bir formun ana görevi şudur:
- Kullanıcı girişlerini toplamak: Örneğin, ad, e-posta, şifre gibi bilgiler.
- Verileri bir sunucuya göndermek: Formun gönderildiği sunucu, bu verileri işler.
2. Formun Temel Yapısı
Bir form, <form> etiketiyle tanımlanır. Ancak, <form> etiketi yalnızca bir kapsayıcıdır; kendi başına bir şey göstermez. Formun içinde çeşitli giriş elemanları (örneğin metin kutuları, butonlar) bulunur.
Temel Form Örneği
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Örneği</title>
</head>
<body>
<h1>Kullanıcı Bilgi Formu</h1>
<form action="/submit-data" method="GET">
<label for="name">Adınız:</label>
<input type="text" id="name" name="user_name">
<br>
<label for="email">E-posta:</label>
<input type="email" id="email" name="user_email">
<br>
<button type="submit">Gönder</button>
</form>
</body>
</html>
Çıktı
Kullanıcı, adını ve e-posta adresini yazabilir ve “Gönder” butonuna basarak verilerini /submit-data adresine gönderebilir.
3. Önemli Form Özellikleri
3.1. action
action özelliği, form verilerinin nereye gönderileceğini belirtir. Örneğin:
action="/submit-data": Veriler sunucuda /submit-data adresine gönderilir.
3.2. method
method özelliği, verilerin nasıl gönderileceğini belirtir. İki yaygın yöntem vardır:
- GET: Veriler URL’de görünür. Genellikle arama formları için kullanılır.
- POST: Veriler gizli olarak gönderilir. Daha güvenlidir ve büyük veri gönderiminde kullanılır.
4. Form Çalışma Mantığı
Bir form gönderildiğinde şu süreç gerçekleşir:
- Kullanıcı veriyi doldurur: Örneğin, adını ve e-posta adresini girer.
- Form sunucuya istekte bulunur: Belirtilen
action URL’sine bir HTTP isteği gönderilir.
- Sunucu isteği işler: Örneğin, bilgileri bir veritabanına kaydeder.
- Sunucu cevap döner: Başarılı bir mesaj veya başka bir sayfa döner.
GET ve POST Örnekleri
GET: URL şu şekilde görünür:
/submit-data?user_name=Ali&user_email=ali@example.com
POST: Veriler gizli gönderilir; URL değişmez.
5. Formların Kullanıldığı Alanlar
Formlar birçok farklı amaçla kullanılabilir:
- Arama formları: Kullanıcıların bir sitede arama yapmasını sağlar.
- Kayıt ve giriş formları: Kullanıcı bilgilerini alır ve doğrular.
- Anket formları: Farklı türde sorularla veri toplar.
Sonuç
Formlar, web uygulamalarında etkileşim sağlamak için vazgeçilmezdir. Formun temel yapısını anlamak, daha karmaşık uygulamalara geçmeden önce sağlam bir temel oluşturur. Bir sonraki adımda, form içindeki farklı giriş elemanlarını keşfedeceğiz.