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