Frontend Academy · บทเรียน

ฟอร์ม: input label button

สร้างฟอร์ม HTML ที่เข้าถึงได้ พร้อม input ที่มีป้ายกำกับ ชนิด input ต่าง ๆ พื้นที่ข้อความ ช่องเลือก และปุ่มส่ง

ฟอร์ม: input label button เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้แบบฟอร์ม HTML

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

องค์ประกอบ <form>

องค์ประกอบ <form> ใช้ครอบตัวควบคุมที่เกี่ยวข้องทั้งหมด แอตทริบิวต์ action กำหนดที่อยู่เว็บที่จะรับข้อมูล ส่วน method กำหนด GET หรือ POST สำหรับแอปแบบหน้าเดียว โดยทั่วไปคุณจะป้องกันการส่งแบบฟอร์มตามค่าเริ่มต้น แล้วจัดการด้วย JavaScript

<form action="/submit" method="POST">
  <!-- inputs go here -->
</form>

ช่องป้อนข้อความและอีเมล

องค์ประกอบ <input> เป็นส่วนสำคัญของแบบฟอร์ม แอตทริบิวต์ type จะเปลี่ยนพฤติกรรมขององค์ประกอบ ใช้ type="text" สำหรับข้อความอิสระ และใช้ type="email" สำหรับที่อยู่อีเมล (ตรวจสอบรูปแบบและแสดงแป้นพิมพ์บนอุปกรณ์เคลื่อนที่ที่เหมาะสม)

<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">

รหัสผ่าน ตัวเลข และชนิดอื่น ๆ

ชนิดช่องป้อนข้อมูลอื่น ๆ ที่มีประโยชน์ ได้แก่ password (ซ่อนอักขระ) number (ตรวจสอบว่าเป็นตัวเลขและแสดงปุ่มเพิ่มลด) date (แสดงเครื่องมือเลือกวันที่) range (แถบเลื่อน) checkbox (สวิตช์ค่าจริง/เท็จ) และ radio (ตัวเลือกหนึ่งรายการจากหลายรายการ)

<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">

องค์ประกอบ <label> — สำคัญต่อการเข้าถึง

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

<label for="username">Username</label>
<input type="text" id="username" name="username">

พื้นที่ข้อความและรายการเลือก

ใช้ <textarea> สำหรับข้อความหลายบรรทัด (เช่น ความคิดเห็น) ใช้ <select> ที่มี <option> เป็นองค์ประกอบย่อยสำหรับตัวเลือกแบบรายการเลื่อนลง ควรใส่ตัวเลือกว่างเริ่มต้นพร้อมข้อความแจ้ง เช่น "เลือกหมวดหมู่" เสมอ

<textarea name="message" rows="4" placeholder="Write your message..."></textarea>

<select name="level">
  <option value="">Select level...</option>
  <option value="a1">A1 Beginner</option>
  <option value="b1">B1 Intermediate</option>
</select>

ช่องทำเครื่องหมายและปุ่มตัวเลือก

จัดกลุ่มช่องทำเครื่องหมายที่เกี่ยวข้องด้วย <fieldset> และ <legend> ปุ่มตัวเลือกที่ใช้ name เดียวกันจะอนุญาตให้เลือกได้เพียงรายการเดียว แต่ละรายการต้องมีป้ายกำกับของตนเอง

<fieldset>
  <legend>Preferred languages</legend>
  <label><input type="checkbox" name="lang" value="js"> JavaScript</label>
  <label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>

ปุ่ม: ส่งแบบฟอร์ม รีเซ็ต และปุ่มทั่วไป

<button type="submit"> ใช้ส่งแบบฟอร์ม type="reset" ใช้ล้างช่องข้อมูลทั้งหมด ส่วน type="button" จะไม่ทำอะไรโดยค่าเริ่มต้น และใช้ร่วมกับตัวรับฟังเหตุการณ์ของ JavaScript ควรกำหนดชนิดให้เสมอ เพราะค่าเริ่มต้นคือการส่งแบบฟอร์ม

<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>

การจัดกลุ่มอินพุตด้วย <fieldset>

<fieldset> ใช้จัดกลุ่มตัวควบคุมที่เกี่ยวข้องทั้งในด้านภาพและความหมาย ส่วน <legend> ที่จำเป็นจะให้คำบรรยาย โปรแกรมอ่านหน้าจอจะอ่านเลเจนด์ก่อนตัวควบคุมแต่ละรายการในกลุ่ม เพื่อให้ผู้ใช้เข้าใจบริบท

แอตทริบิวต์ name — สิ่งที่จะถูกส่ง

เมื่อส่งแบบฟอร์ม เบราว์เซอร์จะส่งคู่ name=value ของตัวควบคุมแต่ละรายการ เฉพาะตัวควบคุมที่มีแอตทริบิวต์ name เท่านั้นที่จะถูกรวมอยู่ด้วย สำหรับช่องทำเครื่องหมาย ระบบจะส่งเฉพาะรายการที่ทำเครื่องหมายไว้

<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->

การกรอกอัตโนมัติและการเติมข้อมูลอัตโนมัติ

กำหนดค่าแอตทริบิวต์ autocomplete เช่น email, given-name, new-password หรือ current-password เพื่อช่วยให้ตัวจัดการรหัสผ่านและการกรอกข้อมูลอัตโนมัติของเบราว์เซอร์กรอกแบบฟอร์มได้อย่างถูกต้อง

<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">

ตรวจสอบความเข้าใจ

แอตทริบิวต์ for ขององค์ประกอบ <label> มีจุดประสงค์อะไร

สรุป: แบบฟอร์ม HTML ที่เข้าถึงได้

อินพุตทุกตัวต้องมีป้ายกำกับ เลือกชนิดอินพุตให้เหมาะกับข้อมูล จัดกลุ่มตัวควบคุมที่เกี่ยวข้องด้วยชุดฟิลด์ ใช้ button type=submit เพื่อส่งข้อมูล ใช้ความสามารถในตัวของแบบฟอร์ม เช่น การตรวจสอบความถูกต้อง การนำทางด้วยแป้นพิมพ์ และการกรอกข้อมูลอัตโนมัติ ก่อนเพิ่ม JavaScript

คำถามที่พบบ่อย

บทเรียน “ฟอร์ม: input label button” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ฟอร์ม: input label button” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ฟอร์ม: input label button”

สร้างฟอร์ม HTML ที่เข้าถึงได้ พร้อม input ที่มีป้ายกำกับ ชนิด input ต่าง ๆ พื้นที่ข้อความ ช่องเลือก และปุ่มส่ง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ฟอร์ม: input label button” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy