HTML5 Attribute ของ Input

ใน HTML5 มีประเภทของ <input> ที่หลากหลายเพื่อรองรับการป้อนข้อมูลที่แตกต่างกัน โดยสามารถประยุกต์ใช้ Attribute (คุณลักษณะ) ต่าง ๆ เพื่อควบคุมและปรับแต่งการทำงานของ input ได้ตามต้องการ ซึ่งคุณลักษณะที่นิยมใช้มีดังนี้

Common Attributes (คุณลักษณะทั่วไป)

• type: ระบุประเภทของอินพุต เช่น text, password, email, number, date, ฯลฯ
• name: ระบุชื่อให้กับฟิลด์ข้อมูล ซึ่งใช้เป็นคีย์สำหรับการส่งข้อมูลผ่านฟอร์ม
• value: กำหนดค่าเริ่มต้นให้กับอินพุต
• id: ใช้ระบุ ID ที่เป็นเอกลักษณ์ให้กับองค์ประกอบอินพุต เพื่อใช้งานร่วมกับ JavaScript หรือ CSS
• class: ใช้กำหนดคลาสสำหรับสไตล์ CSS
• placeholder: แสดงข้อความในช่องอินพุตก่อนที่ผู้ใช้จะป้อนข้อมูล
• required: ระบุว่าฟิลด์นี้ต้องป้อนข้อมูล
• readonly: ทำให้อินพุตไม่สามารถแก้ไขได้
• disabled: ทำให้อินพุตไม่สามารถใช้งานได้
• autofocus: ทำให้อินพุตถูกโฟกัสโดยอัตโนมัติเมื่อหน้าเว็บโหลดเสร็จ
• autocomplete: ระบุว่าเบราว์เซอร์ควรเสนอให้เติมข้อมูลอัตโนมัติหรือไม่ (ค่าได้แก่ on หรือ off)
• maxlength: กำหนดจำนวนตัวอักษรสูงสุดที่สามารถป้อนในฟิลด์ได้
• minlength: กำหนดจำนวนตัวอักษรต่ำสุดที่ต้องป้อนในฟิลด์
• pattern: กำหนดรูปแบบ (regular expression) ที่ข้อมูลจะต้องตรงตาม
• form: ระบุว่าอินพุตนี้จะเป็นส่วนหนึ่งของฟอร์มใด โดยกำหนด ID ของฟอร์ม

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

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="กรอกชื่อผู้ใช้" maxlength="20" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="กรอกอีเมล" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" minlength="8" required>
    
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" min="1950-01-01" max="2023-12-31" required>
    
    <label for="color">Favorite Color:</label>
    <input type="color" id="color" name="favcolor" value="#ff0000">
    
    <input type="submit" value="Submit">
</form>