HTML Input Elemanları

Formların en temel ve en çok kullanılan elemanlarından biri <input> elementidir. Bu element, kullanıcıdan bilgi almak için birçok farklı türde giriş alanı oluşturmanıza olanak tanır. İşte bu yazıda, <input> elemanının farklı türlerini ve bazı önemli özelliklerini öğreneceğiz.

1. `<input>` Nedir?

<input>, HTML’de kullanıcıdan veri almak için kullanılan bir elementtir. Farklı türde giriş alanları oluşturmak için yalnızca type özelliğini değiştirmeniz yeterlidir.

Özellikler:

Kapanış etiketi gerektirmez: <input> bir self-closing (kendi kendine kapanan) elementtir. Örneğin:

<input type="text">
Esnektir: Birden fazla türde giriş alanı oluşturabilir (örneğin, metin kutusu, şifre alanı, renk seçici).

2. Temel Giriş Türleri

2.1. Metin Girişi (`type="text"`)

Metin giriş alanı, kullanıcıların metin yazabileceği bir alan sağlar.

<input type="text" placeholder="Adınızı girin">

Çıktı: Kullanıcı, herhangi bir metni yazabilir.

2.2. Şifre Girişi (`type="password"`)

Şifre alanı, yazılan karakterleri gizler.

<input type="password" placeholder="Şifrenizi girin">

Çıktı: Girilen karakterler, gizli şekilde (örneğin, noktalar veya yıldızlar) görünür.

2.3. Renk Seçici (`type="color"`)

Kullanıcının bir renk seçmesine olanak tanır.

<input type="color">

Çıktı: Bir renk paleti açılır ve kullanıcı bir renk seçebilir.

2.4. Sayı Girişi (`type="number"`)

Yalnızca sayısal veri girilmesine izin verir.

<input type="number" placeholder="Bir sayı girin">

Özellikler:

Kullanıcı metin yerine yalnızca sayı girebilir.
Yukarı/aşağı oklarla sayıyı artırıp azaltabilir.

2.5. Zaman Seçici (`type="time"`)

Kullanıcının bir saat seçmesine izin verir.

<input type="time">

Çıktı: Bir saat seçici açılır ve kullanıcı saat/dakika girebilir.

3. Önemli Bir Özellik: Placeholder

placeholder, giriş alanının içinde açıklayıcı bir metin gösterir. Kullanıcı yazmaya başladığında bu metin kaybolur.

Örnekler:

<!-- Kullanıcı adını isteyen bir alan -->
<input type="text" placeholder="Kullanıcı adınızı girin">

<!-- Şifre alanı -->
<input type="password" placeholder="Şifrenizi girin">

<!-- Sayı alanı -->
<input type="number" placeholder="Yaşınızı girin">

4. Kullanılabilecek Diğer Türler

type="email": Geçerli bir e-posta adresi girişini doğrular.
type="url": URL girişine izin verir.
type="date": Tarih seçmek için bir takvim açar.
type="radio": Radyo butonları oluşturur (birden fazla seçenekten yalnızca biri seçilebilir).
type="checkbox": Onay kutusu oluşturur (birden fazla seçenek işaretlenebilir).
type="range": Kaydırma çubuğu ile bir değer seçmeye olanak tanır.

5. Özet

<input>, HTML'deki en esnek elemanlardan biridir ve bir web sayfasında kullanıcıdan veri toplamanın temel yoludur. Yalnızca type özelliğini değiştirerek birçok farklı giriş türü oluşturabilirsiniz. Ancak, kullanıcı deneyimini iyileştirmek ve erişilebilirliği artırmak için giriş alanlarını doğru etiketlemeyi ve anlamlı placeholder kullanmayı unutmamalısınız.

Bir sonraki adımda, bu giriş alanlarını daha kullanıcı dostu ve erişilebilir hale getiren etiketler (labels) hakkında bilgi edineceğiz!