ฉันควรใส่องค์ประกอบเข้าไว้ในองค์ประกอบฉลากหรือไม่?

มีวิธีปฏิบัติที่ดีที่สุดเกี่ยวกับการซ้อนlabelและinputองค์ประกอบ HTML หรือไม่

วิธีคลาสสิก:

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

หรือ

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

จาก w3:ฉลากอาจอยู่ในตำแหน่งก่อนหลังหรือรอบ ๆ ตัวควบคุมที่เกี่ยวข้อง

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

หรือ

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

หรือ

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

โปรดทราบว่าเทคนิคที่สามไม่สามารถใช้งานได้เมื่อมีการใช้ตารางสำหรับเค้าโครงโดยมีป้ายกำกับในเซลล์หนึ่งและเขตข้อมูลฟอร์มที่เกี่ยวข้องในเซลล์อื่น

อย่างใดอย่างหนึ่งที่ถูกต้อง ฉันชอบใช้ตัวอย่างแรกหรือตัวอย่างที่สองเพราะมันช่วยให้คุณควบคุมสไตล์ได้มากขึ้น

ฉันชอบ

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

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

เกิน

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

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

สาเหตุหลักมาจากทำให้ HTML อ่านง่ายขึ้น และฉันคิดว่าตัวอย่างแรกของฉันง่ายกว่าที่จะจัดสไตล์ด้วย CSS เนื่องจาก CSS ทำงานได้ดีกับองค์ประกอบที่ซ้อนกัน

แต่ฉันคิดว่ามันเป็นเรื่องของรสนิยม

หากคุณต้องการตัวเลือกการออกแบบเพิ่มเติมให้เพิ่มแท็ก span

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

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

รหัสยังดูดีขึ้นในความคิดของฉัน

หากคุณรวมแท็กอินพุตในแท็กป้ายกำกับคุณไม่จำเป็นต้องใช้แอตทริบิวต์ 'for'

ที่กล่าวว่าฉันไม่ชอบที่จะรวมแท็กใส่ในฉลากของฉันเพราะฉันคิดว่าพวกเขาแยกจากกันไม่ได้มีเอนทิตี

ความแตกต่างของพฤติกรรม: คลิกที่ช่องว่างระหว่างป้ายกำกับและอินพุต

หากคุณคลิกที่ช่องว่างระหว่างฉลากและอินพุตมันเปิดใช้งานการป้อนข้อมูลเฉพาะในกรณีที่ฉลากมีการป้อนข้อมูล

จึงสมเหตุสมผลเนื่องจากในกรณีนี้พื้นที่เป็นเพียงอักขระอีกตัวของป้ายกำกับ

<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>

ความสามารถในการคลิกระหว่างป้ายกำกับและกล่องหมายความว่า:

• คลิกง่ายกว่า
• ชัดเจนน้อยลงว่าสิ่งที่เริ่มต้นและสิ้นสุด

ตัวอย่างเช็กบ็อกซ์ Bootstrap v3.3 ใช้อินพุตด้านใน: http://getbootstrap.com/css/#formsอาจฉลาดที่จะติดตามมัน แต่พวกเขาเปลี่ยนใจใน v4.0 https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radiosดังนั้นฉันจึงไม่รู้ว่าอะไรฉลาดอีกต่อไป:

ช่องทำเครื่องหมายและการใช้งานวิทยุถูกสร้างขึ้นเพื่อรองรับการตรวจสอบความถูกต้องของรูปแบบ HTML และจัดทำฉลากที่กระชับและเข้าถึงได้ เป็นเช่นนี้ของเรา<input>และ<label>s กำลังพี่น้ององค์ประกอบเมื่อเทียบกับภายใน<input> <label>นี้เป็นเพียงเล็กน้อยมากขึ้นอย่างละเอียดที่สุดเท่าที่คุณจะต้องระบุ ID และสำหรับแอตทริบิวต์ที่จะสัมพันธ์และ<input><label>

คำถาม UX ที่กล่าวถึงรายละเอียดในจุดนี้: /ux/23552/should-the-space-between-the-checkbox-and-label-be-clickable

โดยส่วนตัวฉันชอบเก็บป้ายไว้ด้านนอกเช่นในตัวอย่างที่สองของคุณ นั่นเป็นเหตุผลที่แอตทริบิวต์ FOR มีอยู่ เหตุผลที่ฉันมักจะนำสไตล์ไปใช้กับฉลากเช่นความกว้างเพื่อให้ได้รูปแบบที่ดูดี (ชวเลขด้านล่าง):

<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" />

ทำให้เป็นเช่นนั้นฉันสามารถหลีกเลี่ยงตารางและขยะทั้งหมดที่อยู่ในรูปแบบของฉัน

ดูhttp://www.w3.org/TR/html401/interact/forms.html#h-17.9สำหรับคำแนะนำ W3

พวกเขาบอกว่าสามารถทำได้ทั้งสองทาง พวกเขาอธิบายสองวิธีเป็นอย่างชัดเจน (ใช้ "สำหรับ" กับ id ขององค์ประกอบ) และโดยนัย (ฝังองค์ประกอบในฉลาก):

ชัดเจน:

กระบวนการสำหรับแอตทริบิวต์เชื่อมโยงป้ายกำกับกับตัวควบคุมอื่นอย่างชัดเจน: ค่าของแอตทริบิวต์สำหรับจะต้องเหมือนกับค่าของแอตทริบิวต์ id ขององค์ประกอบควบคุมที่เกี่ยวข้อง

โดยปริยาย:

ในการเชื่อมโยงป้ายกำกับกับตัวควบคุมอื่นโดยปริยายองค์ประกอบควบคุมต้องอยู่ภายในเนื้อหาขององค์ประกอบ LABEL ในกรณีนี้ LABEL อาจมีองค์ประกอบควบคุมเพียงหนึ่งองค์ประกอบเท่านั้น

ทั้งสองถูกต้อง แต่การใส่ข้อมูลลงในฉลากทำให้ยืดหยุ่นน้อยลงเมื่อจัดแต่งทรงผมด้วย CSS

ครั้งแรกถูก จำกัด ในการที่องค์ประกอบมันสามารถมี ตัวอย่างเช่นคุณสามารถใส่ระหว่างและข้อความฉลากถ้าไม่ได้อยู่ภายใน<label><div><input><input><label>

ประการที่สองในขณะที่มีวิธีแก้ไขปัญหาเพื่อให้การจัดแต่งทรงผมง่ายขึ้นเช่นการตัดข้อความภายในฉลากด้วยการขยายช่วงเวลาลักษณะบางอย่างจะสืบทอดมาจากองค์ประกอบหลักซึ่งทำให้การจัดแต่งทรงผมมีความซับซ้อนมากขึ้น

คำว่า 'gotcha' ที่เด่นชัดว่าคุณไม่ควรรวมองค์ประกอบอินพุตมากกว่าหนึ่งรายการไว้ในองค์ประกอบ <label> ด้วยแอตทริบิวต์ "สำหรับ" ที่ชัดเจนเช่น:

<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>

แม้ว่าสิ่งนี้อาจดึงดูดความสนใจของคุณสมบัติของรูปแบบซึ่งค่าข้อความที่กำหนดเองเป็นรองจากปุ่มตัวเลือกหรือช่องทำเครื่องหมายฟังก์ชันการทำงานของการคลิกโฟกัสขององค์ประกอบฉลากจะโยนโฟกัสไปยังองค์ประกอบที่มีการกำหนดรหัสอย่างชัดเจนในแอตทริบิวต์ 'for' ทำให้ผู้ใช้ไม่สามารถคลิกเข้าไปในช่องข้อความที่มีอยู่เพื่อป้อนค่า

ส่วนตัวฉันพยายามหลีกเลี่ยงองค์ประกอบฉลากที่มีเด็ก ๆ ใส่ ดูเหมือนว่าองค์ประกอบฉลากจะไม่เหมาะสมเกินกว่าความหมายของฉลากเอง หากคุณกำลังซ้อนข้อมูลในฉลากเพื่อให้ได้สุนทรียภาพที่แน่นอนคุณควรใช้ CSS แทน

อย่างที่คนส่วนใหญ่พูดกันจริง ๆ แล้วทั้งสองวิธีทำงานได้ แต่ฉันคิดว่าควรจะทำได้แค่อันแรกเท่านั้น เนื่องจากความเข้มงวดทางความหมายฉลากไม่ได้ "บรรจุ" อินพุต ในความคิดของการบรรจุ (แม่ / ลูก) ความสัมพันธ์ในโครงสร้างมาร์กอัปควรจะสะท้อนถึงการบรรจุในการส่งออกภาพ คือองค์ประกอบโดยรอบอีกคนหนึ่งในมาร์กอัปควรจะวาดรอบที่หนึ่งในเบราว์เซอร์ ตามนี้ฉลากควรเป็นพี่น้องของท่านไม่ใช่ผู้ปกครอง ดังนั้นตัวเลือกที่สองนั้นจะผิดและสับสน ทุกคนที่อ่านZen of Pythonอาจเห็นด้วย (Flat ดีกว่าซ้อนกัน Sparse ดีกว่าหนาแน่นควรมีหนึ่ง - และควรมีเพียงวิธีเดียวเท่านั้น - เห็นได้ชัดว่าทำ ... )

เนื่องจากการตัดสินใจเช่นนั้นจาก W3C และผู้จำหน่ายเบราว์เซอร์รายใหญ่ (การอนุญาต "ไม่ว่าคุณจะทำอะไร" แทนที่จะเป็น "ทำในสิ่งที่ถูกต้อง") ก็คือเว็บมีความยุ่งเหยิงในวันนี้และเราต้องจัดการยุ่ง และรหัสดั้งเดิมที่หลากหลาย

ฉันมักจะไปกับสองตัวเลือกแรก ฉันเคยเห็นสถานการณ์ตอนที่มีการใช้ตัวเลือกที่สามเมื่อตัวเลือกวิทยุที่ฝังอยู่ในป้ายกำกับและ CSS มีบางอย่างเช่น

label input {
    vertical-align: bottom;
}

เพื่อให้แน่ใจว่ามีการจัดตำแหน่งแนวตั้งที่เหมาะสมสำหรับวิทยุ

อ้างถึงWHATWG ( การเขียนส่วนต่อประสานผู้ใช้ของแบบฟอร์ม ) ไม่ผิดที่จะใส่ฟิลด์อินพุตไว้ในฉลาก การทำเช่นนี้จะช่วยให้คุณประหยัดรหัสเนื่องจากไม่จำเป็นต้องใช้forแอตทริบิวต์จากlabel

ฉันชอบห่อองค์ประกอบภายในของฉันอย่างมาก<label>เพราะฉันไม่จำเป็นต้องสร้างรหัส

ฉันเป็นนักพัฒนา Javascript และใช้ React หรือ Angular เพื่อสร้างส่วนประกอบที่ฉันหรือผู้อื่นสามารถนำกลับมาใช้ใหม่ได้ จากนั้นจะเป็นการง่ายในการทำสำเนา idในหน้าซึ่งนำไปสู่พฤติกรรมที่แปลก

สิ่งหนึ่งที่คุณต้องพิจารณาคือการทำงานร่วมกันของช่องทำเครื่องหมายและอินพุตวิทยุกับ javascript

ใช้โครงสร้างด้านล่าง:

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

เมื่อผู้ใช้คลิกที่ฟังก์ชั่น "ข้อความข้อความ" controlCheckbox () จะถูกไล่ออกหนึ่งครั้ง

แต่เมื่อคลิกแท็กอินพุตฟังก์ชัน controlCheckbox () อาจถูกเรียกใช้สองครั้งในเบราว์เซอร์รุ่นเก่าบางรุ่น นั่นเป็นเพราะทั้งแท็กใส่ข้อมูลและป้ายกำกับเรียกเหตุการณ์ onclick ที่แนบมากับช่องทำเครื่องหมาย

จากนั้นคุณอาจมีข้อบกพร่องบางอย่างในช่องทำเครื่องหมายของคุณรัฐ

ฉันพบปัญหานี้เมื่อเร็ว ๆ นี้ใน IE11 ฉันไม่แน่ใจว่าเบราว์เซอร์ที่ทันสมัยมีปัญหากับโครงสร้างนี้หรือไม่

ข้อได้เปรียบหลักของการวางinputภายในlabelคือประสิทธิภาพการพิมพ์สำหรับมนุษย์และที่เก็บข้อมูลไบต์สำหรับคอมพิวเตอร์

@Znarkus พูดในความคิดเห็นของเขาที่มีต่อ OP

ข้อดีอย่างหนึ่งของการวาง<input />ข้างใน<label>คือคุณสามารถละเว้นforและid: <label>My text <input /></label>ในตัวอย่างของคุณ ดีกว่ามาก!

หมายเหตุ: ในรหัส @Znarknus ประสิทธิภาพอื่นรวมอยู่ด้วยไม่ได้ระบุไว้อย่างชัดเจนในความคิดเห็น type="text"สามารถละเว้นได้และinputจะแสดงกล่องข้อความเป็นค่าเริ่มต้น

การเปรียบเทียบการกดแป้นและไบต์แบบเคียงข้างกัน [1]

การกดแป้น 31, 31 ไบต์

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

58 การกดแป้น, 58 ไบต์

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

มิฉะนั้นสนิปเพตจะเท่ากันทางสายตาและจะให้ระดับการเข้าถึงของผู้ใช้ในระดับเดียวกัน ผู้ใช้สามารถคลิกหรือแตะที่ป้ายกำกับเพื่อวางเคอร์เซอร์ในกล่องข้อความ

[1] ไฟล์ข้อความ (.txt) สร้างขึ้นใน Notepad บน Windows ไบต์จากคุณสมบัติ Windows File Explorer