ทำไมเราต้องมีแท็ก fieldset

ทำไมเราต้องมี <fieldset>แท็ก ไม่ว่าจุดประสงค์ใดที่บริการนั้นอาจเป็นชุดย่อยของแท็กแบบฟอร์ม

ฉันค้นหาข้อมูลบางอย่างเกี่ยวกับ W3Schools ซึ่งพูดว่า:

• <fieldset>แท็กจะใช้ในกลุ่มที่เกี่ยวข้องกับองค์ประกอบในรูปแบบ
• <fieldset>แท็กดึงกล่องรอบองค์ประกอบที่เกี่ยวข้อง

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

ตัวอย่างที่ชัดเจนและใช้งานได้จริงคือ:

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Blue</label>

</fieldset>

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

คุณสมบัติอีกอย่างของ fieldset คือการปิดการใช้งานมันจะปิดการใช้งานทุกฟิลด์ที่อยู่ภายใน

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

มันจำเป็นสำหรับการเข้าถึง

ตรวจสอบ: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

องค์ประกอบ HTML 4 fieldsetและlegendช่วยให้คุณสามารถจัดรูปแบบและจัดระเบียบแบบฟอร์มขนาดใหญ่ที่มีพื้นที่ที่น่าสนใจมากมายในแบบตรรกะโดยไม่ต้องใช้ตาราง fieldsetแท็กสามารถนำมาใช้ในการสร้างกล่องรอบองค์ประกอบที่เลือกและlegendแท็กจะให้คำอธิบายไปยังองค์ประกอบเหล่านั้น ด้วยวิธีนี้องค์ประกอบแบบฟอร์มสามารถจัดกลุ่มเข้าด้วยกันเป็นหมวดหมู่ที่ระบุ

เบราว์เซอร์ที่แตกต่างกันอาจแสดงfieldsetเส้นขอบเริ่มต้นในวิธีต่างๆ สามารถใช้สไตล์ชีทแบบเรียงซ้อนเพื่อลบเส้นขอบหรือเปลี่ยนลักษณะที่ปรากฏ

ตามที่อธิบายไว้ที่นี่วัตถุประสงค์ของแท็กนี้คือเพื่อให้ความชัดเจนกับองค์กรของฟอร์มและอนุญาตให้นักออกแบบเข้าถึงการตกแต่งองค์ประกอบของฟอร์มได้ง่ายขึ้น

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

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

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

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

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

ฉันใช้ fieldets เพื่อจัดกลุ่มอินพุตแบบฟอร์มเมื่อฉันมีแบบฟอร์มขนาดใหญ่และต้องการแยกมันออกเป็นตัวช่วยสร้างแบบฟอร์ม

คำถามเดียวกันนี้ได้รับคำตอบที่นี่ใน SO

เพียงสรุปข้อดี:

HTML <fieldset> องค์ประกอบถูกใช้เพื่อจัดกลุ่มตัวควบคุมหลายตัวรวมถึงป้ายกำกับ ( <label>) ภายในเว็บฟอร์มตามที่MDNกำหนดไว้ MDN

กล่าวอีกนัยหนึ่ง: แท็ก fieldset ช่วยให้คุณสามารถจัดกลุ่มชุดฟิลด์อย่างมีเหตุผลเพื่อให้แบบฟอร์มของคุณมีความหมายมากขึ้น ดังนั้นชุดควบคุมแบบฟอร์มจะจัดกลุ่มภายใต้ชื่อสามัญซึ่งเป็นทางเลือก

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

ข้อดี " " ของการใช้ fieldset คือ:

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

สำหรับฉันหนึ่งในข้อดีที่สุดของ<fieldset>...</fieldset>องค์ประกอบคือความสามารถในการรักษา<form>...</form>บริบทแม้ว่า<fieldset>...</fieldset>จะไม่ได้อยู่ในรูปแบบ

ตัวอย่างเช่นแบบฟอร์มต่อไปนี้:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

มีความหมายเหมือนกันกับแบบฟอร์มต่อไปนี้:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>