Quest สำหรับเว็บฟอร์มที่ชาญฉลาดกว่า

แบบฟอร์มออนไลน์เป็นหนึ่งในส่วนที่ยุ่งยากที่สุดในการพัฒนาเว็บไซต์ให้ถูกต้องโดยเฉพาะกับสิ่งต่าง ๆ ที่อาจผิดพลาดได้ ลักษณะที่เปลี่ยนไปของการที่ผู้คนเข้าถึงเนื้อหาออนไลน์นั้นมีผลกระทบต่อเทคโนโลยีที่พัฒนาขึ้นมาหลายปีก่อนที่ผู้คนจะคาดหวังว่าจะสามารถใช้โทรศัพท์ได้ในสิ่งที่ปกติแล้วพวกเขาจะทำกับคอมพิวเตอร์เท่านั้น มันเป็นเทคโนโลยีที่มีวิวัฒนาการน้อยมาก

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

แต่การออกแบบแบบฟอร์มเป็นทักษะเฉพาะทางอย่างมาก ต้องทำความเข้าใจว่าผู้คนโต้ตอบกันอย่างไรในformatไอออนและทำความเข้าใจวิธีที่ดีที่สุดในการรวบรวมและนำเสนอในformatไอออน. โดยที่การออกแบบเว็บโดยทั่วไปจะเน้นที่การนำเสนอเป็นหลักformatไอออนและภาพในลักษณะที่น่าสนใจ แต่ใช้งานได้จริง ความต้องการการออกแบบรูปแบบที่เรามุ่งเน้นความสนใจไปที่ธรรมชาติของ informatจากนั้นจึงตัดสินใจเลือกวิธีที่ดีที่สุดในการจัดโครงสร้างในหน้าเพื่อให้ทำงานได้ตามที่ตั้งใจไว้ สุนทรียศาสตร์มีความสำคัญน้อยกว่าในกรณีนี้ แต่ก็ยังไม่ควรทำเพื่อgotten.

ในบทความนี้เราจะมาดูศิลปะการออกแบบรูปแบบเว็บและดูว่าเราสามารถหาวิธีที่จะทำให้รูปแบบเว็บของเราฉลาดขึ้นทั้งในแง่ของรูปลักษณ์และวิธีการใช้งานของพวกเขา

เครื่องมือในการสร้างเว็บฟอร์ม

เครื่องมือมาตรฐานที่เราได้รับจากนักพัฒนาเบราว์เซอร์และ W3C ในการรวมเว็บฟอร์มของเราเข้าด้วยกันนั้นไม่เหมาะอย่างยิ่งและก่อนที่จะใช้ CSS กับพวกเขาพวกเขาค่อนข้างน่ารังเกียจจริงๆ นี่คือสิ่งที่พวกเขาดูเหมือน:

นอกจากนี้ยังมีการควบคุมอินพุตมาตรฐานอื่นที่เรียกว่า เลือกแต่คุณควรหลีกเลี่ยงการใช้สิ่งนี้เว้นแต่ว่าการประหยัดพื้นที่เป็นปัญหาที่ร้ายแรง มีวิธีที่ดีกว่าในการจัดการงานที่ดำเนินการโดยตัวควบคุมที่เลือกเนื่องจากเราจะพูดถึงในภายหลัง ควรหลีกเลี่ยงการควบคุม textarea เมื่อเป็นไปได้เพราะมันเป็นปัญหาและเป็นของเก่า

นอกเหนือจากรายการอินพุตมาตรฐานเหล่านี้แล้วยังมีรายการใหม่ที่สร้างขึ้นเป็นพิเศษสำหรับ HTML5 ยกเว้นเมื่อมีการเตรียมเอกสารอย่างเคร่งครัดสำหรับการใช้ภายในและเป็นที่ทราบถึงสภาพแวดล้อมของเบราว์เซอร์ควรใช้เฉพาะส่วนประกอบที่ทำงานได้ทั้ง Firefox และ Chrome เป็นเรื่องที่ดีถ้าองค์ประกอบยังทำงานในเบราว์เซอร์อื่น แต่ไม่ควร เท่านั้น ทำงานในเบราว์เซอร์อื่น นี่คือองค์ประกอบ HTML5 ตามที่ปรากฏใน Firefox:

และลักษณะที่แตกต่างกันเล็กน้อยใน Chrome:

ตอนนี้เห็นได้ชัดว่าเป็นเรื่องสำคัญที่จะต้องทราบว่าอินพุต HTML5 ของคุณจะมีลักษณะและการทำงานแตกต่างกันระหว่าง Chrome และ Firefox แต่จะยังคงใช้งานได้ การควบคุมอินพุตมาตรฐานนั้นดูดีกว่า Chrome เล็กน้อยกว่าใน Firefox โปรดสังเกตว่า Chrome กำหนดมาตรฐานวันที่ในอเมริกาเหนือซึ่งผู้ใช้อาจไม่พอใจ นอกจากนี้การควบคุมวันที่ในเวอร์ชัน Chrome ยังทำให้ไม่สามารถแสดงผลได้และควรใช้สำหรับการป้อนข้อมูลเท่านั้น การเพิ่มตัวเลือกวันที่เป็นการปรับปรุงที่สำคัญใน Chrome แต่เราอาจคาดหวังให้เห็นสิ่งนี้ใน Firefox รุ่นอนาคต

เนื่องจาก Firefox เป็นโอเพ่นซอร์สคุณสามารถสร้าง Firefox เวอร์ชั่นส่วนตัวของคุณเองเพื่อแสดงอินพุตแบบเดียวกับที่ Chrome ทำโดยการดาวน์โหลดโอเพนซอร์ส Chromium เบราว์เซอร์ซอร์สโค้ดที่ Chrome ใช้และทำการย้ายส่วนที่เกี่ยวข้องของโค้ดไปยังซอร์ส Firefox รหัส (แต่คุณจะต้องทำเช่นนั้นทุกครั้งที่คุณอัพเกรด Firefox เป็นเวอร์ชันใหม่)

อย่างไรก็ตามประเด็นหลักคือถึงแม้จะมีการปรับปรุงของ Chrome ลักษณะที่เป็นค่าเริ่มต้นของการควบคุมอินพุตนั้นมีขนาดเล็กและไม่น่าสนใจ มีการควบคุมอื่น ๆ เล็กน้อย แต่เนื่องจากไม่สามารถใช้งานได้ทั้งใน Chrome และ Firefox จึงไม่ควรใช้บนเว็บไซต์ที่มีไว้สำหรับสาธารณะ

Bootstrap's (เกือบเพียงพอ) คำตอบ

Bootstrap ใช้สไตล์ในการควบคุมมาตรฐานที่ช่วยเพิ่มลักษณะที่ปรากฏของพวกเขาในระดับหนึ่ง แต่เนื่องจากปรัชญาการออกแบบที่เน้นการใช้อุปกรณ์พกพาเป็นหลักของ Bootstrap จึงทำให้เกิดผลกระทบที่ไม่พึงประสงค์บางประการในรูปแบบที่ไม่ได้ตั้งใจให้แสดงเป็นคอลัมน์เดียวและทำให้ฟิลด์อินพุตสั้น ๆ ดูตลกเมื่อมันครอบคลุมทั้งคอลัมน์โดยค่าเริ่มต้น โลกอาจหายไปจากมือถือแล้ว แต่ไม่ได้คิดค้นรูปแบบโดยคำนึงถึงผู้ใช้อุปกรณ์พกพา

Bootstrap ขยายการควบคุมเพื่อเติมความกว้างแนวนอนของคอนเทนเนอร์หมายความว่าการควบคุมทั้งหมดจะมีความกว้างเท่ากันไม่ว่าคุณจะชอบหรือไม่ (ยกเว้นว่าคุณใช้พฤติกรรมนี้มากเกินไป) และอนุญาตให้คุณแต่งตัวประเภทควบคุมด้วย bling เพิ่มเติม วิธีการแก้ปัญหาของ Bootstrap นั้นสวยงามและเอาชนะปัญหาบางอย่างของการควบคุมที่มีลักษณะที่แตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน แต่ใช้ได้กับการควบคุมมาตรฐานเท่านั้น ตัวควบคุม HTML5 ไม่ได้ถูกนำมาใช้ใน Bootstrap เวอร์ชันปัจจุบันดังนั้นคุณจะต้องจัดรูปแบบตัวควบคุมเหล่านั้นด้วยตัวคุณเอง

Bootstrap ช่วยให้คุณสามารถรวมการควบคุมเข้าด้วยกัน บางครั้งสิ่งนี้ดีและบางครั้งก็ไม่ดี การรวมการป้อนข้อความด้วยปุ่มและช่องทำเครื่องหมายอาจดูดี แต่อาจสร้างความสับสนให้กับผู้ใช้ว่าพวกเขาควรโต้ตอบกับการควบคุมที่ไม่คุ้นเคยอย่างไร

สิ่งที่ Bootstrap จัดหาให้นั้นเป็นอุปกรณ์สร้างรูปแบบที่ฉันโปรดปรานสองชิ้น แผง และ ดี. สิ่งเหล่านี้มีประโยชน์อย่างมากสำหรับการจัดกลุ่มข้อมูลในแบบฟอร์มเพื่อให้เห็นภาพว่าข้อมูลใดเกี่ยวข้องกับข้อมูลอื่นใดและเพื่อแยกข้อมูล

อาคารสมาร์ท 101

ตอนนี้เราพร้อมที่จะคิดเกี่ยวกับวิธีการสร้างแบบฟอร์มอย่างชาญฉลาดยิ่งขึ้น ในการทำเช่นนี้ เราต้องคิดให้ไกลเกินกว่าค่าเริ่มต้น เราต้องตระหนักถึง desktopรากที่ถูกผูกไว้ของตัวควบคุมฟอร์ม และความจำเป็นในความเข้ากันได้กับอุปกรณ์เคลื่อนที่ และเราจำเป็นต้องใส่ใจในเรื่องต่างๆ เช่น การใช้งานและการตรวจสอบความถูกต้อง (หากจะใช้แบบฟอร์มในการรวบรวมข้อมูล)

จุดสุดท้ายนั้นเป็นสิ่งที่ดีเพราะในขณะที่ใช้การควบคุมแบบฟอร์มเพื่อรวบรวมอินพุต แต่ก็ใช้สำหรับแสดงข้อมูลที่เก็บไว้ด้วย ผู้ใช้เว็บโดยเฉลี่ย (และควรจะ) สนใจที่จะเข้ามาformatไอออนจากคุณมากกว่าให้ในformatไอออนให้กับคุณ

การรวบรวมข้อมูลทำได้ง่าย ผู้คนจะกรอกอะไรก็ได้ที่คุณติดอยู่ตรงหน้าแม้ว่ามันจะยุ่งเหยิงก็ตาม แต่เมื่อพูดถึงการแสดงข้อมูลมันจะยุ่งยากกว่า ดังนั้นในที่นี้เราจะให้ความสำคัญกับการใช้แบบฟอร์มเพื่อแสดงข้อมูลมากกว่าการเก็บรวบรวมเนื่องจากการแสดงผลต้องใช้ความระมัดระวังและ“ ความฉลาด” มากขึ้น

1. เราต้องการแบบฟอร์มหรือไม่?

ก่อนที่เราจะสร้างฟอร์มเราควรตรวจสอบว่าเราต้องการรูปแบบจริงหรือไม่ หากข้อมูลสามารถแสดงอย่างเพียงพอและไม่มั่นใจในตารางตารางมักจะมีประสิทธิภาพมากขึ้นและใช้งานได้จริง

แบบฟอร์มมีความจำเป็นหาก:

• เรากำลังรวบรวมข้อมูลจากผู้ใช้
• เรามีข้อมูลจำนวนมากที่จะแสดง
• ข้อมูลจะต้องแบ่งส่วนอย่างชัดเจน
• ผู้ใช้มีแนวโน้มที่จะเข้าถึงข้อมูลจากอุปกรณ์มือถือ

หากรายการใด ๆ ข้างต้นไม่เป็นจริงคุณไม่จำเป็นต้องใช้แบบฟอร์มและตารางจะพอเพียง ความท้าทายที่เราเผชิญกับความเข้ากันได้กับมือถือก็คือทั้งโต๊ะและแบบฟอร์มไม่เหมาะกับหน้าจอมือถือมากนัก ความจริงที่ว่าผู้ออกแบบสมาร์ทโฟนให้ผู้ใช้เลือกใช้เบราว์เซอร์ในแนวตั้งและผู้ใช้ส่วนใหญ่ชอบถือโทรศัพท์ในแบบที่ทำให้ผู้ออกแบบเว็บไซต์ต้องรับมือกับปัญหาความเข้ากันได้ของมือถือส่วนใหญ่

ไม่ว่าแบบฟอร์มจะปรับให้เข้ากับการแสดงผลบนมือถือได้มากกว่าตาราง ดังนั้นหากคุณต้องมั่นใจว่าข้อมูลทั้งหมดสามารถดูได้อย่างง่ายดายบนหน้าจอมือถือแบบฟอร์มก็เป็นทางเลือกที่ดีกว่าตาราง…บางครั้ง!

2. ออกแบบ desktop แบบ

โดยทั่วไปคุณควรออกแบบเลย์เอาต์มือถือก่อน แต่เมื่อมันมาถึงแบบฟอร์มนั่นไม่ใช่วิธีที่ดีที่สุดเพราะเราจำเป็นต้องรู้ว่าจะจัดกลุ่มข้อมูลอย่างไรและเราทำได้เฉพาะเมื่อเรา สามารถเห็นฟิลด์ทั้งหมดในคราวเดียวซึ่งเป็นสิ่งที่ไม่สามารถทำได้บนมือถือเว้นแต่ว่าคุณกำลังแสดงข้อมูลเล็ก ๆ น้อย ๆ ที่เราไม่จำเป็นต้องกังวลกับการออกแบบฟอร์ม

วิธีที่เร็วที่สุดในการจำลองการออกแบบแบบฟอร์มคือการใช้ InkScape ในตัวอย่างนี้ เราจะสร้างระบบสำหรับจัดการระเบียน HR นี่คือการจำลองสำหรับ desktop ต้นแบบ:

สี่เหลี่ยมด้านนอกแสดงถึงพื้นที่ทั้งหมดของจอแสดงผล 1024 x 768 พิกเซล เมื่อใดก็ได้ desktop เบราว์เซอร์ เราไม่สามารถเข้าถึงพิกเซลจำนวนมากนั้นได้ เว้นแต่ผู้ใช้จะอยู่ในโหมดเต็มหน้าจอ (ซึ่งไม่ค่อยเป็นเช่นนั้น) ของเรา

การออกแบบคือ 900 x 600px ซึ่งควรพอดีกับพื้นที่ที่มีอยู่มากที่สุด desktop หน้าจอ

เมื่อพื้นที่ที่มีอยู่น้อยกว่า 900px คอลัมน์ 2 x 450px ของเราจะแตกและปรากฏเป็นคอลัมน์ 450px ต่อเนื่องหนึ่งคอลัมน์ วิธีนี้จะช่วยแก้ปัญหาความเข้ากันได้กับมือถืออย่างน้อยก็จนกว่า Google จะขอให้เราทำให้ไซต์ทั้งหมดของเราสามารถพอดีกับหน้าจอนาฬิกาข้อมือ

คุณจะสังเกตเห็นว่าจอแสดงผลส่วนใหญ่นั้นประกอบไปด้วยกล่องป้อนข้อมูลทั่วไปซึ่งอาจดูน่าเบื่อ แต่ในความเป็นจริงแล้วมันเป็นวิธีที่ดีที่สุดในการทำเช่นนั้น แจ้งให้ทราบด้วยการใช้แบบอักษรความกว้างคงที่ สิ่งนี้จะช่วยรักษาความสม่ำเสมอในการออกแบบฟอร์ม

จริง ๆ แล้วคอลัมน์ของเราจะมากกว่า 450px เล็กน้อยเช่นเดียวกับ 600px แต่ละอัน แต่ถ้าเราต้องการบังคับให้ความกว้างของคอลัมน์เท่ากับ 450px เราเพียงแค่ลดขนาดคอลัมน์ของเราจาก 6 เหลือ 5 แต่คอลัมน์ 600px ควรพอดีกับหน้าจอมือถือ ในโหมดแนวตั้งโดยไม่ต้องล้อมรอบ

เราจะทดสอบโครงร่างของเราด้วยรหัสนี้:

และเราจะเห็นว่าทุกอย่างดูดี (เพราะเราเพิ่มเส้นขอบชั่วคราวเพื่อแสดงให้เราเห็น)

วิดเจ็ตไม้บรรทัดหน้าจอ Linux นั้นเห็นได้ชัดว่าไม่ได้เป็นส่วนหนึ่งของหน้าเว็บ แต่มีไว้เพื่อแสดงให้เราเห็นว่าคอลัมน์ของเราจะไม่แตกหักบนหน้าจอขนาดเล็ก เกิดอะไรขึ้นกับความกว้างหน้าจอทั่วไปที่แตกต่างกัน:

3. การสร้างขนาดอินพุตที่กำหนดเองและตำแหน่งป้ายกำกับ

หากเราเพิ่งปล่อยให้ทุกอย่างเป็นค่าเริ่มต้นโดยไม่ต้องเพิ่ม CSS ที่กำหนดเองนี่คือสิ่งที่จะเกิดขึ้นเมื่อเราเพิ่มการควบคุมแถวแรกของเรา:

สิ่งนี้เกิดขึ้นเนื่องจากเลเบลสำหรับอินพุตเริ่มต้นแต่ละรายการทางด้านซ้ายของอินพุตและเนื่องจากเราไม่ได้ตั้งค่าความกว้างที่กำหนดเองสำหรับการควบคุมอินพุต เราสามารถแก้ไขปัญหาทั้งสองด้วย CSS

ตอนนี้เราแค่ตั้งค่าคุณสมบัติการแสดงผลขององค์ประกอบป้ายกำกับเป็น "บล็อก" ตั้งค่าฟิลด์ของ First และ Last เป็นคลาส "in40w" และฟิลด์ MI เป็นคลาส "in10w" และทุกอย่างควรดูดีกว่ามาก

อย่างที่คุณเห็นมันดูดีขึ้น แต่เลย์เอาต์ไม่ถูกต้องอีกต่อไป ตอนนี้กล่องจะถูกซ้อนกัน ดังนั้นวิธีที่เราแก้ไขนั่นก็คือการกำจัดความคิดในการใช้องค์ประกอบฉลากเลยเพราะเราไม่ต้องการสิ่งนั้นจริงๆ เราจะใช้ของเรา ใน 40w และ ใน 10w คลาสรวมทั้งสร้างคลาสใหม่ที่เรียกว่า ในLeftOf.

ซึ่งเมื่อใช้แล้วจะแก้ไขปัญหาที่เราเห็นก่อนหน้านี้เช่นนี้:

แต่นี่จะไม่เหลือที่ว่างสำหรับฟิลด์ SSN นั่นเป็นเพราะคอลัมน์ด้านซ้ายของเรามีขนาดใหญ่กว่าที่คาดไว้ดังนั้น 40% จึงเป็นที่ว่างมากกว่าที่เราต้องการสำหรับเขตข้อมูลเหล่านี้ดังนั้นเราจึงสามารถตัดมันลงไป ใน 30wและฟิลด์ตรงกลางนั้นใหญ่กว่าที่มันต้องเป็นดังนั้นเราจึงทำได้ ใน 5w. นี่คือสิ่งที่เกิดขึ้น:

ตอนนี้มีพื้นที่เหลือเฟือเพียงพอที่จะเพิ่มฟิลด์ SSN ซึ่งกรอกบรรทัดแรกของแบบฟอร์มการป้อนข้อมูลของเราให้สมบูรณ์ หลังจากปรับรายละเอียดทั้งหมดเหล่านี้ให้ราบรื่นการสร้างคอลัมน์ที่เหลือควรจะง่ายมาก เราสามารถกำจัดเส้นขอบชั่วคราวได้ในขณะนี้และใช้พื้นหลังที่ถูกต้องกับคอลัมน์ นี่คือครึ่งบนของแผงก่อนที่เราจะไปยังพื้นที่พิเศษของแบบฟอร์ม:

บางสิ่งเกิดขึ้นในช่วงนี้ ส่วนแรกคือส่วนที่ง่ายในการตั้งค่าสีพื้นหลังสำหรับคอลัมน์ (rgb (235,235,246)) และถึงแม้ว่าคุณจะไม่เห็นที่นี่สีข้อความสำหรับอินพุตทั้งหมดถูกตั้งค่าเป็น # 427DB4 และน้ำหนักแบบอักษร ถูกตั้งค่าเป็นตัวหนาเพื่อลดอาการปวดตา ข้อความถูกตั้งค่าให้แปลงเป็นตัวพิมพ์ใหญ่โดยอัตโนมัติโดยใช้คุณสมบัติการแปลงข้อความ CSS เพื่อเพิ่มความเร็วในการป้อนข้อมูลและลดข้อผิดพลาด

เรื่องที่ซับซ้อนมากขึ้นของการจัดตำแหน่งตัวควบคุมและทำให้แน่ใจว่าพวกเขาต้องการจัดตำแหน่งที่เหมาะสมในประเภทการแสดงผลใด ๆ ที่ต้องใช้ความคิดมากขึ้น คุณเห็นเทคนิคที่ใช้สำหรับอินพุตบรรทัดแรกและป้ายกำกับแล้ว เทคนิคนี้จะทำงานเมื่อไม่จำเป็นต้องมีระยะห่างเพิ่มเติมระหว่างอินพุต แต่ถ้าเราต้องการเพิ่มพื้นที่ว่างก็ควรใช้เทคนิคอื่นดีกว่า

เทคนิคอื่นนี้เกี่ยวข้องกับการสร้างแถวซ้อนของคอลัมน์ภายในคอลัมน์หลักของเรา ซึ่งจะช่วยให้ตัวควบคุมมีระยะห่างอย่างเหมาะสม จำนวนคอลัมน์และขนาดของคอลัมน์จะเปลี่ยนไปตามข้อกำหนดของชุดควบคุมแต่ละชุด จำไว้ทุกอย่างคือ responsiveดังนั้น เมื่อปรับขนาดคอลัมน์ ทุกอย่างในคอลัมน์จะพยายามปรับขนาดให้ตรงกับการเปลี่ยนแปลง นี่เป็นข่าวดีสำหรับผู้ใช้ที่มีความบกพร่องทางสายตา เนื่องจากพวกเขาสามารถซูมขยายบนจอแสดงผลได้ และทุกอย่างจะถูกจัดเรียงอย่างถูกต้องเหมือนกับผู้ใช้รายอื่น

การย้ายไปยังส่วนที่ซับซ้อนมากขึ้นของคอลัมน์ด้านซ้ายแนวคิดดั้งเดิมที่ระบุไว้ใน mock-up เรียกร้องให้มีโครงสร้างที่ยากต่อการนำไปใช้ โชคดีที่ฉันรู้ว่าข้อมูลในพาเนลการให้สิทธิอาจเพิ่มขึ้นสองเท่าหากใช้ช่องทำเครื่องหมายมาตรฐานและสิ่งนี้สามารถแก้ไขปัญหาความซับซ้อนของรูปแบบได้ดี:

แผงไฟแช็กรอบส่วนพิเศษเป็นเพียงบ่อบู๊ตสแตรปธรรมดา สำหรับการป้อนข้อมูลศาสนา จำเป็นต้องเลือกจากรายการชุดของศาสนาที่เป็นทางการที่กำหนดไว้ล่วงหน้า (รวมถึง "อื่นๆ") การพัฒนาคอลัมน์ด้านขวานั้นง่ายยิ่งขึ้น และเพียงแค่ใช้เทคนิคเดียวกันจากตัวควบคุมชุดแรกบนคอลัมน์ด้านซ้าย จัดระเบียบตัวควบคุมในตาราง formatแต่โดยไม่ต้องใช้ตาราง

โปรเจกต์นี้จะสำเร็จได้ต้องเพอร์เฟค responsiveness บนขนาดจอแสดงผลอย่างเป็นทางการทั้งหมด เรามาดูกันว่าผลลัพธ์จะเป็นอย่างไร ครั้งแรกกับเวอร์ชันความละเอียดเต็ม:

ที่ใกล้เคียงกับต้นแบบที่เราพอใจนั่นเอง อันที่จริงมันเป็นการปรับปรุงด้วยซ้ำ ทีนี้มาดู responsive เค้าโครงในแต่ละส่วนต่างๆ ของหน้า:

Bootstrap และ HTML5 ทำให้การพัฒนาแบบฟอร์มเร็วขึ้นและง่ายขึ้นกว่าเดิม แต่นักพัฒนาหลายคนบ่อนทำลายความก้าวหน้านี้โดยทำให้แบบฟอร์มซับซ้อนเกินไป (ใช้องค์ประกอบแบบฟอร์ม HTML5 พิเศษเพียงเพราะจำเป็นสำหรับโครงการ ) และโดยการสร้างรูปแบบมิติเดียวทั้งหมดที่ไม่พยายามใช้ประโยชน์จาก responsive ออกแบบ. ด้วยความระมัดระวังและการทำงานพิเศษเพียงเล็กน้อย ข้อมูลใดๆ ก็สามารถทำให้ดูเรียบร้อยมากขึ้นบนหน้าจอทุกขนาด

คุณอาจได้รับความผิดพลาดเล็กน้อยเกี่ยวกับขนาดหน้าจอที่เล็กที่สุดในเลย์เอาต์แนวตั้งบนขนาดหน้าจอที่เล็กที่สุด (ในกรณีของโครงการนี้เขตข้อมูล Middle Initial ในแถวแรกจะเล็กกว่าที่เหมาะเล็กน้อย) แต่โดยทั่วไปผู้ใช้มือถือ ยอมรับว่านี่เป็นการแลกเปลี่ยนที่พวกเขาต้องทำเพื่อไม่ถือโทรศัพท์อย่างถูกต้อง

ทำถูกต้องแล้วแบบฟอร์มข้อมูลของคุณจะมีลักษณะเช่นนี้:

แทนเอ่อสิ่งนี้:

มารยาทภาพส่วนหัวของ ติโม คูลเดอร์