แอตทริบิวท์ required ของ <select> ใน HTML

แอตทริบิวท์ required ของ <select> ใน HTML

แอตทริบิวท์ required ขององค์ประกอบ <select> ใช้เพื่อแจ้งให้ผู้ใช้ทราบว่า <select> dropdown นั้นจำเป็นและต้องส่งก่อนที่ฟอร์มจะส่ง หากคุณไม่เลือกค่าจาก dropdown และพยายามส่งฟอร์ม ฟอร์มจะไม่ส่งและคำเตือนจะปรากฏบนหน้าเว็บเอง แอตทริบิวท์ required ถูกนำมาใช้ใน HTML5

รูปแบบการใช้งานมีดังนี้:

<select required>

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h1>โปรไฟล์ผู้สมัคร</h1>
  <p>รายละเอียดต่อไปนี้ที่ผู้สมัครต้องส่ง:</p>
  <h2>คุณสมบัติการศึกษา</h2>
  <form action="">
    <section>
      <h3>ปริญญาตรี</h3>
      <select required>
        <option value="">ไม่ระบุ</option>
        <option value="bca">BCA</option>
        <option value="bcom">B.COM</option>
        <option value="btech">B.TECH</option>
      </select>
    </section>
    <section>
      <h3>ปริญญาโท</h3>
      <select>
        <option value="mca">MCA</option>
        <option value="mcom">M.COM</option>
        <option value="mtech">M.TECH</option>
        <option value="msc">M.Sc</option>
      </select>
    </section><br>
    <input type="submit" value="ถัดไป">
  </form>
</body>
</html>

ผลลัพธ์จะเป็นดังนี้ เราไม่ได้เลือกไอเทมจากรายการแบบเลื่อนลงที่ตั้งค่าเป็น required ดังนั้นคำเตือนต่อไปนี้จะมองเห็นได้:

ในตัวอย่างข้างต้น เราได้ตั้งค่ารายการแบบเลื่อนลงสองรายการโดยใช้ <select>:

<section> <h3>ปริญญาตรี</h3> <select required> <option value="">ไม่ระบุ</option> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select> </section> <section> <h3>ปริญญาโท</h3> <select> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </select> </section>

เราได้ตั้งค่าหนึ่งในนั้นให้ผู้ใช้กรอกบังคับโดยใช้แอตทริบิวท์ required มิฉะนั้นฟอร์มจะไม่ส่ง:

<section> <h3>ปริญญาตรี</h3> <select required> <option value="">ไม่ระบุ</option> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select> </section>