โซลูชันมาตรฐานเว็บสำหรับเว็บฟอร์ม

หลังจากเข้าสู่ eYou.com ฉันต้องแปลงอินเทอร์เฟซอีเมลเวอร์ชันใหม่เป็น XHTML+CSS ทันที โชคดีที่ทักษะพื้นฐานของฉันยังแข็งแกร่งเพียงพอ ดังนั้นฉันจึงดำเนินการอย่างเป็นระเบียบ แน่นอนว่าคุณจะพบกับปัญหาใหม่ๆ เช่น เวลาที่คุณสร้างเว็บเพจมักจะไม่ค่อยใช้แบบฟอร์มเพราะคุณไม่มีประสบการณ์กับโปรแกรมใดๆ โชคดีที่โลกนี้ยังมี Google ซึ่งช่วยให้ฉันรับมือกับความท้าทายใหม่ๆ ได้อย่างง่ายดาย เขียนประสบการณ์บางส่วนและแบ่งปันกับทุกคน

จากการพิจารณาความสามารถในการเข้าถึง วิธีมาตรฐานในการเขียนแบบฟอร์มควรรวมชุดเขตข้อมูลและคำอธิบาย (คำอธิบาย) ไว้ใน <form> และ </form> เพื่อให้ผู้ใช้สามารถเข้าใจสรุปของเขตข้อมูลแบบฟอร์มได้ โครงสร้างอย่างง่ายมีดังนี้:

ในบางกรณี คุณอาจไม่ต้องการให้ Fieldset และ Legend ส่งผลต่อความสวยงามของการออกแบบของคุณ เป็นเรื่องง่ายที่จะจัดการ เพียงตั้งค่าเส้นขอบของ Fieldset เป็น 0 และการแสดง Legend เป็นไม่มีใน CSS

ในกรณีส่วนใหญ่ เค้าโครงของแบบฟอร์มจะแบ่งออกเป็นสองคอลัมน์ โดยมีป้ายกำกับทางด้านซ้ายและช่องป้อนข้อมูล (input type="text"...) ทางด้านขวา ด้วยรูปแบบสองคอลัมน์ที่เรียบง่าย ฉันไม่แนะนำอย่างยิ่งให้ใช้ตาราง ข้อมูลอ้างอิง http://stylephreak.frogrun.com/uploads/source/cssform.php และ http://www.aplus.co.yu/css/forms/?css=1 (ข้อมูลอ้างอิงที่มีค่าสองรายการอย่างแน่นอน คุณทำไม่ได้แล้ว' ไม่จำเป็นต้องอ่านเพิ่มเติม) เราพบว่าวิธีแก้ปัญหาทั่วไปสำหรับมาตรฐานเว็บคือการเพิ่ม div รอบป้ายกำกับและ input type="text"... และตั้งค่าการแสดงผลของ div ให้บล็อก ตั้งค่าป้ายกำกับเป็น float: left; (นี่คือสาเหตุที่ div ถูกตั้งค่าให้แสดง: block;) จากนั้นจึงสามารถวางป้ายกำกับไว้ในบรรทัดเดียวกับกล่องอินพุตได้ เคล็ดลับเล็กๆ น้อยๆ ในการจัดแนวป้ายกำกับคือการกำหนดความกว้างของป้ายกำกับ จากนั้นใช้การจัดแนวข้อความเพื่อจัดแนวไปทางซ้ายหรือขวาตามต้องการ เคล็ดลับในการตั้งค่าความกว้างคือใช้หน่วย em เพื่อตั้งค่าความกว้างตามจำนวนคำสูงสุดของแท็ก โดยไม่ต้องทดสอบ px อย่างหนัก

เพื่อให้คำอธิบายของฉันเข้าใจง่ายขึ้น ฉันเพียงเขียนโค้ดบางส่วน: