ช่องป้อนข้อความ
ป้อนข้อความได้อย่างแม่นยำและยืดหยุ่น ตั้งแต่ชื่อธรรมดาไปจนถึงรูปแบบที่ซับซ้อน พร้อมการตรวจสอบความถูกต้องในตัว การจัดรูปแบบอัจฉริยะ และการปรับแต่งที่มีประสิทธิภาพ – ช่องป้อนข้อความสามารถปรับให้เข้ากับการใช้งานทุกรูปแบบ ด้วยการจำกัดจำนวนอักขระ การจัดรูปแบบอัตโนมัติ และโหมดรหัสผ่านที่ปลอดภัย
รากฐานของทุกแบบฟอร์ม WordPress
เหมาะสำหรับ:
คุณสมบัติทรงพลังที่ตอบโจทย์ทุกการใช้งาน
📏 ระบบควบคุมความยาวอัจฉริยะ
ข้อจำกัดจำนวนอักขระขั้นต่ำและสูงสุด
ตั้งค่าความยาวและระยะเวลาการป้อนข้อความที่สั้นที่สุดและยาวที่สุด ป้องกันการส่งข้อมูลที่สั้นหรือยาวเกินไปด้วยระบบตรวจสอบความถูกต้องของเบราว์เซอร์
การตรวจสอบแบบเรียลไทม์
ผู้ใช้จะเห็นผลตอบรับทันทีหากผลงานที่ส่งเข้ามาไม่ตรงตามข้อกำหนดด้านความยาว – ไม่มีอะไรให้ต้องกังวลหลังจากส่งผลงานแล้ว
ตัวอย่าง:
- ชื่อผู้ใช้: อย่างน้อย 3 ตัวอักษร สูงสุด 20 ตัวอักษร
- รหัสไปรษณีย์: อย่างน้อย 5 ตัวอักษร อย่างมาก 10 ตัวอักษร
- ชื่อ: ความยาวขั้นต่ำ 2 ตัวอักษร ความยาวสูงสุด 50 ตัวอักษร
- หมายเหตุ: จำกัดไม่เกิน 500 ตัวอักษร
ทำไมมันเรื่อง:
ควบคุมคุณภาพข้อมูล ป้องกันสแปม ตรวจสอบความเข้ากันได้ของฐานข้อมูล และแนะนำผู้ใช้ให้ป้อนข้อมูลในปริมาณที่เหมาะสม
✅ รูปแบบการตรวจสอบความถูกต้องในตัว
ประเภทการตรวจสอบความถูกต้องที่กำหนดค่าไว้ล่วงหน้า 6 แบบ:
- 1. ไม่มี – ยอมรับข้อความใดๆ ก็ได้ (ค่าเริ่มต้น)
2. อีเมล – ตรวจสอบรูปแบบอีเมลให้ถูกต้อง ([ป้องกันอีเมล])
3. URL – ต้องเป็นที่อยู่เว็บที่ถูกต้อง (https://example.com)
4. เฉพาะตัวอักษร – เฉพาะตัวอักษรและเว้นวรรค (John Doe)
5. เฉพาะตัวเลข – เฉพาะตัวเลข (123456)
6. รูปแบบตัวอักษรและตัวเลข – ไม่มีอักขระพิเศษ (User123)
รวมถึงแพทเทิร์นสั่งทำพิเศษ:
- กำหนดการตรวจสอบความถูกต้องด้วย regex ของคุณเองสำหรับรูปแบบเฉพาะ เช่น:
- ป้ายทะเบียน: `^[AZ]{3}[0-9]{4}$`
- รหัสสินค้า: `^[AZ]{2}[0-9]{6}$`
- รูปแบบที่กำหนดเองเฉพาะสำหรับธุรกิจของคุณ
คำติชมทันที:
ผู้ใช้จะเห็นข้อความแสดงข้อผิดพลาดอย่างชัดเจนหากข้อมูลที่ป้อนไม่ตรงกับรูปแบบที่กำหนด
✂️ การตัดแต่งพื้นที่ว่างอัตโนมัติ
ทำความสะอาดข้อมูลโดยอัตโนมัติ
ลบช่องว่างที่ไม่จำเป็นออกจากต้นและท้ายของข้อความ เช่น ไม่ต้องพิมพ์ “John” แทน “John” อีกต่อไป
ใช้กรณี:
- ที่อยู่อีเมล (ห้ามเว้นวรรค)
- ชื่อผู้ใช้ (ห้ามมีช่องว่างนำหน้า)
- รหัสอ้างอิง (ตรงกันทุกประการ)
- ทุกสาขาที่ความแม่นยำมีความสำคัญ
ประโยชน์ที่ได้รับ:
ช่วยลดข้อผิดพลาดของผู้ใช้ ปรับปรุงความสม่ำเสมอของข้อมูล ป้องกันปัญหาการตรวจสอบความถูกต้อง และทำให้การจับคู่และการค้นหาง่ายขึ้น
🔒 โหมดรหัสผ่าน
การปกปิดข้อมูลอินพุตที่ปลอดภัย
แปลงช่องข้อความใดๆ ให้เป็นช่องใส่รหัสผ่าน ตัวอักษรจะปรากฏเป็นจุด (•••) เพื่อป้องกันข้อมูลสำคัญจากการแอบดู
เหมาะสำหรับ:
- การป้อนรหัสผ่านและรหัส PIN
- รหัสรักษาความปลอดภัยและโทเค็น
- หมายเลขประจำตัวที่เป็นความลับ
- รหัสยืนยันตัวตนสองขั้นตอน
พฤติกรรมที่ชาญฉลาด:
โหมดรหัสผ่านจะปิดใช้งานคุณสมบัติที่ขัดแย้งกันโดยอัตโนมัติ เช่น การแปลงข้อความและประเภทการป้อนข้อมูลพิเศษ เพื่อให้มั่นใจในความปลอดภัย
📱 ประเภทการป้อนข้อมูลอัจฉริยะ
ปรับให้เหมาะสมสำหรับอุปกรณ์มือถือและเดสก์ท็อป:
- ข้อความปกติ – การป้อนข้อความมาตรฐานสำหรับการใช้งานทั่วไป
- ค้นหา – มีปุ่มล้างข้อมูล (X) ในตัวสำหรับรีเซ็ตอย่างรวดเร็ว
- โทรศัพท์ – กระตุ้นแป้นพิมพ์ตัวเลขบนอุปกรณ์เคลื่อนที่เพื่อให้ป้อนหมายเลขโทรศัพท์ได้ง่ายขึ้น
- URL – แสดงแป้นพิมพ์มือถือแบบพิเศษที่มีทางลัดสำหรับ .com และ .org
ทำไมมันเรื่อง:
การเลือกใช้รูปแบบการป้อนข้อมูลที่เหมาะสมจะช่วยให้การป้อนข้อมูลบนมือถือรวดเร็วขึ้น ลดข้อผิดพลาด และปรับปรุงประสบการณ์การใช้งานของผู้ใช้บนอุปกรณ์ทุกชนิด
🎨 การแปลงข้อความอัตโนมัติ
จัดรูปแบบข้อความตามที่ผู้ใช้พิมพ์:
- ไม่มีการเปลี่ยนแปลง – ข้อความจะคงอยู่ตามที่ป้อนไว้ทุกประการ
- ตัวพิมพ์ใหญ่ – แปลงข้อความทั้งหมดเป็นตัวพิมพ์ใหญ่ (JOHN DOE)
- lowercase – แปลงข้อความทั้งหมดเป็นตัวพิมพ์เล็ก (john doe)
- ขึ้นต้นด้วยตัวอักษรใหญ่ – เฉพาะตัวอักษรแรกเท่านั้นที่เป็นตัวพิมพ์ใหญ่ (John doe)
- ตัวพิมพ์ใหญ่ตัวแรกของแต่ละคำ (John Doe)
เหมาะสำหรับ:
- ตัวพิมพ์ใหญ่: ป้ายทะเบียนรถ, รหัสรัฐ, รหัสสินค้า
- ตัวพิมพ์เล็ก: ที่อยู่อีเมล, ชื่อผู้ใช้
- ใช้ตัวพิมพ์ใหญ่: ต้นประโยค, ชื่อเดี่ยว
- ตัวพิมพ์ใหญ่ตามคำนำหน้าชื่อ: ชื่อเต็ม ที่อยู่ และคำนำหน้าชื่อ
พฤติกรรมที่ชาญฉลาด:
การแปลงข้อมูลจะเกิดขึ้นโดยอัตโนมัติระหว่างการส่งข้อมูล ในขณะที่ผู้ใช้ยังคงเห็นข้อมูลที่ป้อนไว้เดิม
🙈 โหมดซ่อนสนาม
ช่องข้อมูลที่มองไม่เห็น
สร้างช่องข้อมูลที่ผู้ใช้มองไม่เห็น แต่จะส่งข้อมูลไปพร้อมกับแบบฟอร์ม เหมาะสำหรับใช้ในการติดตามข้อมูล รหัสแนะนำ และค่าระบบต่างๆ
ใช้กรณี:
- พารามิเตอร์การติดตาม UTM
- รหัสแหล่งที่มาของการอ้างอิง
- หมายเลขเวอร์ชันแบบฟอร์ม
- เครื่องหมายแสดงเวลา
- ข้อมูลเมตาที่ซ่อนอยู่
วิธีการทำงาน:
ตั้งค่า “ค่าที่ซ่อนไว้” แล้วค่าดังกล่าวจะถูกรวมไว้ในการส่งแบบฟอร์มทุกครั้งโดยอัตโนมัติ โดยไม่ทำให้ส่วนติดต่อผู้ใช้ของแบบฟอร์มดูรก
🔀 ตรรกะแบบมีเงื่อนไข
การมองเห็นสนามแบบไดนามิก
แสดงหรือซ่อนช่องข้อความตามค่าอื่นๆ ในแบบฟอร์ม สร้างแบบฟอร์มอัจฉริยะที่ปรับเปลี่ยนตามข้อมูลที่ผู้ใช้ป้อน
กฎตรรกะขั้นสูง:
- ตรรกะ AND – ต้องเป็นไปตามเงื่อนไขทั้งหมด
- ตรรกะแบบ OR – เงื่อนไขใดๆ ก็สามารถกระตุ้นการกระทำนี้ได้
- ตัวดำเนินการ 8 แบบ – เท่ากับ ไม่เท่ากับ มากกว่า น้อยกว่า มีอยู่ ว่างเปล่า และอื่นๆ
ใช้กรณี:
- แสดง “ชื่อบริษัท” เฉพาะเมื่อประเภทผู้ใช้เป็น “ธุรกิจ” เท่านั้น
- แสดง “แหล่งที่มาของการแนะนำ” เมื่อ “คุณรู้จักเราได้อย่างไร” มีคำว่า “การแนะนำ” อยู่ในส่วน “การแนะนำ”
- ซ่อน “รายละเอียดอื่นๆ” เมื่อตัวเลือกหลักไม่ว่างเปล่า
- แสดง "รหัสโปรโมชั่น" เมื่อยอดสั่งซื้อมากกว่า 100 ดอลลาร์
🎯 ประสบการณ์การใช้งานที่ดียิ่งขึ้น
คุณสมบัติอัจฉริยะในตัว:
- ค่าเริ่มต้น – กรอกข้อมูลล่วงหน้าเพื่อช่วยให้กรอกข้อมูลได้เร็วขึ้น
- ข้อความตัวอย่าง – แสดงคำแนะนำที่เป็นประโยชน์ก่อนที่ผู้ใช้จะพิมพ์
- ข้อความช่วยเหลือ – เพิ่มคำอธิบายเพื่อชี้แจงสิ่งที่จะต้องป้อน
- การตรวจสอบความถูกต้องที่จำเป็น – กำหนดให้ช่องข้อมูลบางช่องเป็นช่องบังคับ พร้อมระบุตัวบ่งชี้ที่ชัดเจน
- คลาส CSS แบบกำหนดเอง – ปรับแต่งสไตล์ให้เข้ากับแบรนด์ของคุณ
- การสนับสนุนการเข้าถึง – ป้ายกำกับ ARIA สำหรับโปรแกรมอ่านหน้าจอ
- ออกแบบมาเพื่อการใช้งานบนมือถือโดยเฉพาะ – รองรับการสัมผัสหน้าจอ พร้อมแป้นพิมพ์ที่เหมาะสม
ตั้งค่าได้ง่ายๆ เพียง 3 ขั้นตอน
เตรียมช่องป้อนข้อความของคุณให้พร้อมใช้งานได้ภายในไม่กี่นาที
เพิ่มช่องข้อความ
ลากและวางช่องป้อนข้อความจากส่วนช่องข้อมูลพื้นฐานลงในแบบฟอร์มของคุณ
ตั้งค่าการตรวจสอบและข้อจำกัด
เลือกประเภทการตรวจสอบความถูกต้อง (อีเมล, URL, จดหมาย ฯลฯ) กำหนดจำนวนอักขระขั้นต่ำ/สูงสุด และเลือกเปิดใช้งานโหมดรหัสผ่านหรือการตัดช่องว่างได้ตามต้องการ
กำหนดค่าการจัดรูปแบบ
เลือกประเภทการป้อนข้อมูลสำหรับการปรับให้เหมาะสมกับอุปกรณ์มือถือ เลือกการแปลงข้อความ (ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก ฯลฯ) และตั้งค่าเริ่มต้นหรือข้อความตัวอย่าง
🎉 แค่นั้นเอง! ช่องข้อความของคุณพร้อมใช้งานแล้ว พร้อมระบบตรวจสอบความถูกต้องและจัดรูปแบบอัจฉริยะ
แอปพลิเคชั่นในโลกแห่งความจริง
ตัวเลือกฟิลด์ที่สมบูรณ์
การกำหนดค่าพื้นฐาน
- ป้ายกำกับช่อง – ชื่อเรื่องที่แสดงอยู่เหนือช่องข้อความ
- คำอธิบาย/ข้อความช่วยเหลือ – คำแนะนำเพิ่มเติมสำหรับผู้ใช้งาน
- ช่องที่ต้องกรอก – กำหนดให้การป้อนข้อความเป็นข้อบังคับ
- ข้อความตัวอย่าง – ข้อความแนะนำก่อนที่ผู้ใช้จะพิมพ์
การตรวจสอบความยาว
- ความยาวขั้นต่ำ – จำนวนอักขระน้อยที่สุดที่อนุญาต (การตรวจสอบความถูกต้อง)
- ความยาวสูงสุด – อนุญาตให้มีอักขระได้มากที่สุด (มีขีดจำกัดสูงสุด)
ค่าเริ่มต้น
- ค่าเริ่มต้น – ข้อความที่กรอกไว้ล่วงหน้าเมื่อโหลดแบบฟอร์ม
- ค่าที่ซ่อนอยู่ – ค่าสำหรับช่องข้อมูลที่ซ่อนอยู่ (เมื่อเปิดใช้งานโหมดซ่อนค่า)
ความปลอดภัยและความเป็นส่วนตัว
- ช่องรหัสผ่าน – ปิดบังข้อมูลที่ป้อนเป็นรหัสผ่าน (แสดงเป็นจุด •••)
ช่องข้อมูลที่ซ่อนอยู่ – ทำให้ช่องข้อมูลนั้นมองไม่เห็น แต่ยังคงรวมอยู่ในข้อมูลที่ส่งมา
คุณภาพของข้อมูล
ตัดช่องว่าง – ลบช่องว่างส่วนเกินออกจากต้นและท้ายโดยอัตโนมัติ
กฎการตรวจสอบ
- ประเภทการตรวจสอบ
- ไม่มี (ข้อความใดๆ)
- อีเมล ([ป้องกันอีเมล])
- URL (https://example.com)
- เฉพาะตัวอักษร (เฉพาะรัฐแอริโซนา)
- เฉพาะตัวเลข (0-9 เท่านั้น)
- ตัวอักษรและตัวเลข (AZ และ 0-9)
- รูปแบบกำหนดเอง (regex)
- รูปแบบกำหนดเอง – นิพจน์ปกติสำหรับการตรวจสอบความถูกต้องแบบกำหนดเอง (เมื่อเลือก “กำหนดเอง”)
ประเภทอินพุต
- ประเภทอินพุต
- ข้อความปกติ
- ค้นหา (พร้อมปุ่มล้างข้อมูล)
- โทรศัพท์ (แป้นตัวเลขบนมือถือ)
- URL (แป้นพิมพ์มือถือเฉพาะทาง)
การจัดรูปแบบข้อความ
- การแปลงข้อความ
- ไม่มีการเปลี่ยนแปลง
- พิมพ์ใหญ่
- ตัวพิมพ์เล็ก
- ขึ้นต้นด้วยตัวพิมพ์ใหญ่
- ชื่อเรื่องกรณี
ตรรกะเชิงเงื่อนไข
- เปิดใช้งานตรรกะแบบมีเงื่อนไข – แสดง/ซ่อนตามเงื่อนไข
- ประเภทลอจิก
- ต้องเป็นไปตามเงื่อนไขทั้งหมด (และ)
- เงื่อนไขใดๆ ก็สามารถบรรลุได้ (หรือ)
- กฎเกณฑ์เงื่อนไข
- แสดง/ซ่อน – การดำเนินการที่ต้องทำ
- ช่อง – ควรเลือกช่องใด
- ตัวดำเนินการ – เท่ากับ, ไม่เท่ากับ, มีอยู่, มากกว่า, น้อยกว่า, ว่างเปล่า, ไม่ว่างเปล่า
- มูลค่า – มูลค่าเปรียบเทียบ
- เงื่อนไขหลายรายการ – เพิ่มกฎได้ไม่จำกัดจำนวน
ตัวเลือกขั้นสูง
- คลาส CSS แบบกำหนดเอง – ใช้การจัดสไตล์แบบกำหนดเอง
- คุณลักษณะด้านการเข้าถึง – ป้ายกำกับและคำอธิบาย ARIA

เหตุใดจึงควรเลือกใช้ช่องป้อนข้อความของเรา?
✅ ใช้งานได้หลากหลาย – เหมาะสำหรับชื่อ รหัส รหัสผ่าน และอื่นๆ อีกมากมาย
✅ การตรวจสอบความถูกต้องอัจฉริยะ – รูปแบบการตรวจสอบความถูกต้องมากกว่า 6 รูปแบบ พร้อมด้วยนิพจน์ปกติแบบกำหนดเอง
✅ ปรับให้เหมาะสมสำหรับอุปกรณ์มือถือ – แป้นพิมพ์ที่เหมาะสมสำหรับแต่ละประเภทการป้อนข้อมูล
✅ การจัดรูปแบบอัตโนมัติ – การแปลงข้อความจะเกิดขึ้นโดยอัตโนมัติ
✅ ปลอดภัย – โหมดรหัสผ่านช่วยปกป้องข้อมูลสำคัญ
✅ ข้อมูลสะอาด – การตัดช่องว่างช่วยป้องกันข้อผิดพลาดทั่วไป
✅ ยืดหยุ่น – สามารถซ่อนฟิลด์ กำหนดค่าเริ่มต้น และใช้ตรรกะแบบมีเงื่อนไขได้
✅ ใช้งานง่าย – ข้อความยืนยันที่ชัดเจนช่วยแนะนำผู้ใช้
✅ ผสานรวมอย่างสมบูรณ์ – ทำงานร่วมกับฟีเจอร์ทั้งหมดของแบบฟอร์มได้อย่างราบรื่น
คำถามที่พบบ่อย
ถาม: ความแตกต่างระหว่างความยาวขั้นต่ำ/สูงสุดและการตรวจสอบความถูกต้องคืออะไร?
ความยาวขั้นต่ำ/สูงสุดจะควบคุมจำนวนอักขระที่อนุญาต การตรวจสอบความถูกต้องจะควบคุมว่าอนุญาตเฉพาะอักขระใดบ้าง เช่น เฉพาะตัวอักษร เฉพาะตัวเลข หรือรูปแบบอีเมล
ถาม: ฉันสามารถตรวจสอบทั้งความยาวและรูปแบบได้หรือไม่?
ใช่ค่ะ สามารถใช้การกำหนดความยาวขั้นต่ำ/สูงสุดร่วมกับกฎการตรวจสอบความถูกต้องได้ เช่น กำหนดค่าขั้นต่ำ 3 ตัวอักษร ค่าสูงสุด 15 ตัวอักษร และตรวจสอบความถูกต้องว่าเป็นตัวอักษรและตัวเลขเท่านั้นสำหรับช่องชื่อผู้ใช้
ถาม: โหมดรหัสผ่านทำงานอย่างไร?
โหมดรหัสผ่านจะปิดบังตัวอักษรด้วยจุด เช่นเดียวกับช่องใส่รหัสผ่านทั่วไปในหน้าจอเข้าสู่ระบบ
ถาม: ฟังก์ชัน “trim whitespace” ทำอะไร?
ระบบจะลบช่องว่างด้านหน้าและด้านหลังออกก่อนส่งข้อมูล เพื่อป้องกันไม่ให้ช่องว่างที่ไม่ได้ตั้งใจทำให้การตรวจสอบความถูกต้องล้มเหลว
ถาม: ฉันสามารถสร้างรูปแบบการตรวจสอบความถูกต้องแบบกำหนดเองได้หรือไม่?
ใช่แล้ว ใช้ “รูปแบบกำหนดเอง” และเพิ่มนิพจน์ปกติเพื่อบังคับใช้โครงสร้างใดๆ ที่คุณต้องการ
ถาม: การแปลงข้อความทำงานอย่างไร?
ผู้ใช้พิมพ์ตามปกติ และระบบจะแปลงข้อความเมื่อส่ง เช่น แปลงเป็นตัวพิมพ์ใหญ่ตัวแรกของหน้า หรือตัวพิมพ์ใหญ่ทั้งหมด
ถาม: ประเภทข้อมูลสำหรับการค้นหาใช้สำหรับอะไร?
มีการเพิ่มปุ่มล้าง (X) ในตัว เพื่อให้ผู้ใช้สามารถรีเซ็ตช่องข้อมูลได้ทันทีขณะค้นหา
ถาม: เหตุใดจึงใช้ประเภทข้อมูลป้อนเข้า "tel"?
บนอุปกรณ์เคลื่อนที่ แอปจะเปิดแป้นพิมพ์ตัวเลขเพื่อให้การป้อนตัวเลขแบบโทรศัพท์ง่ายขึ้น
ถาม: ฉันสามารถใช้ตรรกะแบบมีเงื่อนไขกับช่องข้อความได้หรือไม่?
ใช่แล้ว เงื่อนไขต่างๆ เช่น “มีอยู่” “เท่ากับ” หรือ “ว่างเปล่า” ช่วยให้คุณแสดงหรือซ่อนช่องข้อมูลตามข้อมูลที่ผู้ใช้ป้อนได้
ถาม: ฟิลด์ที่ซ่อนอยู่ใช้สำหรับอะไร?
พวกมันจัดเก็บข้อมูลโดยที่ผู้ใช้มองไม่เห็น ซึ่งมีประโยชน์สำหรับการติดตามข้อมูลเมตา เช่น แท็ก UTM หรือแหล่งที่มาของการอ้างอิง
ถาม: สามารถใช้ช่องข้อความสำหรับตัวเลขได้หรือไม่?
ใช่ แต่ให้ใช้ช่องตัวเลขสำหรับการคำนวณหรือการตรวจสอบความถูกต้องของตัวเลข ใช้ช่องข้อความโดยเลือก “เฉพาะตัวเลข” เมื่อคุณต้องการรหัสหรือรหัสประจำตัวที่ไม่ควรนับเป็นตัวเลข
ถาม: รูปแบบ regex สามารถมีความแม่นยำได้มากแค่ไหน?
Regex สามารถบังคับใช้รูปแบบที่เฉพาะเจาะจงมากได้ หากต้องการสร้างหรือตรวจสอบรูปแบบที่ซับซ้อน ควรใช้โปรแกรมทดสอบ Regex