Selam dostlar! Bugün sizlere HTML’in altın parçası, yıldızı, yani input etiketinden bahsedeceğim. Bu küçük etiket, web sayfalarınızda kullanıcılarla etkileşim kurmanızı sağlayan önemli bir araç.
Öncelikle, input etiketi nedir? İki şeyi halletmiş olalım: kullanıcıdan bilgi almak ve bu bilgiyi sayfada göstermek. Yani, form alanları, arama kutuları, parola girişi gibi yerlerde input etiketini görmüşsünüzdür. Html Inputneredekullanılır sorusunagenelde cevap olarak “kullanıcının veri girişi yapabileceği giriş alanı tanımlar.” cümlesi kullanılır. Bu yazının sonunda checked ne demek onu öğrendiğinizde input ile neler yapabileceğiniz tamamen sizin hayal gücünüze ve ihtiyaçlarınıza kalmış. Websayfası tasarlarken input etiketi ile birçok özellik kullanabileceğinizi de unutmayın. Örnek olarak yazıda da bir tane göstereceğim sizlere. Gerisi size kalmış.
Mesela, bir isim girişi için şöyle bir input etiketi kullanabiliriz:
<input type="text" placeholder="İsminizi girin">
Bu kod, bir metin girişi sağlar ve içine yazılan “İsminizi girin” yazısını kullanıcıya rehberlik eder.
Peki, bu input etiketinin farklı türleri var mı? Tabii ki! Örneğin, şifre girişi için kullanılan input şöyle görünür:
<input type="password" placeholder="Şifrenizi girin">
Bu şekilde, kullanıcıların girdiği şifrelerin görünmemesini sağlamış oluyoruz.
Ama input etiketi sadece metin almakla sınırlı değil. Sayı, tarih, dosya gibi farklı türlerde de kullanılabilir. Örneğin, bir sayı girişi için:
<input type="number" placeholder="Yaşınızı girin">
Ya da bir tarih seçimi için:
Dahası, input etiketiyle birlikte kullanılan “required” özelliği sayesinde, belirli bir alanın doldurulmasını zorunlu hale getirebiliriz:
<input type="date" placeholder="Doğum tarihinizi seçin">
Bu üstte verdiğim inputların her biri html olarak bu şekilde görünecektir.
Unutmayın, input etiketi sizin web sayfanızın kullanıcıyla nasıl etkileşim kurduğunu belirlemenize yardımcı olur. Bu sayede kullanıcılarınızla daha iyi iletişim kurabilir, bilgi alışverişini daha etkili hale getirebilirsiniz.
Sadece bu kadar mı ? Dahası da var. Mesela mouse ile bir linkin, resmin veya bir yazının üzerine gelince css seçicisinden :hover kuralları girerek, mouse seçicinin üzerine geldiğinde farklı kurallar gösterebilirsiniz. Css’de checked özelliğini kullanarak seçilmiş olan inputlar ile farklı özellikler kullanabiliriz.
Mesela bir drop down oluşturmak için input kullanacağız dersek ne olur? Yapabilir miyiz acaba sorusu da aklınızdan geçecektir mutlaka. Evet checked ile mümkün. Aşağıda örnek bir drop down html kodu vereceğim şimdi.
<div class="dropdown-container">
<input type="checkbox" id="dropdown-toggle">
<label for="dropdown-toggle" class="dropdown-label">Dropdown</label>
<div class="dropdown-content">
<a href="#">Seçenek 1</a>
<a href="#">Seçenek 2</a>
<a href="#">Seçenek 3</a>
</div>
</div>
Bu html kodunda farkettiyseniz label /label arasına Dropdown yazdık. input için css de display none yazsak bile Dropdown yazısı görünecektir. Label for=”dropdown-toggle” olarak ayarladığımız için Dropdown yazısına tıkladığımızda input tik atılacak yada tiki kaldıracak.
Tıklandığında drop down açılsın diye bir seçenek eklemek istiyorsak alttaki css kodunu kullanmamız gerek
#dropdown-toggle:checked + .dropdown-label + .dropdown-content {
display: block;
}
İşlemin sonunda alttaki gibi bir sonuca ulaşabiliriz.