Kod Atölyesi
Yapay Zeka
HTML Dersleri
CSS Dersleri
JavaScript Dersleri
İçindekiler
Web geliştirme dünyasında, kullanıcı etkileşimini sağlamak ve veri toplamak için formlar vazgeçilmez bir araçtır. HTML formları, kullanıcıdan bilgi almayı ve bu bilgileri sunucuya iletmeyi mümkün kılar. Web sitelerinde üyelik işlemlerinden anketlere, sipariş formlarından geri bildirim formlarına kadar birçok alanda kullanılır. Bu yazıda, HTML form etiketlerini detaylı bir şekilde inceleyecek, her bir etiketin nasıl kullanıldığını açıklayacak ve kapsamlı örneklerle destekleyeceğiz.
HTML Form Nedir?
Formlar, web sayfalarında kullanıcıdan veri toplamak için kullanılan yapılardır. Kullanıcılar formlar aracılığıyla metin, e-posta, parola gibi bilgileri girebilir, seçenekler arasından seçim yapabilir veya dosya yükleyebilirler. Bu formlar genellikle PHP, Python gibi sunucu dilleriyle işlenir.
Bir HTML formu, <form> etiketi ile başlar ve içinde çeşitli giriş alanlarını (input), düğmeleri (button) ve diğer form elemanlarını barındırır. Formların erişilebilirliği ve kullanım kolaylığı açısından doğru şekilde yapılandırılması önemlidir.
Temel Form Etiketleri ve Açıklamaları
<form> Etiketi
Formun başlangıcını ve bitişini belirler. İçinde çeşitli form elemanlarını barındırır.
- action: Form verilerinin gönderileceği URL’yi belirler.
- method: Verilerin gönderilme yöntemini belirler (
GETveyaPOST). - enctype: Veri şifreleme türünü belirler.
- target: Formun hangi pencerede açılacağını belirler.
Örnek:
<form action="/submit" method="post">
<!-- Form elemanları buraya gelecek -->
</form>
<input> Etiketi
Kullanıcıdan bilgi almak için kullanılır. Farklı türlerde olabilir:
- text: Metin giriş alanı sağlar.
- password: Parola alanı, karakterleri gizler.
- email: E-posta formatında giriş alır.
- tel: Telefon numarası almak için kullanılır.
- number: Sayısal veri almak için kullanılır.
- date: Tarih seçmek için kullanılır.
- file: Dosya yüklemek için kullanılır.
- color: Renk seçici sağlar.
<input type="text" name="ad" placeholder="Adınızı girin">
<input type="password" name="sifre" placeholder="Şifrenizi girin">
<label> Etiketi
Bir form öğesine açıklama eklemek için kullanılır.
<label for="email">E-Posta:</label>
<input type="email" id="email" name="email">
<select> ve <option> Etiketleri
Açılır liste oluşturur.
<select name="ülke">
<option value="tr">Türkiye</option>
<option value="us">ABD</option>
</select>
<textarea> Etiketi
Çok satırlı metin alanı sağlar.
<textarea name="yorum" rows="4" cols="50">Buraya yorumunuzu yazın...</textarea>
<button> Etiketi
Formu göndermek veya sıfırlamak için buton ekler.
<button type="submit">Gönder</button>
<button type="reset">Sıfırla</button>
<fieldset> ve <legend> Etiketleri
Form elemanlarını gruplamak için kullanılır.
<fieldset>
<legend>Kişisel Bilgiler</legend>
<label for="ad">Ad:</label>
<input type="text" id="ad" name="ad">
</fieldset>
Kapsamlı Form Örneği
<form action="/submit" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Kişisel Bilgiler</legend>
<label for="name">Ad:</label>
<input type="text" id="name" name="name" required>
<label for="password">Parola:</label>
<input type="password" id="password" name="password" required>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email">
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone">
<label for="dob">Doğum Tarihi:</label>
<input type="date" id="dob" name="dob">
<label for="color">Favori Renk:</label>
<input type="color" id="color" name="color">
<label for="url">Web Sitesi:</label>
<input type="url" id="url" name="url">
<label for="number">Favori Sayı:</label>
<input type="number" id="number" name="number" min="1" max="100">
<label for="search">Arama:</label>
<input type="search" id="search" name="search">
<label for="gender">Cinsiyet:</label>
<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>
<label for="hobbies">Hobiler:</label>
<input type="checkbox" id="reading" name="hobbies" value="reading"> <label for="reading">Okuma</label>
<input type="checkbox" id="sports" name="hobbies" value="sports"> <label for="sports">Spor</label>
<input type="checkbox" id="music" name="hobbies" value="music"> <label for="music">Müzik</label>
</fieldset>
<fieldset>
<legend>Diğer Bilgiler</legend>
<label for="country">Ülke:</label>
<select id="country" name="country">
<option value="tr">Türkiye</option>
<option value="us">ABD</option>
<option value="de">Almanya</option>
<option value="fr">Fransa</option>
</select>
<label for="bio">Biyografi:</label>
<textarea id="bio" name="bio" rows="6" cols="50"></textarea>
<label for="browsers">Kullanılan Tarayıcı:</label>
<input list="browsers" name="browser" id="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<label for="file">Dosya Yükle:</label>
<input type="file" id="file" name="file">
<label for="range">Memnuniyet Derecesi:</label>
<input type="range" id="range" name="range" min="1" max="10">
<label for="datetime">Tarih ve Saat:</label>
<input type="datetime-local" id="datetime" name="datetime">
<label for="hidden">Gizli Alan:</label>
<input type="hidden" id="hidden" name="hidden" value="gizli-deger">
<button type="submit">Gönder</button>
<button type="reset">Sıfırla</button>
</fieldset>
</form>
HTML formları, web sitelerinde kullanıcı etkileşimi sağlamak için kritik bir öneme sahiptir. Kullanım alanlarına göre çeşitlilik gösterir ve iyi tasarlanmış formlar, kullanıcı deneyimini olumlu yönde etkiler. Doğru etiketlerin kullanımı, formun etkinliğini artırırken, kullanıcı dostu bir deneyim sunar. Bu rehber, HTML form etiketlerini anlamanıza ve daha etkin kullanmanıza yardımcı olacaktır.
HTML formu nedir?
HTML formu, kullanıcıdan veri almak için kullanılan bir yapıdır. Bu veriler, genellikle bir sunucuya gönderilir. Web sayfalarında üyelik, anket, geri bildirim gibi işlemler için kullanılır.
<form>etiketi ne işe yarar?<form>etiketi, bir formun başlangıcını ve bitişini belirler. Bu etiket içinde kullanıcıdan alınacak veri giriş alanları ve formu göndermek için butonlar bulunur.<input>etiketi ne zaman kullanılır?<input>etiketi, kullanıcıdan veri almak için kullanılır. Metin, parola, e-posta gibi çeşitli türlerde olabilir. Her türde farklı veri giriş alanları sağlar.Formda birden fazla seçim nasıl yapılır?
Birden fazla seçim yapmak için,
<input>etiketindetype="checkbox"kullanabilirsiniz. Bu, kullanıcıya birden fazla seçenek sunarak birden fazla öğe seçilmesini sağlar.Formda dosya yüklemek için hangi etiket kullanılır?
Formda dosya yüklemek için
<input type="file">etiketi kullanılır. Bu, kullanıcıların bilgisayarlarından dosya seçmelerini sağlar.Formda kullanıcıyı nasıl doğrularım?
HTML5, bazı form alanlarında otomatik doğrulama sağlar. Örneğin,
requiredözelliği ile bir alanın doldurulması zorunlu hale getirilebilir. Ayrıcatype="email"gibi türlerle, belirli veri formatları doğrulanabilir.<select>ve<option>etiketleri nasıl çalışır?<select>etiketi, bir açılır liste oluşturur ve<option>etiketleri ile listede yer alacak seçenekler belirlenir. Kullanıcı bir seçenek seçebilir.Form verilerini bir sayfada nasıl gösterebilirim?
Form verilerini bir sayfada göstermek için, verileri PHP, JavaScript veya başka bir sunucu dilinde işleyebilir ve kullanıcının girdiği bilgileri sayfada görüntüleyebilirsiniz.
Formu nasıl sıfırlayabilirim?
Formu sıfırlamak için
<button type="reset">Sıfırla</button>butonunu kullanabilirsiniz. Bu, formu ilk haline geri getirir ve tüm girişler sıfırlanır.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!