ทำความเข้าใจ HTML Input Types

HTML Input Types เป็นคุณสมบัติของ <input> ที่ช่วยกำหนดประเภทของข้อมูลที่ต้องการรับจากผู้ใช้งาน เช่น ข้อความ ตัวเลข วันที่ หรืออีเมล การเลือก input type ที่เหมาะสมช่วยปรับปรุงประสบการณ์ผู้ใช้งาน (UX) และเพิ่มความถูกต้องของข้อมูลที่เก็บ

ประเภทของ HTML Input Types ที่ใช้บ่อย

1. text สำหรับกรอกข้อความทั่วไป

<input type="text" name="username" placeholder="Enter your name">

2. password สำหรับกรอกรหัสผ่าน (แสดงเป็นจุดหรือดอกจัน)

<input type="password" name="password" placeholder="Enter your password">

3. email สำหรับกรอกอีเมล ตรวจสอบรูปแบบอัตโนมัติ

<input type="email" name="email" placeholder="Enter your email">

4. number สำหรับกรอกตัวเลขเท่านั้น สามารถกำหนดช่วงด้วย min และ max

<input type="number" name="age" min="1" max="100">

5. tel สำหรับกรอกหมายเลขโทรศัพท์

<input type="tel" name="phone" placeholder="Enter your phone number">

6. url สำหรับกรอก URL (เว็บไซต์)

<input type="url" name="website" placeholder="Enter your website">

7. date สำหรับเลือกวันที่โดยมีปฏิทินแสดง

<input type="date" name="birthdate">

8. time สำหรับเลือกเวลา

<input type="time" name="appointment">

9. checkbox สำหรับเลือกตัวเลือกแบบเปิด/ปิด (หลายตัวเลือก)

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

10. radio สำหรับเลือกตัวเลือกเพียงหนึ่งตัวในกลุ่ม

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

11. file สำหรับอัปโหลดไฟล์

<input type="file" name="document">

12. color สำหรับเลือกสี (Color Picker)

<input type="color" name="favoriteColor">

13. range สำหรับเลือกค่าช่วง (มี slider)

<input type="range" name="volume" min="0" max="100">

14. search สำหรับกรอกข้อความค้นหา

<input type="search" name="searchQuery" placeholder="Search...">

15. hidden ใช้ซ่อนข้อมูลในฟอร์ม

<input type="hidden" name="userID" value="12345">

16. button, submit, reset ใช้สำหรับสร้างปุ่มฟอร์ม

    <button type="submit">Submit</button>
    <input type="reset" value="Reset">

ตัวอย่างฟอร์ม

<form action="/submit" method="POST">
    <label for="username">Name:</label>
    <input type="text" id="username" name="username" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="birthdate">Birthdate:</label>
    <input type="date" id="birthdate" name="birthdate">

    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male"> Male
    <input type="radio" id="female" name="gender" value="female"> Female

    <label for="color">Favorite Color:</label>
    <input type="color" id="color" name="color">

    <button type="submit">Submit</button>
</form>

Tips การเลือก Input Types

1. เลือกประเภทให้เหมาะสม เลือก email สำหรับอีเมล หรือ date สำหรับวันที่ เพื่อให้ HTML ตรวจสอบรูปแบบข้อมูลให้อัตโนมัติ

2. เพิ่มความปลอดภัย ใช้ password สำหรับข้อมูลที่ต้องการความปลอดภัย เช่น รหัสผ่าน

3. ช่วย UX ด้วย Placeholder ใช้ placeholder เพื่อแนะนำว่าผู้ใช้ควรกรอกอะไร

สรุป

HTML Input Types ช่วยเพิ่มความยืดหยุ่นและความสามารถในการรับข้อมูลของฟอร์ม โดยแต่ละประเภทออกแบบมาเพื่อรองรับข้อมูลเฉพาะ เช่น ตัวเลข อีเมล หรือสี การใช้งานที่ถูกต้องจะช่วยเพิ่มประสบการณ์ผู้ใช้และความถูกต้องของข้อมูล