พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน label Tag

ใน HTML5, แท็ก <label> ถูกใช้เพื่อเชื่อมโยงกับฟอร์มอินพุต (form input) เช่น ปุ่มหรือฟิลด์กรอกข้อมูล โดยวัตถุประสงค์หลักของ <label> คือทำให้การใช้งานฟอร์มสะดวกและเข้าถึงได้ง่ายขึ้น ทั้งนี้ <label> ช่วยให้ผู้ใช้สามารถคลิกที่ข้อความของฟอร์มเพื่อเน้น (focus) หรือเลือก input ได้โดยตรง

โครงสร้างพื้นฐานของ <label>

HTML
<label for="input-id">Label Text</label>
<input type="text" id="input-id">

ในตัวอย่างนี้ มีการเชื่อมโยงข้อความ “Label Text” กับช่องกรอกข้อมูลโดยใช้แอตทริบิวต์ for ใน <label> และแอตทริบิวต์ id ใน <input>

วิธีการใช้งาน <label> มี 2 รูปแบบหลัก

1. การใช้งานแบบเชื่อมโยงด้วยแอตทริบิวต์ for

  • เป็นการเชื่อมโยง <label> กับ input โดยตรงผ่านค่า id ของ input
  • เมื่อคลิกที่ข้อความใน <label> ฟิลด์ input ที่เชื่อมโยงอยู่จะถูกเลือก (focus)
HTML
<label for="username">Username:</label>
<input type="text" id="username" name="username">

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกที่ข้อความ “Username:” ช่องกรอกข้อมูลจะถูกเลือกโดยอัตโนมัติ

2. การวาง <label> ครอบรอบ <input>

  • วิธีนี้ <input> จะถูกวางภายในแท็ก <label> โดยตรง ซึ่งทำให้ข้อความและ input ถูกเชื่อมโยงกันโดยไม่ต้องใช้แอตทริบิวต์ for
HTML
<label>
    Password:
    <input type="password" name="password">
</label>

ในตัวอย่างนี้ ผู้ใช้สามารถคลิกที่ข้อความ “Password:” เพื่อเน้นช่องกรอกรหัสผ่านได้

ประโยชน์ของการใช้ <label>

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

ตัวอย่างการประยุกต์ใช้งานหลายแบบ

กับฟอร์มหลายฟิลด์

HTML
<form>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    
    <input type="submit" value="Submit">
</form>

ในตัวอย่างนี้ ทุกฟิลด์จะมี <label> กำกับเพื่อระบุว่าผู้ใช้ควรกรอกข้อมูลอะไรในฟิลด์นั้น

การใช้งานร่วมกับ checkbox และ radio button

HTML
<form>
    <label>
        <input type="checkbox" name="subscribe">
        Subscribe to newsletter
    </label><br>

    <label>
        <input type="radio" name="gender" value="male">
        Male
    </label><br>

    <label>
        <input type="radio" name="gender" value="female">
        Female
    </label>
</form>

ในตัวอย่างนี้ label ครอบรอบ input ของ checkbox และ radio button ทำให้เมื่อคลิกที่ข้อความจะเลือกตัวเลือกนั้นโดยอัตโนมัติ

การใช้ <label> กับ input ประเภทอื่นๆ

HTML
<form>
    <label for="file-upload">Upload a file:</label>
    <input type="file" id="file-upload" name="file-upload"><br><br>

    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>

    <label for="color-picker">Pick a color:</label>
    <input type="color" id="color-picker" name="color-picker"><br><br>

    <input type="submit" value="Submit">
</form>

ในตัวอย่างนี้มีการใช้ <label> กับ input ที่มีประเภทแตกต่างกัน เช่น การอัปโหลดไฟล์ การเลือกวันที่ และการเลือกสี

สรุป

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ