Giriş öğelerini bir etiket öğesinin içine koymalı mıyım?

Yuvalanmasını ilişkin en iyi yöntem var mıdır labelve inputHTML öğeleri?

klasik yol:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

veya

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

W3'ten: Etiketin kendisi ilişkili kontrolün önüne, arkasına veya çevresine yerleştirilebilir.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

veya

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

veya

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

Üçüncü tekniğin, tablo bir etiket kullanılırken, etiketi bir hücrede ve ilişkili form alanı başka bir hücrede olacak şekilde, tablo için kullanıldığında kullanılamayacağını unutmayın.

Her ikisi de geçerlidir. Size daha fazla stil kontrolü sağladığı için birinci veya ikinci örneği kullanmayı seviyorum.

tercih ederim

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

bitmiş

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

Temel olarak HTML'yi daha okunabilir hale getirdiği için. Ve aslında ilk örneğimin CSS ile stil oluşturmanın daha kolay olduğunu düşünüyorum, çünkü CSS iç içe öğelerle çok iyi çalışıyor.

Ama sanırım bu bir zevk meselesi.

Daha fazla stil seçeneğine ihtiyacınız varsa, bir span etiketi ekleyin.

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

Kod bence daha iyi görünüyor.

Girdi etiketini etiket etiketine eklerseniz, 'for' özelliğini kullanmanız gerekmez.

Bununla birlikte, giriş etiketini etiketlerime dahil etmekten hoşlanmıyorum, çünkü bunların ayrı, içermeyen varlıklar olduğunu düşünüyorum.

Davranış farkı: etiket ve giriş arasındaki boşluğu tıklatma

Etiket ile giriş arasındaki boşluğa tıklarsanız, yalnızca etiket girişi içeriyorsa girişi etkinleştirir.

Bu mantıklıdır çünkü bu durumda boşluk etiketin sadece bir başka karakterinden ibarettir.

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

Etiket ve kutu arasında tıklama yapabilmek şu anlama gelir:

• tıklamak daha kolay
• işlerin başladığı ve bittiği yerde daha az net

Bootstrap onay kutusu v3.3 örnekleri içindeki girişi kullanır: http://getbootstrap.com/css/#forms Bunları takip etmek akıllıca olabilir . Ama akıllarını v4.0'da değiştirdiler https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios böylece artık bilge olanı bilmiyorum:

Onay kutuları ve radyo kullanımı, HTML tabanlı form doğrulamayı desteklemek ve kısa, erişilebilir etiketler sağlamak için oluşturulmuştur. Bu nedenle, <input>s ve <label>s, <input>a <label>. Bu biraz daha sen kimlik belirtmelidir olarak ayrıntılı ve nitelikleri ilişkilendirmek içindir <input>ve <label>.

Bu noktayı ayrıntılı olarak tartışan UX sorusu: /ux/23552/should-the-space-between-the-checkbox-and-label-be-clickable

Şahsen etiketi ikinci örnekteki gibi dışarıda tutmayı seviyorum. Bu nedenle FOR özniteliği oradadır. Nedeni, formun güzel görünmesini sağlamak için etikete, genişlik gibi, genellikle stil uygulayacağım (aşağıda kısayol):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

<label for="myinput">My Text</label>
<input type="text" id="myinput" /><br />
<label for="myinput2">My Text2</label>
<input type="text" id="myinput2" />

Tabloları ve formlarımdaki tüm önemsiz şeylerden kaçınabilmem için yapar.

W3 önerileri için http://www.w3.org/TR/html401/interact/forms.html#h-17.9 adresine bakın .

Her iki şekilde de yapılabileceğini söylüyorlar. İki yöntemi açık (öğenin kimliğiyle "for" kullanarak) ve örtük (öğeyi etikete gömerek) olarak tanımlarlar:

Açık:

For özniteliği bir etiketi başka bir denetim ile açıkça ilişkilendirir: for özniteliğinin değeri, ilişkili kontrol öğesinin id özniteliğinin değeri ile aynı olmalıdır.

örtülü:

Bir etiketi dolaylı olarak başka bir kontrolle ilişkilendirmek için kontrol elemanının LABEL elemanının içeriğinde olması gerekir. Bu durumda, LABEL yalnızca bir kontrol elemanı içerebilir.

Her ikisi de doğrudur, ancak girişi etiketin içine koymak, CSS ile şekillendirirken çok daha az esnek olmasını sağlar.

İlk olarak, a <label>, içerebileceği elementler ile sınırlıdır . Örneğin, yalnızca koyabilirsiniz <div>arasında <input>ise ve etiket metni <input>içinde değil<label> .

İkincisi, stilin iç etiket metnini bir açıklıkla sarmak gibi stil yapmayı kolaylaştırmak için geçici çözümler olsa da, bazı stiller, stilin daha karmaşık hale gelmesine neden olabilecek ana öğelerden devralınır.

Dikkate değer bir 'gotcha', bir <label> öğesinin içine hiçbir zaman açık bir "for" özelliği içeren birden fazla giriş öğesi eklememeniz gerektiğini belirtir;

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

Bu, özel bir metin değerinin bir radyo düğmesine veya onay kutusuna ikincil olduğu form özellikleri için cazip olsa da, etiket öğesinin tıklama odaklama işlevi, kimliği hemen 'for' özelliğinde açıkça tanımlanan öğeye hemen odak atar kullanıcının bir metin girmek için içerdiği metin alanını tıklamasını neredeyse imkansız hale getirir.

Şahsen, girdi çocukları olan etiket elemanlarından kaçınmaya çalışıyorum. Bir etiket öğesinin etiketin kendisinden daha fazlasını kapsaması anlamsal olarak uygunsuz görünmektedir. Belirli bir estetik elde etmek için girişleri etiketlerde iç içe yerleştiriyorsanız, bunun yerine CSS kullanmalısınız.

Çoğu insanın söylediği gibi, her iki yol da gerçekten işe yarıyor, ama bence sadece ilk yol. Anlamsal olarak katı olan etiket, girdiyi "içermez". Bence, biçimlendirme yapısında çevreleme (ebeveyn / çocuk) ilişkisi görsel çıktıdaki çevreyi yansıtmalıdır . yani, işaretlemede başka bir öğeyi çevreleyen bir öğe tarayıcıdaki öğenin çevresine çizilmelidir . Buna göre, etiket girişin kardeşi olmalı, üst öğesi değil. Yani ikinci seçenek keyfi ve kafa karıştırıcı. Python'un Zen'ini okuyan herkes Zen'i muhtemelen aynı fikirde olacaktır (Düz iç içe geçmişten daha iyi, Seyrek yoğundan daha iyi, Bir tane olmalı - ve tercihen sadece bir tane yapmalı ...).

W3C ve büyük tarayıcı satıcılarının ("bunu doğru şekilde yapın" yerine "hangi yolu tercih ederseniz seçin") gibi kararlar nedeniyle, web bugün çok karışık ve biz geliştiriciler karışık başa çıkmak zorunda ve çok çeşitli eski kodlar.

Genellikle ilk iki seçeneğe giderim. Üçüncü seçenek kullanıldığında, etiketlere ve css'e gömülü radyo seçimleri gibi bir senaryo gördüm

label input {
    vertical-align: bottom;
}

radyolar için uygun dikey hizalama sağlamak için.

Değinen WHATWG ( Bir formun kullanıcı arabirimini Yazma o etiketin içinde giriş alanını koymak yanlış değildir). Bu forözellik, koddaki özellik labelartık gerekli olmadığından kod tasarrufu sağlar .

Öğeleri içine sarmayı çok tercih ederim <label>Kimliklerimi oluşturmak zorunda olmadığım için .

Ben bir Javascript geliştiricisiyim ve React veya Angular benim veya başkaları tarafından yeniden kullanılabilecek bileşenler oluşturmak için kullanılıyor. Daha sonra sayfada bir kimliği çoğaltmak kolay olur , bu da garip davranışlara yol açar.

Dikkate almanız gereken bir şey, onay kutusunun ve radyo girişlerinin javascript ile etkileşimi.

Aşağıdaki yapıyı kullanarak:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

Kullanıcı "Metni etiketle" yi tıkladığında controlCheckbox () işlevi bir kez tetiklenir.

Ancak giriş etiketi tıklatıldığında, bazı eski tarayıcılarda controlCheckbox () işlevi iki kez tetiklenebilir. Bunun nedeni, hem giriş hem de etiket etiketlerinin onay kutusuna eklenen onclick olayını tetiklemesidir.

Sonra onay kutunuzda bazı hatalar olabilir.

Bu konuya son zamanlarda IE11'de rastladım. Modern tarayıcıların bu yapı ile ilgili sorunları olup olmadığından emin değilim.

inputİçine yerleştirmenin birincil avantajılabel insanlar için verimlilik yazmak ve bilgisayarlar için bayt depolamaktır.

@Znarkus OP'ye yaptığı açıklamada,

Büyük profesyonellerden biri <input />İçine , örneğin <label>atlayabileceğiniz forve id: <label>My text <input /></label>Çok daha hoş!

Not: @Znarknus kodunda, yorumda açıkça belirtilmeyen başka bir verimlilik eklenmiştir. type="text"ayrıca atlanabilir ve inputvarsayılan olarak bir metin kutusu oluşturur.

Tuş vuruşlarının ve baytların yan yana karşılaştırılması [1].

31 tuş vuruşu, 31 bayt

<label>My Text<input /></label>

58 tuş vuruşu, 58 bayt

<label for="myinput">My Text</label><input id="myinput" />

Aksi takdirde, parçacıklar görsel olarak eşittir ve aynı düzeyde kullanıcı erişilebilirliği sunar. Kullanıcı imleci metin kutusuna yerleştirmek için etikete tıklayabilir veya ona dokunabilir.

[1] Windows'ta Not Defteri'nde, Windows Dosya Gezgini özelliklerinden gelen baytlarda oluşturulan metin dosyaları (.txt)