วิธีสร้างฟอร์ม HTML: คู่มือฉบับสมบูรณ์

เอลิเมนต์ <label> ใน HTML

ใช้ <label> เพิ่มฉลากให้แต่ละช่องในฟอร์ม ระบุวัตถุประสงค์และข้อมูลที่รับ รวมถึงข้อความที่โปรแกรมอ่านหน้าจอ (screen reader) จะอ่านเมื่อเจอช่องอินพุต

ไวยากรณ์ <label>:

<form> <label for="name">Name:</label><br/> <input type="text" id="name" name="name"> </form>

สร้างฟอร์มรับชื่อ ใช้ <label> ฉลาก "Name:" แอตทริบิวต์ for ต้องเท่ากับ id ของอินพุตที่เกี่ยวข้อง เพื่อผูกฉลากกับช่องกรอก

องค์ประกอบฟอร์ม HTML

กลับไปที่ Three Brothers Coffee House ต้องการ 4 ข้อมูล: ชื่อ, อีเมล, สถานะลูกค้า, ข้อความ สร้าง 2 ช่องแล้ว (ชื่อ, อีเมล) มาสร้างส่วนที่เหลือกัน

ปุ่มตัวเลือก (Radio Buttons)

ปุ่มตัวเลือกใช้บ่อยในฟอร์ม HTML ให้ผู้ใช้เลือก 1 ค่าจากจำนวนจำกัด ใช้สำหรับเพศ, ช่วงอายุ, หรือตอบใช่/ไม่

ไวยากรณ์:

<input type="radio" name="radio_button">

ฟอร์มเราต้องการถามว่าผู้ใช้เป็นลูกค้าร้าน Three Brothers หรือไม่ ใช้ radio button:

<form> <p>Are you a customer of the Three Brothers Coffee House?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">Yes</label><br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">No</label><br /> </form>

คลิกปุ่ม เพื่อรันโค้ด

ผู้ใช้ส่งค่า yes หรือ no แยกวิเคราะห์: สร้าง <form>, <p> ข้อความอธิบาย, radio button ค่า yes พร้อมฉลาก "Yes", radio button ค่า no พร้อมฉลาก "No" แอตทริบิวต์ value คือข้อมูลที่ส่งไปเซิร์ฟเวอร์เมื่อผู้ใช้กดส่ง

เอลิเมนต์ <textarea> ใน HTML

เหลือช่องกรอกข้อความ (message) ใช้ <textarea>:

<form> <label for="message">Message:</label><br /> <textarea id="message" name="message"> What message do you want to send to the Three Brothers Coffee House? </textarea> </form>

สร้างฉลาก "Message:" แล้ว <textarea> พร้อมแอตทริบิวต์:

1. id อ้างอิงเนื้อหาหลังผู้ใช้ส่ง
2. name จำเป็นต้องมีเพื่อส่งฟอร์ม

ข้อความเริ่มต้น "What message do you want to send to the Three Brothers Coffee House?" วางระหว่างแท็กเปิด/ปิด <textarea>

ผลลัพธ์:

คลิกปุ่ม เพื่อรันโค้ด

ตอนนี้มีช่องข้อความ ให้ผู้ใช้ส่งข้อความไปร้านกาแฟ

ปุ่ม submit ใน HTML

พร้อมเพิ่มปุ่ม submit ไวยากรณ์:

<input type="submit" value="Submit">

ปุ่ม submit ส่งเนื้อหาฟอร์มไปยัง form handler (หน้าบนเซิร์ฟเวอร์ที่ประมวลผล) ผ่านแอตทริบิวต์ action ของ <form>

เพิ่มปุ่ม submit ให้ฟอร์มร้านกาแฟ:

<form action="/post.php"> <label for="name">Name:</label> <br/> <input type="text" id="name" name="name"> <br /> <br /> <label for="email">Email:</label> <br /> <input type="email" id="email" name="email"> <br /> <p>Are you a customer of the Three Brothers Coffee House?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">Yes</label> <br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">No</label> <br /><br /> <label for="message">Message:</label><br /> <textarea id="message" name="message"> What message do you want to send to the Three Brothers Coffee House? </textarea> <input type="submit" value="Submit"> </form>

เพิ่มปุ่ม submit และระบุ action ใน <form> ลิงก์ไปไฟล์จัดการฟอร์ม

การส่งฟอร์มเว็บ

หลังสร้างฟอร์ม ต้องสร้าง handler ประมวลผลข้อมูล <form> มี 2 แอตทริบิวต์ส่งข้อมูล: action และ method

แอตทริบิวต์ action ของฟอร์ม

action กำหนดตำแหน่งโค้ด form handler เมื่อส่งฟอร์ม (กดปุ่ม submit) ข้อมูลจะไปที่ handler

ตัวอย่าง ข้อมูลส่งไป post.php:

<form action="/post.php"> </form>

หากไม่ระบุ action ฟอร์มจะส่งไปหน้าปัจจุบัน

แอตทริบิวต์ method ของฟอร์ม

method ระบุ HTTP method ใช้ส่งฟอร์ม ค่าเริ่มต้นคือ GET แต่ใช้ POST หรือ method อื่นได้

ตัวอย่าง:

<form action="/post.php" method="POST"> </form>

ส่งข้อมูลด้วย HTTP POST (หากต้องการ GET ระบุ "GET" หรือเว้นว่าง เพราะเป็นค่าเริ่มต้น)

ส่วนใหญ่ควรใช้ HTTP POST เพราะ GET ทำให้ข้อมูลฟอร์มมองเห็นได้ใน address bar เช่น /post.php?name=Pauline วิธีนี้ไม่ปลอดภะ ไม่ควรใช้ GET สำหรับข้อมูลละเอียดอ่อน

สรุป

ฟอร์มเป็นฟีเจอร์สำคัญของ HTML รวบรวมและประมวลผลข้อมูลผู้ใช้

บทช่วยสอนนี้อธิบายพื้นฐานฟอร์ม HTML และวิธีสร้างฟอร์มเว็บแรก ตอนนี้คุณพร้อมออกแบบและพัฒนาฟอร์ม HTML อย่างมืออาชีพแล้ว!