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

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

หากต้องการให้ผู้ใช้เข้าถึงแบบฟอร์มได้มากที่สุด ให้ใช้องค์ประกอบที่สร้างขึ้นสำหรับ งาน: <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>