การจัดรูปแบบแบบฟอร์ม

ช่วยให้ผู้ใช้สามารถใช้แบบฟอร์มของคุณกับเบราว์เซอร์ที่ต้องการ

หากต้องการให้ผู้ใช้เข้าถึงแบบฟอร์มของคุณได้มากที่สุด ให้ใช้องค์ประกอบที่สร้างขึ้นสำหรับงาน: <input>, <textarea>, <select> และ <button> นี่คือเกณฑ์พื้นฐานสำหรับแบบฟอร์มที่ใช้งานได้

รูปแบบเบราว์เซอร์เริ่มต้นดูไม่ดีเลย มาแก้ไขกัน

ตรวจสอบว่าทุกคนอ่านส่วนควบคุมแบบฟอร์มได้

ขนาดแบบอักษรเริ่มต้นสำหรับการควบคุมแบบฟอร์มในเบราว์เซอร์ส่วนใหญ่เล็กเกินไป เปลี่ยนขนาดแบบอักษรด้วย CSS เพื่อให้ตัวควบคุมแบบฟอร์มอ่านได้

เพิ่ม font-size และ line-height เพื่อให้อ่านง่ายขึ้น

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

ช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ในแบบฟอร์ม

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

พร็อพเพอร์ตี้ CSS margin จะเพิ่มพื้นที่ระหว่างองค์ประกอบ และพร็อพเพอร์ตี้ padding จะเพิ่มพื้นที่รอบๆ เนื้อหาขององค์ประกอบ

สำหรับเลย์เอาต์ทั่วไป ให้ใช้ Flexbox หรือ Grid ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเลย์เอาต์ CSS

ตรวจสอบว่าการควบคุมแบบฟอร์มมีลักษณะเหมือนการควบคุมแบบฟอร์ม

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

input,
textarea {
  border: 1px solid;
}

ช่วยให้ผู้ใช้ส่งแบบฟอร์ม

ลองใช้ background สำหรับ <button> เพื่อให้ตรงกับสไตล์ของเว็บไซต์ และลบล้างหรือนำสไตล์ border ตามค่าเริ่มต้นออก

ช่วยให้ผู้ใช้เข้าใจสถานะปัจจุบัน

เบราว์เซอร์จะใช้รูปแบบเริ่มต้นสำหรับ :focus คุณลบล้างรูปแบบของ :focus เพื่อให้ตรงกับสีที่เหมาะกับแบรนด์ได้

button:focus {
    outline: 4px solid green;
}

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการจัดรูปแบบแบบฟอร์ม

แหล่งข้อมูล

• เรียนรู้ CSS
• วิธีเลย์เอาต์ CSS
• การออกแบบตัวบ่งชี้โฟกัส
• กำลังเปลี่ยนกลับรูปแบบเริ่มต้นของ <button>