Menu
CoddyTech

Inputlar için Etiketler

Coddy'nin HTML Journey'sinin Temeller bölümünün bir parçası. Ders 39 / 60.

Bir etiket olmadan bir girdinin neyle ilgili olduğu her zaman çok net olmayabilir. Etiket, kullanıcılara o alanda ne tür bir girdi beklendiğine dair açık bir görsel ipucu verir. Etiketler <label> etiketi kullanılarak oluşturulur.

İşte temel söz dizimi:

<label for="field">Label text</label>
<input type="text" id="field">
  • <label>: Etiketi oluşturan etiket.
  • for: Etiket ile form alanı arasındaki bağlantı. for değerinin, form alanının id değeriyle eşleşmesi gerekir.
  • Etiket metni: Form alanının ne için olduğunu açıklayan metin.
  • <input>: Etiketin başvurduğu form alanı.
  • id: Etiketindeki for niteliğiyle eşleşen, form alanının benzersiz tanımlayıcısı.

Bağlandıktan sonra etiket metnine tıklamak imleci giriş alanına getirir (odaklar); bu da kullanıcılara tıklayabilecekleri daha geniş bir alan sunar.

challenge icon

Görev

Kolay

Aşağıdaki etiketleri <form> etiketinin içine ekleyin:

  • Metni 'First Name:' olan ve for niteliği 'firstname' olarak ayarlanmış bir <label>.
  • type="text" olan bir <input> alanı.
  • <input> alanının id niteliği, etiketin for niteliğiyle eşleşmelidir.

Kendin dene

<!DOCTYPE html>
<html>
    <body>
        <form>
        <!-- Kodu buraya yazın -->
        
        </form>
    </body>
</html>
quiz iconKendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Temeller bölümündeki tüm dersler

Kendi başına pratik yap: Web playground