HTML for Kids · บทเรียน

แบบฟอร์ม: รับข้อมูลจากผู้ใช้

สร้างแบบฟอร์มง่าย ๆ ด้วยช่องข้อความ ปุ่ม และองค์ประกอบอื่น ๆ

บทเรียน 2 จาก 410 ขั้นตอน

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

แบบฟอร์ม: การรวบรวมข้อมูลจากผู้ใช้

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

แบบฟอร์ม: รับข้อมูลจากผู้ใช้ — ภาพประกอบ 1

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

แบบฟอร์มใช้สำหรับรวบรวมข้อมูลจากผู้ใช้ ตัวอย่างเช่น เมื่อคุณสมัครบัญชี คุณจะกรอกแบบฟอร์มที่มีช่องต่าง ๆ เช่น ชื่อและที่อยู่อีเมล

แบบฟอร์มใน HTML สร้างขึ้นโดยใช้แท็ก <form>

การสร้างแบบฟอร์มพื้นฐาน

แบบฟอร์มสร้างขึ้นโดยใช้แท็ก <form> ภายในแท็กนี้ คุณสามารถเพิ่มช่องป้อนข้อมูล ปุ่ม และองค์ประกอบอื่น ๆ ได้

ตัวอย่าง:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <button type="submit">Submit</button>
</form>

ประเภทช่องป้อนข้อมูลในแบบฟอร์ม

แบบฟอร์ม HTML รองรับช่องป้อนข้อมูลหลายประเภท ต่อไปนี้คือตัวอย่างประเภทที่ใช้บ่อย:

  • text: สำหรับป้อนข้อความสั้น ๆ
  • email: สำหรับที่อยู่อีเมล
  • password: สำหรับรหัสผ่าน
  • number: สำหรับตัวเลข

ตัวอย่าง:

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <br />
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" />
</form>

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

คุณสามารถใช้ปุ่มตัวเลือกสำหรับตัวเลือกที่เลือกได้เพียงรายการเดียว และใช้ช่องทำเครื่องหมายสำหรับตัวเลือกที่เลือกได้หลายรายการ

ตัวอย่าง:

<form>
  <p>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 />

  <p>Hobbies:</p>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <br />
  <input type="checkbox" id="sports" name="hobby" value="sports" />
  <label for="sports">Sports</label>
</form>

การเพิ่มเมนูแบบเลื่อนลง

คุณสามารถใช้แท็ก <select> เพื่อสร้างเมนูแบบเลื่อนลงให้ผู้ใช้เลือกจากรายการตัวเลือกได้

ตัวอย่าง:

<form>
  <label for="country">Select your country:</label>
  <select id="country" name="country">
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="canada">Canada</option>
  </select>
</form>

ปุ่มในแบบฟอร์ม

ปุ่มช่วยให้ผู้ใช้ส่งหรือล้างแบบฟอร์ม แท็ก <button> เป็นแท็กที่นิยมใช้

ตัวอย่าง:

<form>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

การจัดรูปแบบแบบฟอร์ม

คุณสามารถจัดรูปแบบแบบฟอร์มโดยใช้ CSS เพื่อให้ดูน่าสนใจยิ่งขึ้น ตัวอย่างเช่น คุณสามารถปรับขนาดช่องหรือเปลี่ยนสีของช่องได้

ตัวอย่าง:

<style>
  form {
    width: 300px;
    margin: 20px auto;
  }
  input, select, button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
  }
</style>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <button type="submit">Submit</button>
</form>

ทำได้ดีมาก!

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

แบบฟอร์ม: รับข้อมูลจากผู้ใช้ — ภาพประกอบ 10
เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
16
บทเรียน
35

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

บทเรียน “แบบฟอร์ม: รับข้อมูลจากผู้ใช้” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “แบบฟอร์ม: รับข้อมูลจากผู้ใช้”

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

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

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

บทเรียน “แบบฟอร์ม: รับข้อมูลจากผู้ใช้” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ตาราง: จัดระเบียบข้อมูล
  2. แบบฟอร์ม: รับข้อมูลจากผู้ใช้
  3. แอตทริบิวต์ของ HTML
  4. มัลติมีเดีย: เพิ่มวิดีโอและเสียง
← กลับไปที่ HTML for Kids