HTML5 Form Elements

Form Elements ใน HTML5 เป็นชุดเครื่องมือที่ช่วยให้ผู้ใช้สามารถกรอกข้อมูลและส่งข้อมูลไปยังเซิร์ฟเวอร์ได้อย่างสะดวก HTML5 ได้เพิ่มความสามารถใหม่ๆ ให้กับฟอร์ม เช่น ชนิดของ input แบบใหม่ ที่ช่วยให้การป้อนข้อมูลมีความถูกต้องมากขึ้น เช่น email, url, date และอื่นๆ

ประเภทของ Form Elements ใน HTML5

1. <form>

ใช้ในการสร้างฟอร์มสำหรับรับข้อมูลจากผู้ใช้

  • คุณสมบัติสำคัญ
    • action: ระบุ URL ที่ข้อมูลฟอร์มจะถูกส่งไป
    • method: ระบุวิธีการส่งข้อมูล (GET หรือ POST)
HTML
<form action="/submit" method="post">
  <input type="text" name="username" placeholder="Enter Username">
  <input type="submit" value="Submit">
</form>

2. <input>

ใช้สำหรับรับข้อมูลในรูปแบบต่างๆ จากผู้ใช้ มีชนิดย่อยที่สำคัญดังนี้

  • type="text": รับข้อมูลแบบข้อความ
  • type="password": รับข้อมูลแบบรหัสผ่าน ข้อมูลจะถูกซ่อน
  • type="email": รับข้อมูลที่เป็นอีเมลและจะตรวจสอบรูปแบบของอีเมล
  • type="url": รับข้อมูล URL และจะตรวจสอบรูปแบบของ URL
  • type="number": รับข้อมูลตัวเลข สามารถระบุช่วงได้ด้วย min และ max
  • type="date": รับข้อมูลวันที่
  • type="radio": ใช้เลือกค่าที่เป็นตัวเลือกเดียวจากกลุ่มตัวเลือก
  • type="checkbox": ใช้เลือกค่าหลายค่าได้
  • type="file": รับข้อมูลไฟล์
  • type=”submit”: ปุ่มสำหรับส่งข้อมูลฟอร์ม

ตัวอย่าง

HTML
<input type="text" name="fullname" placeholder="Enter Full Name">
<input type="password" name="password" placeholder="Enter Password">
<input type="email" name="email" placeholder="Enter Email">
<input type="url" name="website" placeholder="Enter Website URL">
<input type="number" name="age" min="1" max="100" placeholder="Enter Age">
<input type="date" name="birthdate">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="traveling"> Traveling
<input type="file" name="resume">
<input type="submit" value="Submit">

3. <textarea>

  • ใช้สำหรับรับข้อความหลายบรรทัด
HTML
<textarea name="comments" rows="4" cols="50" placeholder="Enter your comments"></textarea>

4. <select> และ <option>

  • ใช้ในการสร้างตัวเลือกแบบ drop-down
HTML
<select name="country">
  <option value="thailand">Thailand</option>
  <option value="usa">USA</option>
  <option value="japan">Japan</option>
</select>

5. <button>

  • ใช้สร้างปุ่ม ซึ่งสามารถใช้แทน <input type="submit">
HTML
<button type="submit">Submit Form</button>

6. <label>

  • ใช้เพื่อระบุป้ายชื่อสำหรับ input elements ทำให้การใช้งานง่ายขึ้น
HTML
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

7. <fieldset> และ <legend>

  • ใช้ในการจัดกลุ่มของฟอร์มและใส่ชื่อกลุ่ม
HTML
<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</fieldset>

คุณสมบัติใหม่ใน HTML5

1. autofocus: ให้ element นั้น ๆ โฟกัสโดยอัตโนมัติเมื่อโหลดหน้าเว็บ

HTML
<input type="text" name="username" autofocus>

2. placeholder: แสดงข้อความชั่วคราวใน input field

HTML
<input type="text" name="fullname" placeholder="Enter Full Name">

3. required: บังคับให้ต้องกรอกข้อมูลก่อนส่งฟอร์ม

HTML
<input type="email" name="email" required>

4. pattern: กำหนดรูปแบบข้อมูลที่ต้องการด้วย regular expression

HTML
<input type="text" name="phone" pattern="[0-9]{10}" placeholder="Enter 10-digit phone number">

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

HTML
<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname" placeholder="Enter Full Name" required>
    <br>

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

    <label for="birthdate">Birthdate:</label>
    <input type="date" id="birthdate" name="birthdate">
  </fieldset>
  
  <fieldset>
    <legend>Preferences</legend>
    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="thailand">Thailand</option>
      <option value="usa">USA</option>
      <option value="japan">Japan</option>
    </select>
    <br>

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

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

Form Elements เหล่านี้ช่วยเพิ่มความสะดวกในการสร้างฟอร์มที่มีความหลากหลายในการใช้งาน ทำให้สามารถรับข้อมูลที่ถูกต้องและสะดวกในการใช้งานมากยิ่งขึ้น

แชร์เรื่องนี้