close

ความรู้เบื้องต้นเกี่ยว Form กับ HTML: โครงสร้าง ประเภทอินพุต และตัวอย่าง

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

ช่องป้อนข้อมูล

  • <input type="text">: สร้างฟิลด์ป้อนข้อความที่ผู้ใช้สามารถป้อนอักขระที่เป็นตัวอักษรและตัวเลขคละกันได้
  • <input type="password">: แสดงฟิลด์ป้อนรหัสผ่านที่ปิดบังอักขระที่ป้อน
  • <input type="email">: ให้การตรวจสอบอีเมลสำหรับช่องป้อนข้อมูลที่ต้องใช้ที่อยู่อีเมลที่ถูกต้อง
  • <input type="number">: จำกัดการป้อนข้อมูลเป็นค่าตัวเลขเท่านั้น
  • <input type="checkbox">: แสดงช่องทำเครื่องหมายที่ผู้ใช้สามารถเลือกหรือยกเลิกการเลือกได้
  • <input type="radio">: แสดงปุ่มตัวเลือกที่อนุญาตให้ผู้ใช้เลือกหนึ่งตัวเลือกจากกลุ่มตัวเลือก
  • <input type="file">: ให้ผู้ใช้เลือกและอัพโหลดไฟล์
  • <input type="submit">: แสดงปุ่มที่ส่ง form เมื่อคลิก
  • <input type="reset">: แสดงปุ่มที่รีเซ็ต form เป็นสถานะเริ่มต้น
  • <input type="date">: จัดเตรียมตัวเลือกวันที่สำหรับการเลือกวันที่
  • <input type="time">: อนุญาตให้ผู้ใช้ป้อนค่าเวลา

เลือกองค์ประกอบ

  • <select>: สร้างเมนูแบบเลื่อนลงพร้อมตัวเลือกที่เลือกได้
  • <option>: กำหนดตัวเลือกภายในเมนูแบบเลื่อนลง ซึ่งวางไว้ภายใน <select> แท็ก
  • <optgroup>: จัดกลุ่มตัวเลือกที่เกี่ยวข้องเข้าด้วยกันภายในเมนูแบบเลื่อนลง
  • <select multiple>: อนุญาตให้ผู้ใช้เลือกหลายตัวเลือกพร้อมกันโดยกดปุ่ม Ctrl(หรือปุ่ม Command บน Mac) ค้างไว้ขณะคลิก

พื้นที่ข้อความ

<textarea>: สร้างฟิลด์ป้อนข้อความหลายบรรทัดที่ผู้ใช้สามารถป้อนและแก้ไขบล็อกข้อความที่ยาวขึ้นได้ สามารถปรับขนาดและกำหนดค่าด้วยแอตทริบิวต์เช่น rows และ cols เพื่อกำหนดขนาด

ปุ่ม

<button>: หมายถึงปุ่มที่สามารถทริกเกอร์การกระทำต่างๆ ภายในไฟล์ form. สามารถใช้เพื่อส่ง form ต่อ form ฟังก์ชัน JavaScript หรือนำทางไปยังหน้าอื่น

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

<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>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

ตัวอย่างนี้แสดงการใช้องค์ประกอบต่างๆ รวม form ถึง input ฟิลด์ textarea, checkbox และ select dropdown ปุ่ม submit อย่าลังเลที่จะปรับแต่ง form องค์ประกอบและคุณสมบัติตามความต้องการเฉพาะของคุณ