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

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

แอตทริบิวท์ required ขององค์ประกอบ <input> ใช้สำหรับกำหนดฟิลด์ที่จำเป็นต้องกรอกก่อนที่ฟอร์มจะถูกส่ง หากฟิลด์ที่ตั้งค่า required ไม่ได้กรอก แล้วคลิกปุ่ม SUBMIT ฟอร์มจะไม่ส่ง

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

<input required>

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h2>สมัครสมาชิก</h2>
  <form action="" method="get">
    ID - <input type="text" name="id" placeholder="ป้อน UserId ที่นี่..." required><br>
    รหัสผ่าน - <input type="password" name="pwd" placeholder="ป้อนรหัสผ่านที่นี่..." required><br>
    วันเกิด - <input type="date" name="dob" placeholder="ป้อนวันเกิดที่นี่..."><br>
    โทรศัพท์ - <input type="tel" name="tel" placeholder="ป้อนเบอร์มือถือที่นี่..." required><br>
    อีเมล - <input type="email" name="email" placeholder="ป้อนอีเมลที่นี่..."><br><br>
    <button type="submit" value="Submit">Submit</button>
  </form>
</body>
</html>

ผลลัพธ์

สมมติเราจะคลิกปุ่ม Submit โดยไม่กรอกฟิลด์ 3 ฟิลด์ ID, รหัสผ่าน และ โทรศัพท์ ฟอร์มจะไม่ส่ง เราไม่ได้กรอกฟิลด์ "โทรศัพท์" ที่นี่ ดังนั้นข้อผิดพลาดจะปรากฏขึ้นไม่ให้ส่งฟอร์ม: