HTML, web sayfalarını düzenlemenin ve interaktif öğeler eklemenin temel taşıdır. <input> form öğesi, kullanıcıdan bilgi almak veya kullanıcıya belirli seçenekler sunmak için yaygın olarak kullanılır. Bu yazıda, <input> öğesinin bazı önemli özelliklerini inceleyeceğiz ve örnek kodlarla nasıl kullanılabileceğini göreceğiz.
Temel <input> Kullanımı:
HTML’de <input> öğesi, genellikle bir form içinde kullanılır ve kullanıcıya metin kutuları, şifre alanları, radyo düğmeleri, onay kutuları ve daha fazlası gibi çeşitli giriş seçenekleri sunar.
<!-- Metin Kutusu -->
<input type="text" name="username" placeholder="Kullanıcı Adı">
<!-- Şifre Alanı -->
<input type="password" name="password" placeholder="Şifre">
<!-- Onay Kutusu -->
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Bültenimize abone ol</label>
<!-- Radyo Düğmesi -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">Erkek</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Kadın</label>
<input> Özellikleri:
- type: Input öğesinin türünü belirtir. (text, password, checkbox, radio vb.)
- name: Input öğesinin adını belirtir, bu bilgi form gönderildiğinde kullanılır.
- value: Input öğesinin varsayılan değerini belirtir.
- placeholder: Input alanına örnek bir metin gösterir.
- id: Input öğesine bir kimlik (ID) atar.
Özel Örnek: E-posta Girişi
<input type="email" name="email" id="email" placeholder="E-posta Adresiniz">
<button type="submit">Gönder</button>
Bu örnek, kullanıcının e-posta adresini girmesini sağlayan bir form örneğidir. Gönder düğmesi tıklandığında, form bilgileri belirtilen adrese gönderilebilir.
Özel Örnek: Renk Seçici
<label for="color">Favori Renkiniz:</label>
<input type="color" id="color" name="color" value="#ff0000">
Bu örnek, kullanıcıya renk seçme olanağı sunan bir form örneğidir. Kullanıcı, renk seçiciyi kullanarak bir renk seçer ve bu bilgi form gönderildiğinde kullanılabilir.
HTML <input> form öğesi, web geliştiricilerin kullanıcı etkileşimini yönetmelerini sağlayan güçlü bir araçtır. Bu özellikler ve örnekler, temel kullanımları anlamanıza yardımcı olmalıdır. Uygulama yaparak daha fazla deneyim kazanabilirsiniz.