HTML <label> etiketinde “for” özelliği ne yapar?

382

Aşağıdaki iki kod parçacıkları arasındaki farkın ne olduğunu merak ediyorum:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

ve

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

Özel bir JavaScript kitaplığı kullandığınızda bir şey yaptığından eminim, ancak bunun dışında HTML'yi doğrulıyor mu veya başka bir nedenden dolayı gerekli mi?

— jeff
kaynak

578

<label>Etiketi, etiketi tıklayın sağlar ve bu durumun ilgili giriş öğesinin üzerine tıklamak gibi işlem görecektir. Bu ilişkilendirmeyi oluşturmanın iki yolu vardır:

Bunun bir yolu, etiket öğesini giriş öğesinin etrafına sarmaktır:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

Diğer yol, forilgili girdinin kimliğini vererek özniteliği kullanmaktır :

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

Bu, özellikle onay kutuları ve düğmelerle kullanım için kullanışlıdır, çünkü kutunun kendisine vurmak yerine ilişkili metne tıklayarak kutuyu işaretleyebileceğiniz anlamına gelir.

MDN'de bu öğe hakkında daha fazla bilgi edinin .

— barmar
kaynak

106

For özniteliğinin id özniteliği tarafından girdiye bağlı olduğunu ve name özniteliğinin eşleşmesi gerekmediğini unutmayın. <label for = "theinput"> Buraya girin: </label> <input type = 'text' name = 'notmatching' id = 'theinput'> Çalışmaya devam edecek

— Glo

4

Etikete yapılan bir tıklama her zaman tam olarak ilişkili öğeye tıklamak gibi ele alınmaz. Örneğin, Chrome ve Safari'de, selectyalnızca biriyle ilişkili bir etiketi tıklamak , seçenekleri genişletmek yerine seçime odaklanır.

— Emile Pels

2

@EmilePels Tarayıcının etkinlik modeli söz konusu olduğunda, bunlar eşdeğerdir. Açıkladığınız şey, işletim sisteminin farenin kendisine bağlı olan açılır menüleri işlemesi tarafından sağlanan kullanıcı arayüzü hakkında daha fazla.

— Barmar

3

Erişilebilirlik ve ekran okuyucular için çok alakalı olduğunu belirtmek önemlidir, neden aktif olarak kullanın.

— coyotte508

1

Bir giriş alanına "for" özelliğine sahip bir forma her tıkladığımda, gövdenin tıklanmasıyla son iki saatte mücadele ediyordum. Sonunda, neden etiketin tıklamasında stopPropagation kullansam bile, açıkladığınız davranışın ardından giriş alanı tarafından yükseltilen tıklama nedeniyle ...

— Samuel

53

forAçıklamasında tanımlanan nitelik, bir kontrol elemanı ile etiket ilişkilendiren labelHTML 4.01 spec. Bu, diğer şeylerin yanı sıra, labeleleman odağı aldığında (örneğin tıklanarak), odağı ilgili kontrolüne geçirdiğini gösterir. Bir etiket ve bir kontrol arasındaki ilişki, kullanıcıya bir kontrolle uğraşırken ilişkili etiketin ne olduğunu sormak için bir yol verebilen konuşma tabanlı kullanıcı aracıları tarafından da kullanılabilir. (İlişkilendirme, görsel oluşturmadaki kadar açık olmayabilir.)

Sorunun ilk örneğinde (olmadan for), labelişaretlemenin kullanımının mantıklı veya işlevsel bir anlamı yoktur - CSS veya JavaScript'te bir şey yapmadığınız sürece işe yaramaz.

HTML spesifikasyonları, etiketlerin kontrollerle ilişkilendirilmesini zorunlu kılmaz, ancak Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.0 bunu zorunlu kılar. Bu teknik doküman açıklanan H44: Form kontrolleri ile ilişkilendirmek metin etiketlere etiket elemanlarını kullanarak da (yuvalama örneğin tarafından örtülü dernek olduğunu açıklar, inputiç label) olarak yaygın yoluyla açık dernek olarak desteklenmez forve idnitelikleri,

— Jukka K. Korpela
kaynak

10

Anlamsal ilişki ve işlevsel tıklama ilişkisinin ötesinde ne anlama geldiği hakkında konuşmak için +1.

— ulty4life

Merhaba, aynı kimliğe sahip iki öğem var, ancak farklı div'de, etiket kullanarak odak olayı ekledim, ancak ikinci öğede ilk öğeye odaklanıyor. <html> <body> <div id = "first_div"> <label = "name"> Name </label> <input type = "text" id = "name"> </div> <div id = "second_div "> <= = name" için etiket> Ad </label> <giriş türü = "metin" id = "ad"> </div> </body> </html>

— LoveToCode

14

Kısaca yaptığı şey id, girdinin ne olduğuna işaret etmek, hepsi bu:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

— Uwe Keim
kaynak

6

Bitişik olsalar bile bir for eklemek önemlidir. Görme engelliler için bazı ekran okuyucuların başka türlü problemleri olduğunu duydum. Bu yüzden, belki de alternatif tarayıcılar / ekran okuyucuları kullananlar için arkadaşça davranmak istiyorsanız, bu yöntemi kullanın.

— bean5

3

<label>Etiketin for özelliği, onları birbirine bağlamak için ilgili öğenin id özelliğine eşit olmalıdır.

— Rahul Tripathi
kaynak

7

Evet, ama "onları birbirine bağla" derken ne demek istiyorsun? HTML yapısında zaten komşular. Anlamadığım şey bu.

— jeff

1

FOR Bir etiketin hangi form öğesine bağlı olduğunu belirtir

— Rahul Tripathi

2

@CengizFrostclaw jsfiddle.net/DmSGh --- "Buraya giriş" metinlerinin her ikisini de tıklamayı deneyin ve ne olduğunu görün.

— JJJ

1

@CengizFrostclaw: - Bir etiket, "for" özelliği kullanılarak bir öğeye bağlanabilir

— Rahul Tripathi

1

Örneğin radyo düğmelerini kullanırken bazı hoş özellikler var. Etikete tıklamak aslında radyo düğmesini değiştirir. Bu, özel bir kullanıcı arabirimine sahip radyo düğmelerini kullanmaya çalıştığınızda güzel bir özelliktir.

— Alex

0

For özniteliği, bu etiketin ilgili giriş alanını, onay kutusunu veya radyo düğmesini veya onunla ilişkili diğer veri giriş alanını temsil ettiğini gösterir. Örneğin

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>

— Sulh
kaynak

0

forÖznitelik için parametre ne olursa olsun girdiyi etiketler .

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>

Snippet'i genişlet

— pythag0ras_
kaynak