แอตทริบิวต์ required ใน HTML

แอตทริบิวต์ required ใน HTML ใช้กำหนดว่าองค์ประกอบ HTML ต้องถูกกรอกก่อนส่งฟอร์มในเอกสาร HTML สามารถใช้กับ input, select, และ textarea ได้

ไวยากรณ์

<tagname required></tagname>

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
</style>
<body>
<h1>ตัวอย่างแอตทริบิวต์ required ของ HTML</h1>
<p>เลือกวิชาที่คุณชอบ:</p>
<form method="post">
  <select required>
    <option value="">ไม่เลือก</option>
    <option value="Physics">ฟิสิกส์</option>
    <option value="Chemistry">เคมี</option>
    <option value="Biology">ชีววิทยา</option>
  </select>
  <input type="submit" value="ส่ง" class="btn">
</form>
</body>
</html>

ผลลัพธ์

คลิกปุ่ม "ส่ง" โดยไม่เลือกวิชาจากรายการแบบเลื่อนเลือก

เบราว์เซอร์จะแสดงข้อความแจ้งเตือนว่าต้องเลือกก่อนส่งได้