หากต้องการให้ผู้ใช้เข้าถึงแบบฟอร์มได้มากที่สุด ให้ใช้องค์ประกอบที่สร้างขึ้นสำหรับ
งาน: <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;
}
ตรวจสอบความเข้าใจ
ทดสอบความรู้เรื่องการจัดรูปแบบ
เหตุใดคุณจึงควรใช้หน่วยสัมพัทธ์สำหรับ font-size
เพื่อให้มั่นใจว่าขนาดจะตอบสนองต่อความต้องการของผู้ใช้
🎉
เพื่อให้แน่ใจว่าขนาดตอบสนองต่อองค์ประกอบก่อนหน้า
ลองอีกครั้งนะ
เพื่อให้แน่ใจว่าขนาดจะตอบสนองต่อโหมดมืด
ลองอีกครั้งนะ
เพื่อให้แน่ใจว่าขนาดตอบสนองต่อคำสืบค้นสื่อ
ลองอีกครั้งนะ
คุณจะเพิ่มระยะห่างระหว่างการควบคุมแบบฟอร์มได้อย่างไร
การใช้พร็อพเพอร์ตี้ CSS padding
ลองอีกครั้งนะ
การใช้พร็อพเพอร์ตี้ CSS spacer
ลองอีกครั้งนะ
การใช้พร็อพเพอร์ตี้ CSS margin
🎉
การใช้พร็อพเพอร์ตี้ CSS boundary
ลองอีกครั้งนะ
แหล่งข้อมูล
