การสร้างแบบฟอร์ม HTML

ยินดีต้อนรับสู่บทเรียนถัดไป! ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีสร้างแบบฟอร์มโดยใช้ HTML แบบฟอร์มมีความสำคัญอย่างยิ่งต่อการรวบรวมข้อมูลนำเข้าจากผู้ใช้ ซึ่งภายหลังคุณสามารถประมวลผลด้วย PHP ได้ มาเริ่มกันเลย!

แบบฟอร์ม HTML คืออะไร

แบบฟอร์ม HTML ใช้สำหรับรวบรวมข้อมูลนำเข้าจากผู้ใช้ ช่วยให้ผู้ใช้กรอกข้อมูลในช่อง เลือกตัวเลือก และส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อประมวลผลได้

ตัวอย่าง: แบบฟอร์มเข้าสู่ระบบที่ผู้ใช้กรอกชื่อผู้ใช้และรหัสผ่าน

ประเด็นสำคัญ: แบบฟอร์มทำหน้าที่เป็นสะพานเชื่อมระหว่างผู้ใช้กับสคริปต์ PHP ของคุณ

การสร้างแบบฟอร์มอย่างง่าย

นี่คือวิธีสร้างแบบฟอร์ม HTML พื้นฐาน:

คำอธิบาย:

• action: ระบุไฟล์ PHP ที่ใช้จัดการข้อมูลแบบฟอร์ม
• method: ระบุวิธีส่งข้อมูล (GET หรือ POST)
• required: กำหนดว่าต้องกรอกช่องนี้ก่อนส่งแบบฟอร์ม

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

องค์ประกอบของแบบฟอร์ม

แบบฟอร์มสามารถมีประเภทข้อมูลนำเข้าต่าง ๆ เพื่อรวบรวมข้อมูลหลายชนิด:

• text: สำหรับข้อมูลข้อความบรรทัดเดียว
• email: สำหรับที่อยู่อีเมล
• password: สำหรับข้อมูลรหัสผ่าน
• checkbox: สำหรับการเลือกได้หลายรายการ
• radio: สำหรับการเลือกได้รายการเดียว
• submit: สำหรับส่งแบบฟอร์ม

ตัวอย่าง:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

การใช้ปุ่มตัวเลือก

ปุ่มตัวเลือกช่วยให้ผู้ใช้เลือกหนึ่งตัวเลือกจากกลุ่มได้ ตัวอย่าง:

เคล็ดลับ: ใช้แอตทริบิวต์ name เดียวกันสำหรับปุ่มตัวเลือกทั้งหมดในกลุ่ม

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

การใช้ช่องทำเครื่องหมาย

ช่องทำเครื่องหมายช่วยให้ผู้ใช้เลือกได้หลายตัวเลือก ตัวอย่าง:

เคล็ดลับ: ใช้ไวยากรณ์อาร์เรย์ (hobbies[]) เพื่อรวบรวมหลายค่า

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

เมนูแบบเลื่อนลง

เมนูแบบเลื่อนลงช่วยให้ผู้ใช้เลือกหนึ่งตัวเลือกจากรายการได้ ตัวอย่าง:

เคล็ดลับ: ใช้ selected เพื่อกำหนดตัวเลือกเริ่มต้น

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

การเข้าถึงแบบฟอร์ม

ตรวจสอบให้แน่ใจว่าแบบฟอร์มของคุณเข้าถึงได้สำหรับผู้ใช้ทุกคน:

• ใช้แท็ก label ที่เชื่อมโยงกับข้อมูลนำเข้าด้วยแอตทริบิวต์ for
• จัดกลุ่มข้อมูลนำเข้าที่เกี่ยวข้องโดยใช้ fieldset และ legend
• ทดสอบแบบฟอร์มเพื่อดูว่าสามารถใช้งานได้บนอุปกรณ์เคลื่อนที่

เคล็ดลับ: แบบฟอร์มที่เข้าถึงได้ช่วยปรับปรุงประสบการณ์ของผู้ใช้ทุกคน!

ทำได้ยอดเยี่ยม!

ขอแสดงความยินดี! คุณได้เรียนรู้วิธีสร้างแบบฟอร์ม HTML ที่มีประเภทข้อมูลนำเข้าหลากหลายแล้ว ทั้งช่องข้อความ ปุ่มตัวเลือก ช่องทำเครื่องหมาย และเมนูแบบเลื่อนลง แบบฟอร์มเป็นพื้นฐานของการรับข้อมูลนำเข้าในงานพัฒนาเว็บ ในบทเรียนถัดไป เราจะเรียนรู้วิธีประมวลผลข้อมูลแบบฟอร์มโดยใช้ PHP มาเขียนโค้ดกันต่อเลย!