HTML Formları: Input Tipleri ve Form Elemanları

HTML Form Elemanları Rehberi

Kapsamlı HTML form elemanları rehberi

Web geliştirmenin temel taşlarından biri, kullanıcılarla etkileşim kurmaktır. Bu etkileşimin en yaygın ve güçlü yolu ise HTML formlarıdır. Formlar, kullanıcıdan bilgi toplamak, giriş yapmak, arama yapmak veya geri bildirim almak gibi sayısız senaryoda kullanılır. Bu rehber, form oluşturmanın temelini oluşturan <form> etiketinden başlayarak, en çok kullanılan veri giriş elemanı olan <input> ve onun çeşitli tiplerine kadar her detayı ele alacaktır. Ayrıca, çok satırlı metinler için <textarea>, önceden tanımlanmış seçenekler sunan <select> ve eylemleri tetikleyen <button> etiketlerini inceleyeceğiz. Son olarak, kullanıcı tarafından girilen verilerin doğruluğunu sunucuya göndermeden önce kontrol etmemizi sağlayan form doğrulama (validation) niteliklerini örneklerle açıklayacağız.

Formun ana iskeleti: <form> etiketi

Bir HTML formunun başlangıç ve bitiş noktasını <form> etiketi belirler. Bu etiket, içindeki tüm form elemanlarını (input, button, select vb.) bir araya getiren bir kapsayıcı görevi görür. Kullanıcı formu doldurup gönderdiğinde, bu etiket içinde yer alan veriler sunucuya iletilir. <form> etiketinin işlevselliğini belirleyen iki temel nitelik bulunur:

action: Form verilerinin gönderileceği sunucu tarafı adresini (URL) belirtir. Bu genellikle bir PHP, Python veya C# dosyası gibi sunucu tarafında çalışan bir betik olur.
method: Verilerin sunucuya nasıl gönderileceğini belirten HTTP yöntemini tanımlar. En yaygın kullanılan iki metot GET ve POST‘tur.
- GET: Form verilerini URL’nin sonuna ekleyerek gönderir. Genellikle arama formları gibi hassas olmayan veriler için kullanılır. (Örn: `arama.php?q=html`)
- POST: Form verilerini HTTP isteğinin gövdesinde (body) gönderir. Kullanıcı adı, şifre gibi hassas ve büyük boyutlu verilerin gönderimi için daha güvenli ve uygundur.

Örnek bir form iskeleti:

<form action="/kayit-ol" method="post">
    <!-- Form elemanları buraya gelecek -->
</form>

Veri girişinin merkezi: <input> etiketi ve tipleri

Kullanıcıdan veri almanın en esnek ve yaygın yolu <input> etiketidir. Bu etiketin en önemli niteliği, hangi türde veri alınacağını belirleyen type niteliğidir. Her bir <input> elemanının, sunucu tarafında veriyi tanımlamak için benzersiz bir name niteliğine sahip olması kritik öneme sahiptir.

Temel metin girişleri

Bu tipler, kullanıcıdan metin tabanlı veriler almak için kullanılır.

text: Standart tek satırlı metin giriş alanı. (Ad, soyad, kullanıcı adı vb.)
password: Girilen karakterleri gizleyen (genellikle `*` veya `•` ile) metin alanı.
email: E-posta formatında veri girişi için kullanılır. Tarayıcılar, gönderimden önce formatın geçerli olup olmadığını otomatik olarak kontrol eder.

<p>Kullanıcı Adı: <input type="text" name="kullanici_adi"></p>
<p>Şifre: <input type="password" name="sifre"></p>
<p>E-posta: <input type="email" name="eposta"></p>

Sayısal ve tarihsel veriler

Bu tipler, belirli formatlardaki veriler için özel arayüzler sunar.

number: Sadece sayısal değerlerin girilmesine izin verir ve genellikle yanında artırma/azaltma okları bulunur.
date: Kullanıcının bir takvim arayüzünden tarih seçmesini sağlar.

<p>Yaşınız: <input type="number" name="yas"></p>
<p>Doğum Tarihi: <input type="date" name="dogum_tarihi"></p>

Seçim yapma elemanları

Kullanıcının belirli seçenekler arasından seçim yapmasını sağlarlar.

checkbox: Kullanıcının bir veya daha fazla seçeneği işaretlemesini sağlar. Her bir checkbox kendi name niteliğine sahip olabilir veya aynı isimle gruplandırılabilir.
radio: Kullanıcının bir grup seçenek arasından sadece birini seçmesine olanak tanır. Bir radyo düğmesi grubundaki tüm elemanların name niteliği aynı olmalıdır.

<p>İlgi Alanları:</p>
<input type="checkbox" name="ilgi" value="spor"> Spor
<input type="checkbox" name="ilgi" value="muzik"> Müzik

<p>Cinsiyet:</p>
<input type="radio" name="cinsiyet" value="kadin"> Kadın
<input type="radio" name="cinsiyet" value="erkek"> Erkek

Diğer önemli input tipleri

Formun işlevselliğini tamamlayan diğer bazı tipler şunlardır:

file: Kullanıcının cihazından dosya seçmesini sağlar.
submit: Formu, <form> etiketinin action niteliğinde belirtilen adrese gönderen bir düğme oluşturur.
reset: Formdaki tüm elemanları varsayılan değerlerine sıfırlayan bir düğme oluşturur.

Çok satırlı metinler ve seçim listeleri

<input> etiketinin yetersiz kaldığı durumlarda <textarea> ve <select> etiketleri devreye girer. Bu etiketler, daha yapılandırılmış ve büyük hacimli veri girişleri için idealdir.

Çok satırlı metin girişi: <textarea>

Kullanıcıdan adres, yorum veya uzun bir mesaj gibi çok satırlı metinler almak için kullanılır. rows ve cols nitelikleri ile başlangıç boyutları ayarlanabilir.

<p>Mesajınız:</p>
<textarea name="mesaj" rows="5" cols="40"></textarea>

Açılır listelerle seçim: <select> ve <option>

<select> etiketi, kullanıcıya bir açılır liste sunar. Bu listenin içindeki her bir seçenek, <option> etiketi ile tanımlanır. Sunucuya gönderilecek olan değer, <option> etiketinin value niteliğinde belirtilir. Kullanıcının gördüğü metin ise etiketler arasına yazılır.

<p>Şehir Seçiniz:</p>
<select name="sehir">
    <option value="ist">İstanbul</option>
    <option value="ank">Ankara</option>
    <option value="izm">İzmir</option>
</select>

Eylemler ve form doğrulama

Formun gönderilmesini sağlayan düğmeler ve girilen verinin kalitesini artıran doğrulama nitelikleri, modern formların ayrılmaz bir parçasıdır. Bu özellikler, kullanıcı deneyimini iyileştirir ve sunucuya geçersiz veri gönderilmesini engeller.

Eylemleri tetikleme: <button> etiketi

<input type=”submit”>‘e benzer şekilde form gönderme işlevi görse de, <button> etiketi daha esnektir. İçerisine metnin yanı sıra resim veya diğer HTML etiketlerini de alabilir. type niteliği ile davranışı belirlenir: `submit` (varsayılan), `reset` veya `button` (JavaScript ile kontrol için).

<button type="submit">
    <b>Kaydı Tamamla</b>
</button>

İstemci taraflı doğrulama (validation)

HTML5 ile gelen bu nitelikler, tarayıcının JavaScript’e ihtiyaç duymadan temel veri kontrollerini yapmasını sağlar.

required: Bu niteliğin eklendiği alanın boş bırakılmasını engeller. Form gönderilmeden önce doldurulması zorunludur.
min / max: Sayısal (number) veya tarih (date) tipli alanlar için minimum ve maksimum geçerli değerleri belirler.
pattern: Girilen verinin belirli bir düzenli ifadeye (regular expression) uymasını zorunlu kılar. Örneğin, belirli bir formatta posta kodu veya telefon numarası istemek için kullanılır.

Doğrulama niteliklerini kullanan bir örnek:

<form action="/uye-ol" method="post">
    <p>Kullanıcı Adı: <input type="text" name="k_adi" required></p>
    <p>Yaş: <input type="number" name="yas" min="18" max="99" required></p>
    <p>Posta Kodu: <input type="text" name="posta_kodu" pattern="[0-9]{5}" title="5 haneli posta kodu giriniz."></p>
    <button type="submit">Gönder</button>
</form>

Sonuç

Bu rehberde, HTML formlarının temel yapı taşlarını kapsamlı bir şekilde ele aldık. Formları bir araya getiren <form> kapsayıcısından, kullanıcıdan her türlü veriyi almamızı sağlayan çok yönlü <input> etiketine ve onun metin, şifre, sayı, tarih, checkbox gibi çeşitli tiplerine değindik. Çok satırlı girdiler için <textarea> ve önceden tanımlı seçenekler sunan <select> etiketlerinin kullanımını inceledik. Form eylemlerini tetikleyen <button> etiketinin esnekliğini gördük. Son olarak, required, pattern ve min/max gibi doğrulama nitelikleri sayesinde, sunucuya yük bindirmeden kullanıcı tarafında veri kalitesini nasıl artırabileceğimizi öğrendik. Bu elemanları ve nitelikleri doğru bir şekilde kullanarak, hem işlevsel hem de kullanıcı dostu web formları oluşturabilirsiniz.

Resim Sahibi: Caleb Oquendo
https://www.pexels.com/@caleboquendo