0Pricing
JavaScript Academy · บทเรียน

การอ่านค่าจากช่องป้อนข้อมูล

เข้าถึงค่าจากช่องป้อนข้อความ ช่องทำเครื่องหมาย และช่องเลือก

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

การทำงานกับข้อมูลฟอร์ม

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

input.value

ช่องป้อนข้อมูลที่เป็นข้อความจะแสดงเนื้อหาปัจจุบันผ่านพร็อพเพอร์ตี value ซึ่งเป็นสตริงเสมอ

const name = document.querySelector("#name");
console.log(name.value);

value เป็นสตริงเสมอ

แม้แต่ช่องตัวเลขก็ส่งคืนค่าเป็นสตริง ให้แปลงค่าอย่างชัดเจนเมื่อต้องการตัวเลข

const age = document.querySelector("#age");
const n = Number(age.value);

valueAsNumber

ช่องตัวเลขและวันที่มี valueAsNumber ซึ่งส่งคืนค่าเป็นตัวเลขโดยตรง หรือส่งคืนค่า NaN หากว่างเปล่าหรือไม่ถูกต้อง

const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);

checkbox.checked

ช่องทำเครื่องหมายจะรายงานสถานะผ่านพร็อพเพอร์ตีบูลีน checked ไม่ใช่ value

const agree = document.querySelector("#agree");
console.log(agree.checked); // true or false

ปุ่มตัวเลือก

สำหรับกลุ่มปุ่มตัวเลือก ให้ค้นหาปุ่มที่ถูกเลือก พร็อพเพอร์ตี checked จะระบุตัวเลือกที่เลือกไว้

const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");

ค่าของรายการแบบเลือก

เมนูแบบเลื่อนลงที่เลือกได้รายการเดียวจะแสดงตัวเลือกที่เลือกผ่าน value

const country = document.querySelector("#country");
console.log(country.value);

การเลือกหลายรายการ

สำหรับการเลือกหลายรายการ ให้อ่าน selectedOptions แล้วแปลงเป็นค่า

const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);

เหตุการณ์ input

รับฟังเหตุการณ์ input เพื่อโต้ตอบกับทุกการกดแป้นหรือการเปลี่ยนแปลงแบบเรียลไทม์

name.addEventListener("input", (e) => {
  console.log(e.target.value);
});

เหตุการณ์การเปลี่ยนแปลง

เหตุการณ์ change จะเกิดขึ้นเมื่อช่องข้อมูลสูญเสียโฟกัสหลังจากค่าของมันเปลี่ยนแปลง หรือเกิดขึ้นทันทีสำหรับช่องทำเครื่องหมายและรายการแบบเลือก

country.addEventListener("change", (e) => {
  console.log("chose " + e.target.value);
});

FormData

FormData รวบรวมช่องข้อมูลที่มีชื่อทั้งหมดของฟอร์มในครั้งเดียว เหมาะอย่างยิ่งสำหรับการส่งไปยังเซิร์ฟเวอร์

const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));

ตรวจสอบอย่างรวดเร็ว

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

สรุปทบทวน

อ่านช่องข้อความผ่าน value ซึ่งเป็นสตริงเสมอ และใช้ valueAsNumber สำหรับตัวเลข อ่านช่องทำเครื่องหมายและปุ่มตัวเลือกผ่าน checked และอ่านเมนูแบบเลื่อนลงผ่าน value หรือ selectedOptions โต้ตอบด้วยเหตุการณ์ input ซึ่งเกิดขึ้นกับทุกการเปลี่ยนแปลง หรือเหตุการณ์ change ซึ่งเกิดขึ้นเมื่อยืนยันการเปลี่ยนแปลง และรวบรวมข้อมูลทั้งหมดในครั้งเดียวด้วย FormData

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

บทเรียน “การอ่านค่าจากช่องป้อนข้อมูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การอ่านค่าจากช่องป้อนข้อมูล”

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

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

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

บทเรียน “การอ่านค่าจากช่องป้อนข้อมูล” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การอ่านค่าจากช่องป้อนข้อมูล
  2. เหตุการณ์ submit
  3. การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์
  4. Constraint Validation API
← กลับไปที่ JavaScript Academy