ภาพแตก

แบบฟอร์มที่ออกแบบมาอย่างดีจะช่วยผู้ใช้และเพิ่มอัตรา Conversion การแก้ไขเล็กๆ น้อยๆ เพียงอย่างเดียวอาจสร้างความแตกต่างได้อย่างมาก

หากต้องการดูแนวทางปฏิบัติแนะนำเหล่านี้ด้วยบทแนะนํา ให้ดู 2 โค้ดแล็บ ได้แก่ โค้ดแล็บแนวทางปฏิบัติแนะนำสําหรับแบบฟอร์มการชําระเงินและโค้ดแล็บแนวทางปฏิบัติแนะนำสําหรับแบบฟอร์มที่อยู่

ต่อไปนี้คือตัวอย่างแบบฟอร์มการชำระเงินที่แสดงแนวทางปฏิบัติแนะนำทั้งหมด

ต่อไปนี้คือตัวอย่างแบบฟอร์มที่อยู่แบบง่ายที่แสดงแนวทางปฏิบัติแนะนำทั้งหมด

ตัวอย่างเช่น 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 คอลัมน์อื่น