ฟอร์ม (Forms)

ในบทนี้ เราจะมาเรียนรู้วิธีการสร้างฟอร์ม (Forms) ใน HTML เพื่อรับข้อมูลจากผู้ใช้ ซึ่งเป็นส่วนประกอบสำคัญในการสร้างปฏิสัมพันธ์กับผู้ใช้งานบนเว็บไซต์ของคุณ ฟอร์มช่วยให้ผู้ใช้สามารถป้อนข้อมูลต่างๆ เช่น ชื่อ ที่อยู่ อีเมล ข้อความ หรือเลือกตัวเลือกต่างๆ ได้ จากนั้นข้อมูลเหล่านี้จะถูกส่งไปยังเซิร์ฟเวอร์เพื่อทำการประมวลผล

องค์ประกอบพื้นฐานของฟอร์ม

ฟอร์มใน HTML ประกอบด้วยองค์ประกอบหลักๆ ดังนี้:

• <form>: เป็นแท็กหลักที่ใช้ห่อหุ้มองค์ประกอบทั้งหมดของฟอร์ม
• <input>: ใช้สำหรับสร้างช่องกรอกข้อมูลประเภทต่างๆ เช่น ช่องข้อความ ช่องรหัสผ่าน ช่องเลือก (checkbox, radio button)
• <textarea>: ใช้สำหรับสร้างช่องกรอกข้อความขนาดใหญ่
• <button>: ใช้สำหรับสร้างปุ่มต่างๆ เช่น ปุ่มส่งข้อมูล (Submit) หรือปุ่มยกเลิก (Cancel)
• <label>: ใช้สำหรับกำกับหรืออธิบายช่องกรอกข้อมูล
• <select>: ใช้สำหรับสร้างรายการตัวเลือกแบบดรอปดาวน์
• <option>: ใช้สำหรับกำหนดตัวเลือกแต่ละรายการใน <select>

แท็ก <form>

แท็ก <form> เป็นแท็กเริ่มต้นและสิ้นสุดของฟอร์ม ทำหน้าที่กำหนดขอบเขตของฟอร์มและกำหนดคุณสมบัติ (attributes) ที่เกี่ยวข้องกับการส่งข้อมูลของฟอร์ม

<form action="process.php" method="post">
  <!-- องค์ประกอบของฟอร์มจะอยู่ภายในแท็กนี้ -->
</form>

Attributes ที่สำคัญของแท็ก <form>:

• action: กำหนด URL ของไฟล์หรือสคริปต์ที่จะใช้ประมวลผลข้อมูลที่ส่งมาจากฟอร์ม ตัวอย่างในโค้ดด้านบนคือ process.php
• method: กำหนดวิธีการส่งข้อมูลจากฟอร์มไปยังเซิร์ฟเวอร์ มี 2 ค่าหลักๆ คือ get และ post
  • get: ส่งข้อมูลผ่าน URL (ข้อมูลจะปรากฏใน address bar ของเบราว์เซอร์) เหมาะสำหรับข้อมูลที่ไม่เป็นความลับและมีขนาดเล็ก
  • post: ส่งข้อมูลในส่วนของ HTTP request body (ข้อมูลจะไม่ปรากฏใน address bar) เหมาะสำหรับข้อมูลที่เป็นความลับหรือมีขนาดใหญ่

แท็ก <input>

แท็ก <input> เป็นแท็กที่ใช้สร้างช่องกรอกข้อมูลประเภทต่างๆ โดยประเภทของช่องกรอกจะถูกกำหนดโดย attribute type

<label for="name">ชื่อ:</label><br>
<input type="text" id="name" name="name"><br><br>

<label for="email">อีเมล:</label><br>
<input type="email" id="email" name="email"><br><br>

<label for="password">รหัสผ่าน:</label><br>
<input type="password" id="password" name="password"><br><br>

Attributes ที่สำคัญของแท็ก <input>:

• type: กำหนดประเภทของช่องกรอกข้อมูล มีหลายประเภทให้เลือกใช้ เช่น
  • text: ช่องข้อความบรรทัดเดียว
  • password: ช่องรหัสผ่าน (ข้อความจะถูกซ่อน)
  • email: ช่องอีเมล (เบราว์เซอร์จะตรวจสอบรูปแบบอีเมลเบื้องต้น)
  • number: ช่องตัวเลข (เบราว์เซอร์จะแสดงปุ่มเพิ่ม/ลดตัวเลข)
  • date: ช่องวันที่ (เบราว์เซอร์จะแสดงตัวเลือกวันที่)
  • checkbox: ช่องเลือกแบบหลายตัวเลือก
  • radio: ช่องเลือกแบบตัวเลือกเดียว
  • file: ช่องเลือกไฟล์
  • submit: ปุ่มส่งข้อมูล
  • reset: ปุ่มล้างข้อมูล
  • hidden: ช่องที่ซ่อนไว้ (ใช้สำหรับส่งข้อมูลที่ไม่ต้องการให้ผู้ใช้เห็น)
• id: กำหนด ID ของช่องกรอกข้อมูล (ใช้สำหรับอ้างอิงใน CSS และ JavaScript)
• name: กำหนดชื่อของช่องกรอกข้อมูล (ใช้สำหรับส่งข้อมูลไปยังเซิร์ฟเวอร์)
• value: กำหนดค่าเริ่มต้นของช่องกรอกข้อมูล
• placeholder: กำหนดข้อความแนะนำที่แสดงภายในช่องกรอกข้อมูล
• required: กำหนดให้ช่องกรอกข้อมูลนี้ต้องถูกกรอก
• readonly: กำหนดให้ช่องกรอกข้อมูลนี้ไม่สามารถแก้ไขได้
• disabled: กำหนดให้ช่องกรอกข้อมูลนี้ถูกปิดใช้งาน

แท็ก <textarea>

แท็ก <textarea> ใช้สำหรับสร้างช่องกรอกข้อความขนาดใหญ่ (หลายบรรทัด)

<label for="message">ข้อความ:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

Attributes ที่สำคัญของแท็ก <textarea>:

• id: กำหนด ID ของช่องกรอกข้อมูล
• name: กำหนดชื่อของช่องกรอกข้อมูล
• rows: กำหนดจำนวนแถวของช่องกรอกข้อมูล
• cols: กำหนดจำนวนคอลัมน์ของช่องกรอกข้อมูล
• placeholder: กำหนดข้อความแนะนำที่แสดงภายในช่องกรอกข้อมูล
• required: กำหนดให้ช่องกรอกข้อมูลนี้ต้องถูกกรอก
• readonly: กำหนดให้ช่องกรอกข้อมูลนี้ไม่สามารถแก้ไขได้
• disabled: กำหนดให้ช่องกรอกข้อมูลนี้ถูกปิดใช้งาน

แท็ก <button>

แท็ก <button> ใช้สำหรับสร้างปุ่มต่างๆ ในฟอร์ม

<button type="submit">ส่งข้อมูล</button>
<button type="reset">ล้างข้อมูล</button>
<button type="button">ปุ่มทั่วไป</button>

Attributes ที่สำคัญของแท็ก <button>:

• type: กำหนดประเภทของปุ่ม
  • submit: ปุ่มส่งข้อมูล (ส่งฟอร์มไปยังเซิร์ฟเวอร์)
  • reset: ปุ่มล้างข้อมูล (ล้างข้อมูลในฟอร์ม)
  • button: ปุ่มทั่วไป (สามารถกำหนดการทำงานด้วย JavaScript)

ตัวอย่างฟอร์มแบบเต็ม

ต่อไปนี้เป็นตัวอย่างฟอร์มที่รวมองค์ประกอบต่างๆ ที่เราได้เรียนรู้มา:

<form action="process.php" method="post">
  <label for="name">ชื่อ:</label><br>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">อีเมล:</label><br>
  <input type="email" id="email" name="email" placeholder="yourname@example.com" required><br><br>

  <label for="message">ข้อความ:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">ส่งข้อมูล</button>
</form>

คำอธิบาย:

• ฟอร์มนี้จะส่งข้อมูลไปยังไฟล์ process.php โดยใช้วิธี post
• มีช่องกรอกข้อมูลสำหรับชื่อ อีเมล และข้อความ
• ช่องชื่อและอีเมลเป็นช่องที่ต้องกรอก (required)
• ช่องอีเมลมีข้อความแนะนำ (placeholder)
• มีปุ่ม "ส่งข้อมูล" สำหรับส่งฟอร์ม

ประเภทของ Input ที่พบบ่อยและควรรู้จัก

นอกจากประเภท input ที่กล่าวมาข้างต้น ยังมีประเภท input อื่นๆ ที่มีประโยชน์ในการสร้างฟอร์มที่มีความหลากหลาย:

• color: แสดงตัวเลือกสีให้ผู้ใช้เลือก

<label for="favcolor">สีที่ชอบ:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">

• range: แสดงแถบเลื่อนให้ผู้ใช้เลือกค่าในช่วงที่กำหนด

<label for="volume">ระดับเสียง:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

• search: คล้ายกับ text แต่เบราว์เซอร์อาจแสดงปุ่มล้างข้อมูลในช่องนี้

<label for="gsearch">ค้นหา:</label>
<input type="search" id="gsearch" name="gsearch">

• tel: สำหรับใส่เบอร์โทรศัพท์ โดยทั่วไปจะไม่มีการตรวจสอบรูปแบบ แต่เบราว์เซอร์บนมือถืออาจแสดงแป้นตัวเลข

<label for="phone">เบอร์โทรศัพท์:</label>
<input type="tel" id="phone" name="phone">

• url: สำหรับใส่ URL เบราว์เซอร์จะตรวจสอบรูปแบบ URL เบื้องต้น

<label for="homepage">URL หน้าเว็บ:</label>
<input type="url" id="homepage" name="homepage">

• time: สำหรับเลือกเวลา

<label for="appt">เลือกเวลา:</label>
<input type="time" id="appt" name="appt">

• week: สำหรับเลือกสัปดาห์

<label for="week">เลือกสัปดาห์:</label>
<input type="week" id="week" name="week">

• month: สำหรับเลือกเดือน

<label for="month">เลือกเดือน:</label>
<input type="month" id="month" name="month">

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับวิธีการสร้างฟอร์มใน HTML เพื่อรับข้อมูลจากผู้ใช้ เราได้ครอบคลุมองค์ประกอบพื้นฐานของฟอร์ม เช่น <form>, <input>, <textarea>, และ <button> รวมถึง attributes ที่สำคัญต่างๆ และประเภทของ input ที่พบบ่อย การสร้างฟอร์มเป็นทักษะที่สำคัญในการพัฒนาเว็บไซต์แบบไดนามิกที่สามารถโต้ตอบกับผู้ใช้ได้

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ Semantic HTML ซึ่งเป็นวิธีการเขียน HTML ที่มีความหมายและช่วยให้เว็บไซต์ของคุณเป็นมิตรกับ search engine และผู้ใช้งานมากขึ้น