Etiket label

label etiketi, input, textarea, select tipi giriş alanları için bir işaretleyici belirler.

İşaretleyici, for özniteliği kullanılarak belirli bir giriş alanına bağlanır. Burada, işaretleyicinin bağlı olduğu giriş alanının id özniteliğinin değeri belirtilmelidir. Ayrıca, bir öğe label etiketinin içine yerleştirilirse işaretleyici bu öğeye bağlanır. Bu durumda for özniteliğinin belirtilmesine gerek yoktur. Daha iyi anlamak için örneklere bakın.

İşaretleyiciye tıklandığında, ona bağlı olan onay kutuları veya radyo düğmeleri işaretli durumdan işaretsiz duruma veya tam tersi duruma geçecektir. İşaretleyici bu durumda kolaylık sağlamak içindir: formdaki küçük öğelere imleçle tıklamak zorken, uzun metinli bir işaretleyiciye tıklamak çok daha kolaydır.

İşaretleyiciye bağlı metin giriş alanı input ve textarea giriş odağını alacaktır. Odak, imlecin giriş alanında yanıp söndüğü durumdur, bu durumda klavyeden bir şeyler yazdığınızda metin bu alana girecektir (odak için ileri düzey anlayış için bkz. sözde sınıf focus).

label işaretleyicisi, bir onay kutusu veya radyo düğmesi taklidi yapmak için kullanılabilir. Bu, checkbox veya radio'ya kendi tasarımınızı uygulamak için gereklidir (ki bu CSS ile yasaklanmıştır, ancak zekice yöntemlerle mümkündür).

Öznitelikler

Öznitelik	Açıklama
`for`	Bu öznitelikte, `label` işaretleyicisinin bağlı olduğu giriş alanının id özniteliğinin değeri belirtilmelidir.
`accesskey`	İşaretleyiciye bağlı (`for` özniteliği aracılığıyla) form öğesine geçiş yapmak için kullanılabilecek kısayol tuşunu belirler. Ayrıntılar için bkz. `accesskey` özniteliği.

Örnek . Onay kutusu

Hadi bir onay kutusuna for özniteliği kullanarak bir işaretleyici bağlayalım. İşaretleyiciye tıklayın ve onay kutusunun işaretli durumdan işaretsiz duruma ve tam tersi yönde değiştiğini göreceksiniz:

<input type="checkbox" id="checkbox">
<label for="checkbox">id'si checkbox olan onay kutusuna bağlıyım.</label>

Örnek . Label içinde

Şimdi ise işaretleyiciyi for özniteliği ile bağlamak yerine, öğeleri doğrudan label etiketi içine yerleştirelim, bu durumda label metnine tıklamak da öğenin etkinleştirilmesine neden olacaktır:

<label><input type="checkbox"> işaretleyici</label>

Örnek . Metin giriş alanı

Hadi bir input etiketine for özniteliği kullanarak bir işaretleyici bağlayalım. İşaretleyiciye tıklamak, giriş alanının odağı almasına neden olacaktır. Bu durumda alanda bulunan metin (value özniteliği kullanarak ekleyeceğiz) seçili duruma gelecektir. Klavyeden herhangi bir şey yazmaya başlarsanız bu metin silinecektir. Metni silmeden seçimi kaldırmak için giriş alanına fareyle tıklayabilirsiniz: bu durumda odak kaybolmayacak, ancak seçim kalkacaktır:

<input type="text" id="input1" value="bir metin">
<label for="input1">id'si input1 olan giriş alanına bağlıyım.</label>

Ayrıca bakınız

alan gruplandırmasının üstüne başlık atan legend etiketi