Formlar, kullanıcı etkileşimleri için oldukça önemlidir. Bu yazıda, checkbox, radio button, select (dropdown), textarea, ve range (kaydırma çubuğu) gibi form elemanlarını kullanmayı öğreneceğiz. Bu elemanlar, form verilerini daha esnek ve anlamlı bir şekilde toplamak için kullanılır.
1. Checkbox (Onay Kutusu)
Checkbox, birden fazla seçenek arasından bir veya birkaçını seçmek için kullanılır. Varsayılan olarak, seçili değildir. Ancak checked özelliğiyle başlangıçta seçili hale getirilebilir.
Örnek:
<form action="/submit">
<input type="checkbox" id="agree" name="agree_terms">
<label for="agree">Şartları ve koşulları kabul ediyorum</label>
<button type="submit">Gönder</button>
</form>
Açıklama:
id ve for: Label ile input arasında bir ilişki kurar.checked: Checkbox’ın başlangıçta seçili olmasını sağlar.
2. Radio Button (Seçim Düğmesi)
Radio button, bir grup içerisinden yalnızca bir seçenek belirlemek için kullanılır. Aynı name değerine sahip radio butonlar bir grup oluşturur.
Örnek:
<form action="/submit">
<p>Gömlek Bedeni:</p>
<input type="radio" id="small" name="size" value="S">
<label for="small">Small</label>
<input type="radio" id="medium" name="size" value="M">
<label for="medium">Medium</label>
<input type="radio" id="large" name="size" value="L">
<label for="large">Large</label>
<button type="submit">Seçimi Gönder</button>
</form>
Açıklama:
name: Aynı grup içindeki radio butonların birbirleriyle bağlantılı olmasını sağlar.value: Seçilen değerin sunucuya gönderileceği etikettir.- Yalnızca bir seçenek seçilebilir.
3. Select (Dropdown Menüsü)
Dropdown menüsü, çoklu seçenekler arasından bir seçim yapmak için kullanılır. <select> elemanı, <option> elemanlarını içerir.
Örnek:
<form action="/submit">
<label for="meal">Yemek Seçimi:</label>
<select id="meal" name="meal">
<option value="">Lütfen bir yemek seçin</option>
<option value="fish">Balık</option>
<option value="vegetarian">Vejetaryen</option>
<option value="steak">Biftek</option>
</select>
<button type="submit">Gönder</button>
</form>
Açıklama:
<option>: Seçenekleri tanımlar.selected: Varsayılan olarak seçili olan seçeneği belirtir.
4. Textarea (Metin Alanı)
Textarea, birden fazla satırlık metin girişi için kullanılır. <textarea> elemanının açılış ve kapanış etiketleri arasında varsayılan bir metin eklenebilir.
Örnek:
<form action="/submit">
<label for="comments">Yorumlarınız:</label>
<textarea id="comments" name="comments" rows="4" cols="50">Varsayılan metin</textarea>
<button type="submit">Gönder</button>
</form>
Açıklama:
rows: Metin alanının yüksekliğini belirler.cols: Metin alanının genişliğini belirler.- Etiketler arasında yer alan metin, varsayılan içerik olarak görüntülenir.
5. Range (Kaydırma Çubuğu)
Range, bir minimum ve maksimum değer arasında kaydırılarak seçim yapılmasına olanak tanır. Genellikle sayısal bir girdiyi görsel olarak ayarlamak için kullanılır.
Örnek:
<form action="/submit">
<label for="volume">Ses Seviyesi:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">
<output id="volumeOutput">50</output>
<button type="submit">Gönder</button>
</form>
Açıklama:
min ve max: Girişin minimum ve maksimum değerlerini belirler.step: Kaydırma çubuğunun hareket aralığını belirler.output: Kullanıcının seçtiği değeri gerçek zamanlı olarak göstermek için kullanılır.
Örnek Tüm Form
Aşağıda tüm bu elemanları içeren bir örnek form verilmiştir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form Elemanları</title>
</head>
<body>
<h1>Form Örnekleri</h1>
<form action="/submit" method="GET">
<h2>Checkbox</h2>
<input type="checkbox" id="agree" name="agree_terms">
<label for="agree">Şartları kabul ediyorum</label>
<h2>Radio Button</h2>
<p>Cinsiyet:</p>
<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>
<h2>Select</h2>
<label for="city">Şehir:</label>
<select id="city" name="city">
<option value="istanbul">İstanbul</option>
<option value="ankara">Ankara</option>
<option value="izmir">İzmir</option>
</select>
<h2>Textarea</h2>
<label for="feedback">Geri Bildirim:</label>
<textarea id="feedback" name="feedback" rows="4" cols="40"></textarea>
<h2>Range</h2>
<label for="rating">Değerlendirme:</label>
<input type="range" id="rating" name="rating" min="1" max="5" step="1">
<output id="ratingOutput">3</output>
<br><br>
<button type="submit">Formu Gönder</button>
</form>
</body>
</html>
Sonuç
Checkbox, radio button, select, textarea ve range gibi form elemanları, kullanıcılarla etkili bir etkileşim kurmak için önemlidir. Bu elemanlar, kullanıcıların doğru ve düzenli veri girişi yapmasına olanak tanır. Form tasarımı sırasında etiketler, varsayılan değerler ve isimlendirme kurallarına dikkat ederek kullanıcı deneyimini artırabilirsiniz.