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

:checked :disabled และคลาสเสมือนของสถานะแบบฟอร์ม

กำหนดรูปแบบองค์ประกอบแบบฟอร์มตามสถานะการโต้ตอบ เช่น checked, disabled และ required

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

ภาพรวมคลาสเทียมสถานะแบบฟอร์ม

CSS มีคลาสเทียมที่สะท้อนสถานะขององค์ประกอบแบบฟอร์ม HTML ช่วยให้จัดรูปแบบตัวควบคุมแบบฟอร์มด้วย CSS ล้วนได้โดยไม่ต้องใช้ JavaScript

:checked

:checked มีผลกับช่องทำเครื่องหมายและปุ่มตัวเลือกเมื่อถูกเลือก รวมถึงองค์ประกอบ <option> ภายในรายการเลือกเมื่อมีการเลือก

<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>

:checked สำหรับช่องทำเครื่องหมายแบบกำหนดเอง

เทคนิค :checked: ซ่อนอินพุตดั้งเดิม แล้วจัดรูปแบบกล่องแบบกำหนดเองโดยใช้ตัวเลือกพี่น้องที่อยู่ติดกันซึ่งทำงานผ่าน :checked:

<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>

:disabled และ :enabled

:disabled เลือกองค์ประกอบแบบฟอร์มที่มีแอตทริบิวต์ disabled ส่วน :enabled เลือกองค์ประกอบที่สามารถโต้ตอบได้

<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>

:required และ :optional

:required เลือกอินพุตที่มีแอตทริบิวต์ required ส่วน :optional เลือกอินพุตที่ไม่มีแอตทริบิวต์นี้

<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />

:valid และ :invalid

:valid และ :invalid สะท้อนสถานะการตรวจสอบความถูกต้องของแบบฟอร์มโดยเบราว์เซอร์ โดยอิงตามชนิด รูปแบบ ค่าต่ำสุด/สูงสุด และข้อกำหนด required

<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />

:user-valid และ :user-invalid

เบราว์เซอร์จะตรวจสอบความถูกต้องทันทีเมื่อโหลดหน้า แม้ผู้ใช้ยังไม่ได้โต้ตอบก็ตาม :user-valid และ :user-invalid จะมีผลหลังจากผู้ใช้โต้ตอบกับช่องข้อมูลแล้วเท่านั้น ทำให้ประสบการณ์ผู้ใช้ดีกว่ามาก

<input type="email" value="not-an-email" required />

:placeholder-shown

:placeholder-shown มีผลเมื่ออินพุตกำลังแสดงข้อความตัวแทน ซึ่งหมายความว่าช่องข้อมูลนั้นยังว่างอยู่ ใช้เพื่อตรวจจับอินพุตที่ว่างโดยไม่ต้องใช้ JavaScript

<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>

:read-only และ :read-write

:read-only เลือกอินพุตที่มีแอตทริบิวต์ readonly ส่วน :read-write เลือกอินพุตที่แก้ไขได้

<input type="text" value="Read-only field" readonly />

:indeterminate

:indeterminate มีผลกับช่องทำเครื่องหมายที่อยู่ในสถานะกึ่งกลาง (ไม่ใช่ทั้งเลือกแล้วและไม่ได้เลือก — กำหนดผ่าน JavaScript) รวมถึงปุ่มตัวเลือกเมื่อยังไม่มีการเลือกตัวเลือกใดในกลุ่ม

<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>

:in-range และ :out-of-range

สำหรับอินพุต type="number" หรือ type="range" ที่มีค่าต่ำสุด/สูงสุด :in-range และ :out-of-range จะสะท้อนความถูกต้องของค่าปัจจุบันเมื่อเทียบกับขอบเขตเหล่านั้น

<input type="number" min="1" max="10" value="15" />

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

คลาสเทียมใดใช้รูปแบบการตรวจสอบความถูกต้องของแบบฟอร์มเฉพาะหลังจากผู้ใช้โต้ตอบกับช่องอินพุตแล้ว?

สรุป

คลาสเทียมสถานะแบบฟอร์มของ CSS สะท้อนสถานะการตรวจสอบความถูกต้องและการโต้ตอบของแบบฟอร์มดั้งเดิมโดยไม่ใช้ JavaScript ได้แก่ :checked, :disabled, :required, :valid, :invalid และอื่น ๆ ควรเลือกใช้ :user-invalid แทน :invalid เพื่อประสบการณ์ผู้ใช้ที่ดีกว่า ใช้ :placeholder-shown เพื่อตรวจจับช่องข้อมูลว่าง

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

บทเรียน “:checked :disabled และคลาสเสมือนของสถานะแบบฟอร์ม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “:checked :disabled และคลาสเสมือนของสถานะแบบฟอร์ม”

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

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

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

บทเรียน “:checked :disabled และคลาสเสมือนของสถานะแบบฟอร์ม” ใช้เวลานานแค่ไหน

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

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

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

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

  1. :hover :focus :active และ :visited
  2. :nth-child และ :nth-of-type
  3. :not() :is() และ :where()
  4. :checked :disabled และคลาสเสมือนของสถานะแบบฟอร์ม
← กลับไปที่ CSS Academy