ตัวควบคุมฟอร์ม: ชนิด input select textarea
ใช้ input แบบข้อความ อีเมล ตัวเลข วันที่ ช่องทำเครื่องหมาย ตัวเลือกเดียว ช่วง ไฟล์ และสี ร่วมกับองค์ประกอบ select และ textarea
ตัวควบคุมฟอร์ม: ชนิด input select textarea เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
ชุดประเภทช่องป้อนข้อมูลครบถ้วน
HTML5 เพิ่มประเภทช่องป้อนข้อมูลเฉพาะทางจำนวนมากนอกเหนือจากข้อความ แต่ละประเภทจะบอกเบราว์เซอร์ว่าควรคาดหวังข้อมูลชนิดใด ทำให้ตรวจสอบข้อมูลในตัว เลือกแป้นพิมพ์ที่เหมาะสมบนอุปกรณ์เคลื่อนที่ และใช้ตัวควบคุมส่วนติดต่อผู้ใช้แบบเนทีฟของแพลตฟอร์มได้
ช่องป้อนข้อความ การค้นหา และ URL
type="text" เป็นทางเลือกสำรองสำหรับข้อความทั่วไป type="search" จะช่วยแนะนำแป้นพิมพ์ที่ปรับให้เหมาะกับการค้นหา และมักแสดงปุ่มล้างข้อมูล type="url" จะตรวจสอบรูปแบบ URL และแสดงแป้นพิมพ์สำหรับ URL บนอุปกรณ์เคลื่อนที่
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">อีเมลและโทรศัพท์
type="email" จะตรวจสอบรูปแบบอีเมลและแสดงแป้นพิมพ์ที่ปรับให้เหมาะกับอีเมลพร้อมปุ่ม @ ส่วน type="tel" จะแสดงแป้นพิมพ์ตัวเลขสำหรับโทรศัพท์ แต่จะไม่ตรวจสอบรูปแบบ เนื่องจากรูปแบบหมายเลขโทรศัพท์แตกต่างกันไปในแต่ละประเทศ
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">ประเภทตัวเลข ช่วงค่า และวันที่
type="number" ใช้ร่วมกับ min/max/step สำหรับข้อมูลตัวเลข type="range" ใช้สำหรับแถบเลื่อน ส่วน type="date", type="time" และ type="datetime-local" ใช้สำหรับข้อมูลด้านเวลา โดยมีตัวเลือกในตัว
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">ช่องทำเครื่องหมายและปุ่มตัวเลือก
ช่องทำเครื่องหมายเป็นตัวเลือกอิสระ ส่วนปุ่มตัวเลือกในกลุ่มเดียวกัน (มีชื่อเดียวกัน) อนุญาตให้เลือกได้เพียงหนึ่งรายการ แต่ละรายการต้องมีป้ายกำกับที่เชื่อมโยงกัน
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>สี ไฟล์ และข้อมูลที่ซ่อน
type="color" จะแสดงตัวเลือกสีของระบบ type="file" จะเปิดกล่องโต้ตอบเลือกไฟล์ โดยใช้แอตทริบิวต์ accept เพื่อจำกัดประเภทไฟล์ได้ ส่วน type="hidden" จะส่งข้อมูลโดยไม่มีตัวควบคุมส่วนติดต่อผู้ใช้
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">รายการแบบเลื่อนลง
องค์ประกอบ <select> จะสร้างรายการแบบเลื่อนลง ใช้ multiple สำหรับการเลือกหลายรายการ (มักไม่ใช่ประสบการณ์ผู้ใช้ที่ดี) จัดกลุ่มตัวเลือกด้วย <optgroup> เมื่อรายการมีความยาวมาก
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>พื้นที่ข้อความ
<textarea> จะสร้างช่องป้อนข้อความหลายบรรทัด ใช้ rows และ cols กำหนดขนาดเริ่มต้น หรือใช้ CSS เพื่อควบคุมได้ละเอียดขึ้น ต้องมีแท็กปิด และเนื้อหาใด ๆ ระหว่างแท็กจะเป็นค่าเริ่มต้น
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — ตัวเลือกเติมข้อความอัตโนมัติ
<datalist> จะแสดงรายการคำแนะนำสำหรับช่องป้อนข้อมูลโดยไม่จำกัดให้ป้อนเฉพาะข้อความที่กำหนดไว้ เชื่อมช่องป้อนข้อมูลกับ datalist ด้วยแอตทริบิวต์ list และ id
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>แอตทริบิวต์ value และ name
name คือคีย์ที่ส่งไปพร้อมกับข้อมูลแบบฟอร์ม value ใช้กำหนดค่าเริ่มต้น สำหรับช่องทำเครื่องหมายและปุ่มตัวเลือก value คือค่าที่จะถูกส่งเมื่อมีการเลือก ส่วนช่องป้อนข้อความ value คือเนื้อหาที่กรอกไว้ล่วงหน้า
การกำหนดขนาดช่องป้อนข้อมูลและข้อความตัวอย่าง
placeholder จะแสดงข้อความแนะนำเมื่อช่องป้อนข้อมูลว่าง ข้อความนี้จะหายไปเมื่อช่องได้รับโฟกัส และไม่ควรใช้แทนป้ายกำกับที่มองเห็นได้ size กำหนดความกว้างที่มองเห็นได้เป็นจำนวนอักขระ แต่ควรใช้ CSS เพื่อกำหนดขนาด
ตรวจสอบอย่างรวดเร็ว
ช่องป้อนข้อมูลประเภทใดจะแสดงแป้นพิมพ์ตัวเลขบนอุปกรณ์เคลื่อนที่ และตรวจสอบว่าค่าที่ป้อนเป็นตัวเลขที่ถูกต้อง
สรุป: ตัวควบคุมแบบฟอร์ม
ใช้ประเภทช่องป้อนข้อมูลตามความหมาย: email สำหรับอีเมล number สำหรับตัวเลข และ date สำหรับวันที่ ใช้ select สำหรับตัวเลือกที่กำหนดไว้ตายตัว ใช้ datalist สำหรับการเติมข้อความอัตโนมัติพร้อมคำแนะนำ และใช้ textarea สำหรับข้อความหลายบรรทัด อย่าลืมใส่แอตทริบิวต์ name เพื่อการส่งข้อมูล และใส่แอตทริบิวต์ value เมื่อเหมาะสม
คำถามที่พบบ่อย
บทเรียน “ตัวควบคุมฟอร์ม: ชนิด input select textarea” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวควบคุมฟอร์ม: ชนิด input select textarea” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวควบคุมฟอร์ม: ชนิด input select textarea”
ใช้ input แบบข้อความ อีเมล ตัวเลข วันที่ ช่องทำเครื่องหมาย ตัวเลือกเดียว ช่วง ไฟล์ และสี ร่วมกับองค์ประกอบ select และ textarea คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวควบคุมฟอร์ม: ชนิด input select textarea” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตัวควบคุมฟอร์ม: ชนิด input select textarea
- ARIA และการเข้าถึง: label role aria-*
- HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน
- แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม