พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน form Tag

<form> ใน HTML5 เป็นแท็กที่ใช้สร้างฟอร์มสำหรับการกรอกข้อมูล โดยจะใช้ส่งข้อมูลไปยังเซิร์ฟเวอร์หรือใช้สำหรับการประมวลผลข้อมูลในฝั่งไคลเอนต์ รูปแบบและการทำงานของฟอร์มมีหลายแบบที่สามารถนำไปประยุกต์ใช้งานได้หลากหลายขึ้นอยู่กับความต้องการของผู้ใช้

โครงสร้างพื้นฐานของ <form>

HTML
<form action="URL" method="POST/GET">
    <!-- Input elements go here -->
</form>

อธิบายแอตทริบิวต์หลัก

  1. action: ระบุ URL ที่ข้อมูลจากฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์
  2. method: ระบุวิธีการส่งข้อมูล มีสองแบบคือ:
    • GET: ส่งข้อมูลผ่าน URL เหมาะกับการขอข้อมูลที่ไม่ซับซ้อน
    • POST: ส่งข้อมูลใน body ของ request เหมาะกับการส่งข้อมูลที่ซับซ้อนหรือข้อมูลที่เป็นความลับ
  3. enctype: ใช้กำหนดรูปแบบการเข้ารหัสข้อมูลที่ส่งไปในกรณีของ POST โดยมีค่าที่ใช้บ่อยคือ multipart/form-data สำหรับการส่งไฟล์

ตัวอย่างการใช้งาน

ฟอร์มพื้นฐานสำหรับส่งข้อมูล

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

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

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

ฟอร์มนี้จะส่งชื่อผู้ใช้และรหัสผ่านไปที่ URL /submit โดยใช้วิธี POST ซึ่งเป็นวิธีที่ปลอดภัยกว่าสำหรับการส่งข้อมูลที่สำคัญ เช่น รหัสผ่าน

ฟอร์มแบบ GET สำหรับการค้นหา

HTML
<form action="/search" method="GET">
    <label for="query">Search:</label>
    <input type="text" id="query" name="query">
    <button type="submit">Search</button>
</form>

ในฟอร์มนี้ เมื่อผู้ใช้กดปุ่ม submit ข้อมูลการค้นหาจะถูกส่งผ่าน URL เช่น /search?query=keyword ซึ่งวิธีนี้เหมาะสำหรับการค้นหาหรือส่งข้อมูลที่ไม่เป็นความลับ

ฟอร์มอัปโหลดไฟล์

HTML
<form action="/upload" method="POST" enctype="multipart/form-data">
    <label for="file">Upload a file:</label>
    <input type="file" id="file" name="file" required>
    <button type="submit">Upload</button>
</form>

การใช้งานฟอร์มนี้เหมาะสำหรับการอัปโหลดไฟล์ โดยจะใช้ enctype="multipart/form-data" เพื่อให้สามารถส่งข้อมูลไฟล์ได้

ฟอร์มที่มีการตรวจสอบข้อมูล (Validation)

HTML5 มาพร้อมกับคุณสมบัติการตรวจสอบข้อมูล (form validation) ในฟอร์ม โดยสามารถกำหนดข้อกำหนดเพิ่มเติมใน <input> ได้ เช่น

HTML
<form action="/register" method="POST">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="age">Age (between 18 and 60):</label>
    <input type="number" id="age" name="age" min="18" max="60" required>

    <label for="password">Password (min 8 characters):</label>
    <input type="password" id="password" name="password" minlength="8" required>

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

การตั้งค่าต่าง ๆ เช่น required, min, max, และ minlength จะทำให้เว็บบราวเซอร์สามารถตรวจสอบข้อมูลได้ก่อนที่จะส่งไปยังเซิร์ฟเวอร์

ฟอร์มที่ใช้ฟีเจอร์ Autofocus, Placeholder และ Autocomplete

HTML
<form action="/signup" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" autofocus>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" autocomplete="on">

    <button type="submit">Sign up</button>
</form>
  • autofocus จะทำให้ input ที่มีแอตทริบิวต์นี้ได้รับโฟกัสทันทีเมื่อหน้าเว็บโหลด
  • placeholder ใช้แสดงข้อความที่เป็นแนวทางในฟิลด์กรอกข้อมูล
  • autocomplete="on" ช่วยให้เบราว์เซอร์เติมข้อมูลอัตโนมัติจากข้อมูลที่ผู้ใช้เคยกรอก

ฟอร์มที่มีปุ่ม Reset และปุ่ม Submit

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

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

    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
</form>
  • ปุ่ม submit ใช้สำหรับส่งข้อมูลฟอร์มไปยังเซิร์ฟเวอร์
  • ปุ่ม reset ใช้สำหรับล้างข้อมูลที่กรอกในฟอร์มทั้งหมด

สรุป

<form> ใน HTML5 เป็นเครื่องมือสำคัญในการรับข้อมูลจากผู้ใช้ มีการใช้งานที่หลากหลาย เช่น การส่งข้อมูลด้วยวิธี GET/POST การอัปโหลดไฟล์ การตรวจสอบข้อมูลเบื้องต้นผ่าน HTML และการทำงานร่วมกับฟีเจอร์ใหม่ ๆ ใน HTML5 เช่น autofocus, placeholder, autocomplete

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

เรื่องที่น่าสนใจ