เครื่องมือสร้างฟอร์ม CSS

แบบฟอร์มพื้นฐาน

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

สไตล์ทั่วไป 4 แบบ

แท็กแบบลอยตัว (floating-label) ดูสวยงามที่สุด แต่จำเป็นต้องใช้การเพิ่มโค้ดหรือ JavaScript เพื่อตรวจจับสถานะว่าง ส่วนแท็กแบบเส้นกรอบ (outlined) เป็นตัวเลือกที่ใช้งานได้กว้างขวางที่สุด

รายการตรวจสอบด้านการเข้าถึง (Accessibility)

• ต้องมีป้ายกำกับที่มองเห็นได้สำหรับข้อมูลทุกชุด อย่าใช้สัญลักษณ์แทน (placeholder) เป็นป้ายกำกับเพียงอย่างเดียว เพราะป้ายกำกับดังกล่าวจะหายไปเมื่อเลือกเนื้อหา และทำให้การแยกแยะข้อมูลไม่ชัดเจน
• <label for> หรือ <label> แบบห่อ ทั้งสองรูปแบบถือว่าใช้ได้ แต่รูปแบบแบบห่อจะใช้งานง่ายกว่าเล็กน้อย
• ตัวบ่งชี้โฟกัส: ห้ามใช้ outline: none หากไม่มีตัวทดแทน เนื่องจากผู้ใช้คีย์บอร์ดจำเป็นต้องใช้งานฟังก์ชันนี้
• ข้อความแสดงข้อผิดพลาด: ให้เชื่อมโยงไปยังข้อมูลผ่านรหัส aria-describedby ในส่วนของข้อมูลขาเข้า อย่าใช้เพียงสีเพื่อระบุข้อผิดพลาดเท่านั้น ควรประกอบด้วยข้อความหรือไอคอนประกอบด้วย
• ฟิลด์ที่จำเป็น: ใช้แอตทริบิวต์ required และเพิ่มเครื่องหมายแสดงตำแหน่ง (เครื่องหมายดอกจัน) ในป้ายชื่อสำหรับผู้ใช้ที่มองเห็นได้ปกติ
• ประเภทข้อมูลที่ใช้: ใช้ type="email", type="tel", type="url" และ type="number" โดยคีย์บอร์ดมือถือสามารถปรับใช้งานได้ตามความเหมาะสม
• คุณสมบัติของ autocomplete: autocomplete="email", autocomplete="current-password" และอื่นๆ ช่วยให้ผู้ใช้ประหยัดเวลาในการพิมพ์ได้อย่างมาก

สถานะการตรวจสอบความถูกต้องแบบเนทีฟ

CSS มีคลาสปลอมสำหรับการตรวจสอบความถูกต้องของแบบฟอร์ม:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (สำหรับการป้อนค่าตัวเลขที่มีค่าขั้นต่ำและสูงสุด)
• :placeholder-shown (ว่าง ตำแหน่งสำหรับใส่ข้อมูลปรากฏให้เห็น)
• :user-invalid (ไม่ถูกต้อง และผู้ใช้ได้มีปฏิสัมพันธ์แล้ว, เหมาะสำหรับรูปแบบข้อผิดพลาด)

คลาสปลอม :user-invalid เป็นวิธีที่เหมาะสมที่สุดในการแสดงข้อผิดพลาดเฉพาะหลังจากที่ผู้ใช้ดำเนินการแล้ว โดยไม่ปรากฏเส้นขอบสีแดงก่อนการโต้ตอบ ฟีเจอร์นี้ได้รับการรองรับในระบบปฏิบัติการหลักทั้งหมดตั้งแต่ปี 2023 เป็นต้นมา

สถานะปิดใช้งาน

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

ช่องป้อนข้อมูลที่ถูกปิดใช้งาน (disabled) จะไม่สามารถโฟกัสหรือส่งค่าได้ หากต้องการให้ยังโฟกัสได้เพื่อรองรับเครื่องอ่านหน้าจอ ให้ใช้ readonly แทน, ฟอร์มจะส่งค่าดังกล่าวไป แต่ผู้ใช้ไม่สามารถแก้ไขค่าได้