<input>
etiketiHTML’deki <input>
etiketi type
özniteliğine verdiğiniz değere göre farklı amaçlarla kullanılabilir. Basmacayı kullanırken bu özniteliğe checkbox
veya radio
değerini vereceğiz. Bakalım, bunlar nasıl çalışıyormuş?
Aşağıda <input>
etiketine farklı type
değerleri verilince aldığımız çıktıları göreceğiz:
type
özniteliği radio
olan input
etiketlerine bir de name
özelliği tanımlamak zorunda kaldık. Eğer ikisine de aynı name
değeri verilmeseydi, tarayıcı, bunların aynı anda seçilemeyeceğini fark edemezdi. Bu durumda hem erkeği hem de kadını seçebilirdik. Sonuç olarak birden fazla seçenekten sadece birinin seçilebilmesini istediğimiz zaman <input>
etiketinin type
özelliğini radio
yapıyoruz ve içlerinden birinin seçilebileceği bu input
etiketlerine aynı name
değeri vererek bunları öğürlüyoruz.
:checked
sözde sınıfıCSS’te, seçilmiş olan <input>
etiketlerinin görünüm özelliklerini düzenlemek için :checked
şeklinde bir sözde sınıf bulunur. Aşağıdaki örnekte bu sözde sınıf kullanılarak seçilmiş olan etiketlerin sonrasında “İşaretlendi!” yazısının görüntülenmesi sağlanmıştır.
<label>
etiketiYukarıdaki örneklerde, <input>
etiketlerinin sağında yazılar vardı fakat bu yazıların bir işlevleri yoktu. Şimdi bunlara işlev kazandıralım.
<input type="checkbox">
<label>Okudum ve kabul ediyorum</label>
Yukarıdaki örnekte tarayıcının <label>
etiketi ile <input>
etiketinin birbirine bağlı olduğunu görmesi mümkün değil, bunu sağlamamız için <label>
etiketinin for
özniteliğinin değeri ile <input>
etiketinin id
özniteliğinin değerinin aynı olması gerekir. Şimdi bunu deneyelim:
Benzer bir şeyi <input type="radio">
ile deneyelim:
Temel kavramları oturttuğumuza göre Basmaca’nın kullanımına geçebiliriz. Gerekli .css
dosyalarını dahil ettikten sonra kullandığınız .html
dosyasının <body>
etiketi içerisine şunu yazmayı deneyebilirsiniz: