แอตทริบิวต์“ for” ทำอะไรในแท็ก HTML <label>

382

ฉันสงสัยว่าความแตกต่างระหว่างตัวอย่างโค้ดสองต่อไปนี้คืออะไร:

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

และ

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

ฉันแน่ใจว่ามันทำอะไรบางอย่างเมื่อคุณใช้ไลบรารี JavaScript พิเศษ แต่นอกเหนือจากนั้นมันจะตรวจสอบ HTML หรือจำเป็นด้วยเหตุผลอื่นหรือไม่?

— เจฟฟ์
แหล่งที่มา

578

<label>แท็กช่วยให้คุณสามารถคลิกบนฉลากและมันจะได้รับการปฏิบัติเช่นคลิกที่องค์ประกอบเข้าเกี่ยวข้อง มีสองวิธีในการสร้างการเชื่อมโยงนี้:

วิธีหนึ่งคือการห่อองค์ประกอบฉลากรอบองค์ประกอบอินพุต:

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

วิธีอื่นคือใช้แอforททริบิวต์โดยระบุ ID ของอินพุตที่เกี่ยวข้อง:

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

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

อ่านเพิ่มเติมเกี่ยวกับองค์ประกอบนี้ในMDN

— Barmar
แหล่งที่มา

106

โปรดทราบว่าแอตทริบิวต์สำหรับถูกผูกไว้กับอินพุตโดยแอตทริบิวต์ id และแอตทริบิวต์ name ไม่จำเป็นต้องตรงกัน <label for = "theinput"> อินพุตที่นี่: </label> <input type = 'text' name = 'notmatching' id = 'theinput'> จะยังใช้งานได้

— Glo

4

การคลิกที่ฉลากไม่ได้รับการปฏิบัติเหมือนกับการคลิกที่องค์ประกอบที่เกี่ยวข้องเสมอไป ตัวอย่างเช่นใน Chrome และ Safari การคลิกที่ป้ายกำกับที่เกี่ยวข้องกับการselectมุ่งเน้นไปที่การเลือกเท่านั้นแทนที่จะเป็นการขยายตัวเลือก

— Emile Pels

2

@EmilePels ตราบใดที่รูปแบบกิจกรรมของเบราว์เซอร์เกี่ยวข้องกันพวกเขาจะเทียบเท่ากัน สิ่งที่คุณกำลังอธิบายเพิ่มเติมเกี่ยวกับ UI ที่ได้รับจากการจัดการเมนูแบบเลื่อนลงของ OS ซึ่งเชื่อมโยงกับตัวเมาส์เอง

— Barmar

3

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

— coyotte508

1

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

— ซามูเอล

53

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

ในตัวอย่างแรกของคำถาม (ไม่มีfor) การใช้labelมาร์กอัปไม่มีความหมายเชิงตรรกะหรือการทำงาน - มันไร้ประโยชน์เว้นแต่คุณจะทำอะไรกับมันใน CSS หรือ JavaScript

ข้อกำหนด HTML ไม่ได้บังคับให้เชื่อมโยงป้ายกำกับกับตัวควบคุม แต่ทำตามแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) 2.0 สิ่งนี้อธิบายไว้ในเอกสารทางเทคนิคH44: การใช้องค์ประกอบฉลากเพื่อเชื่อมโยงป้ายข้อความกับการควบคุมแบบฟอร์มซึ่งอธิบายว่าการเชื่อมโยงโดยนัย (โดยการซ้อนinputภายในเช่นlabel) ไม่ได้รับการสนับสนุนอย่างกว้างขวางว่าเป็นการเชื่อมโยงที่ชัดเจนผ่านทางforและidแอตทริบิวต์

— Jukka K. Korpela
แหล่งที่มา

10

+1 สำหรับการพูดคุยเกี่ยวกับความสัมพันธ์เชิงความหมายและความหมายนอกเหนือจากความสัมพันธ์การคลิกเพื่อการทำงาน

— ulty4life

สวัสดีฉันมีสององค์ประกอบที่มีรหัสเดียวกัน แต่ใน div ที่แตกต่างกันฉันได้เพิ่มเหตุการณ์การโฟกัสโดยใช้ป้ายกำกับสำหรับ แต่ในองค์ประกอบที่สองนั้นจะเน้นที่องค์ประกอบแรก <html> <body> <body> <div id = "first_div"> <label สำหรับ = "name"> ชื่อ </label> <input type = "text" id = "name"> </div> <div id = "second_div "> <label for =" name "> ชื่อ </label> <input type =" text "id =" name "> </div> </body> </html>

— LoveToCode

14

สั้น ๆ ว่ามันหมายถึงอะไรidของอินพุตนั่นคือทั้งหมด:

<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
แหล่งที่มา

6

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

— bean5

3

แอตทริบิวต์สำหรับ<label>แท็กควรเท่ากับแอตทริบิวต์ id ขององค์ประกอบที่เกี่ยวข้องเพื่อรวมเข้าด้วยกัน

— ราหุลตรีถี
แหล่งที่มา

7

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

— ฟ์

1

FOR ระบุองค์ประกอบของฟอร์มที่ฉลากจะเชื่อมโยงกับ

— Rahul Tripathi

2

@CengizFrostclaw jsfiddle.net/DmSGh --- ลองคลิกที่ข้อความ "อินพุตที่นี่" ทั้งคู่และดูว่าเกิดอะไรขึ้น

— JJJ

1

@CengizFrostclaw: - ป้ายกำกับสามารถผูกกับองค์ประกอบอย่างใดอย่างหนึ่งโดยใช้แอตทริบิวต์ "สำหรับ"

— Rahul Tripathi

1

มีคุณสมบัติที่ดีเช่นเมื่อคุณใช้ปุ่มตัวเลือก การคลิกที่ป้ายกำกับจะเป็นการสลับปุ่มตัวเลือก นี่เป็นคุณสมบัติที่ดีเมื่อคุณพยายามใช้ปุ่มตัวเลือกด้วย UI ที่กำหนดเอง

— Alex

0

แอ็ตทริบิวต์ for แสดงว่าป้ายนี้ย่อมาจากช่องป้อนข้อมูลที่เกี่ยวข้องหรือกล่องกาเครื่องหมายหรือปุ่มตัวเลือกหรือช่องป้อนข้อมูลอื่น ๆ ที่เกี่ยวข้อง ตัวอย่างเช่น

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

— สันติภาพ
แหล่งที่มา

0

มันติดป้ายอะไรก็ตามที่ป้อนเป็นพารามิเตอร์สำหรับforแอตทริบิวต์

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

ขยายตัวอย่างข้อมูล

— pythag0ras_
แหล่งที่มา