ฟอร์มที่ออกแบบมาอย่างดีจะช่วยผู้ใช้และเพิ่มอัตรา Conversion การแก้ไขเพียงนิดเดียวก็สร้างความแตกต่างได้มากแล้ว
นี่คือตัวอย่างของรูปแบบการชำระเงินง่ายๆ ที่แสดงให้เห็นแนวทางปฏิบัติแนะนำทั้งหมด
ต่อไปนี้เป็นตัวอย่างของแบบฟอร์มที่อยู่แบบง่ายที่แสดงให้เห็นถึงแนวทางปฏิบัติแนะนำทั้งหมด
เช่น HTML ต่อไปนี้ระบุอินพุตสำหรับปีเกิดระหว่างปี 1900 ถึง 2020 การใช้ type="number" จะจำกัดค่าอินพุตให้เป็นตัวเลขเท่านั้น โดยอยู่ภายในช่วงที่ระบุโดย min และ max ถ้าคุณพยายามป้อนตัวเลขนอกช่วง ระบบจะตั้งค่าอินพุตนั้นให้เป็นสถานะที่ไม่ถูกต้อง
ตัวอย่างต่อไปนี้ใช้ pattern="[\d ]{10,30}" เพื่อให้แน่ใจว่ามีหมายเลขบัตรสำหรับชำระเงินที่ถูกต้อง แต่มีการเว้นวรรคได้
เบราว์เซอร์รุ่นใหม่จะตรวจสอบความถูกต้องของอินพุตที่มีประเภท email หรือ url ด้วย
เลย์เอาต์ตารางกริด CSS
เลย์เอาต์แบบตารางกริดของ CSS ช่วยให้สร้างตารางกริดที่มีความยืดหยุ่นได้อย่างตรงไปตรงมา
หากเราพิจารณาตัวอย่างแบบลอยตัวก่อนหน้านี้ แทนที่จะสร้างคอลัมน์ที่มีเปอร์เซ็นต์ เราอาจใช้เลย์เอาต์แบบตารางกริดและหน่วย fr ซึ่งแสดงพื้นที่ส่วนหนึ่งที่มีอยู่ในคอนเทนเนอร์
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
นอกจากนี้ยังใช้ตารางกริดเพื่อสร้างเลย์เอาต์ตารางกริดปกติได้
โดยทุกขนาดจะพอดีกัน
จำนวนแทร็กที่พร้อมให้บริการจะลดลงเมื่อหน้าจอลดขนาดลง
ในการสาธิตด้านล่าง เรามีการ์ดจำนวนมากที่สุดเท่าที่จะพอดีกับแต่ละแถว โดยขนาดขั้นต่ำคือ 200px
อ่านเพิ่มเติมเกี่ยวกับเลย์เอาต์ตารางกริด CSS
เลย์เอาต์หลายคอลัมน์
สำหรับเลย์เอาต์บางประเภท คุณสามารถใช้เลย์เอาต์หลายคอลัมน์ (Multicol) ได้ ซึ่งจะสร้างจำนวนคอลัมน์ที่ปรับเปลี่ยนตามอุปกรณ์ด้วยพร็อพเพอร์ตี้ column-width
ในการสาธิตด้านล่าง คุณจะเห็นว่ามีการเพิ่มคอลัมน์หากมีพื้นที่สำหรับคอลัมน์ 200px อีกคอลัมน์หนึ่ง