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

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

เรียนรู้ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตาราง: จัดระเบียบข้อมูล
- แบบฟอร์ม: รับข้อมูลจากผู้ใช้
- แอตทริบิวต์ของ HTML
- มัลติมีเดีย: เพิ่มวิดีโอและเสียง