HTML’de Form Elementi
HTML form elementleri, web sayfalarında kullanıcıdan bilgi almak için kullanılan temel yapıları oluşturur. Bir kayıt formundan, arama çubuğuna kadar kullanıcı etkileşimi gerektiren pek çok yerde formlar kullanılır. Formlar sayesinde kullanıcıdan alınan bilgiler, genellikle bir sunucuya gönderilir ve işlenir. Yani demem o ki, HTML’de form elementleri, kullanıcı girdilerini düzenlemek ve toplamak için vazgeçilmezdir.
HTML form oluşturmak için kullanılan temel etiketler ve görevleri aşağıda listelenmiştir:
<form>: Form Kapsayıcı Etiketi- Görevi: Form elemanlarını kapsar ve verilerin nasıl gönderileceğini belirler.
- Özellikler:
action: Verinin gönderileceği URL.method: Veri gönderme yöntemi (GETveyaPOST).target: Yanıtın görüntüleneceği yer (örneğin,_blank).name: Formu tanımlamak için bir isim.
<input>: Kullanıcı Girdileri için Temel Etiket- Görevi: Kullanıcıdan bilgi almak için farklı giriş türleri sağlar.
- Özellikler ve Türleri:
type="text": Tek satırlık metin girişi.type="password": Şifre girişi, metin gizlenir.type="email": E-posta adresi girişi.type="number": Sayısal veri girişi.type="checkbox": Çoklu seçim yapmayı sağlar.type="radio": Tek seçenekli seçim yapmayı sağlar.type="submit": Form gönderme butonu.type="reset": Formu sıfırlama butonu.type="file": Dosya yükleme için kullanılır.type="hidden": Görünmeyen veri taşımak için kullanılır.
<textarea>: Çok Satırlı Metin Girişi- Görevi: Kullanıcıdan birden fazla satırdan oluşan metin almak için kullanılır.
- Özellikler:
rows: Metin alanının satır sayısını belirler.cols: Metin alanının sütun genişliğini ayarlar.
<select>ve<option>: Açılır Liste Elemanları- Görevi: Kullanıcının belirli bir liste içinden seçim yapmasını sağlar.
<option>: Liste içindeki her bir seçeneği temsil eder.- Özellikler:
value: Seçeneğin değeri.selected: Varsayılan olarak seçilen değer.
<button>: Etkileşim Sağlayan Düğme- Görevi: Kullanıcıya tıklama işlevi sunar.
- Özellikler:
type="submit": Formu gönderir.type="reset": Formu sıfırlar.type="button": Genel bir düğme olarak kullanılır, genellikle JavaScript ile etkileşime geçer.
<label>: Form Elemanlarını Açıklayan Etiket- Görevi: Form elemanlarını tanımlamak için kullanılır ve kullanıcı deneyimini artırır.
- Özellikler:
for: Bağlandığı giriş elemanınıniddeğerini belirtir.
<fieldset>ve<legend>: Form Grupları- Görevi: Form içindeki elemanları gruplar ve açıklama ekler.
<legend>: Grup başlığını belirtir.
<datalist>: Giriş Alanı İçin Öneri Listesi- Görevi: Kullanıcıya bir giriş alanında öneri listesi sunar.
- Kullanım Şekli:
<input>ile birlikte çalışır ve<option>elemanlarını içerir.
<output>: Hesaplama Sonuçlarını Gösterme- Görevi: Form işlemleri sırasında elde edilen sonuçları gösterir.
- Özellikler:
for: İlgili giriş elemanlarınıniddeğerlerini belirtir.
<progress>ve<meter>: İlerleme ve Değer Gösterimi<progress>: İşlem ilerlemesini gösterir (örneğin, yükleme çubuğu).<meter>: Bir değerin aralık içindeki oranını gösterir (örneğin, başarı oranı).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form Etiketleri Örneği</title>
</head>
<body>
<h1>Kapsamlı Form Örneği</h1>
<!-- Form başlangıcı -->
<form action="/submit" method="POST">
<!-- Kullanıcı adı girişi -->
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username" placeholder="Adınızı girin" required>
<br><br>
<!-- Şifre girişi -->
<label for="password">Şifre:</label>
<input type="password" id="password" name="password" placeholder="Şifrenizi girin" required>
<br><br>
<!-- E-posta adresi -->
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" placeholder="E-posta adresinizi girin" required>
<br><br>
<!-- Çok satırlı metin girişi -->
<label for="about">Hakkınızda:</label>
<textarea id="about" name="about" rows="4" cols="50" placeholder="Kendinizi tanıtın"></textarea>
<br><br>
<!-- Cinsiyet seçimi (radyo düğmeleri) -->
<fieldset>
<legend>Cinsiyet:</legend>
<label>
<input type="radio" name="gender" value="male" required> Erkek
</label>
<label>
<input type="radio" name="gender" value="female"> Kadın
</label>
</fieldset>
<br>
<!-- İlgi alanları seçimi (onay kutuları) -->
<fieldset>
<legend>İlgi Alanları:</legend>
<label>
<input type="checkbox" name="interests" value="coding"> Kodlama
</label>
<label>
<input type="checkbox" name="interests" value="music"> Müzik
</label>
<label>
<input type="checkbox" name="interests" value="sports"> Spor
</label>
</fieldset>
<br>
<!-- Açılır liste -->
<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>
<br><br>
<!-- Dosya yükleme -->
<label for="file">Dosya Yükleyin:</label>
<input type="file" id="file" name="file">
<br><br>
<!-- Gizli bilgi gönderme -->
<input type="hidden" name="token" value="12345">
<!-- İlerleme durumu -->
<label for="progress">İlerleme Durumu:</label>
<progress id="progress" value="70" max="100"></progress>
<br><br>
<!-- Belirli bir değeri gösteren çubuk -->
<label for="score">Başarı Oranı:</label>
<meter id="score" value="0.7" min="0" max="1">70%</meter>
<br><br>
<!-- Öneri listesi -->
<label for="browser">Tarayıcı:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
</datalist>
<br><br>
<!-- Gönder ve temizle butonları -->
<button type="submit">Gönder</button>
<button type="reset">Temizle</button>
</form>
</body>
</html>