การกำหนดมาตรฐานของเว็บได้รับความสนใจและความสนใจจากทุกคนมากขึ้นเรื่อยๆ เมื่อสร้างหน้าเว็บที่สอดคล้องกับมาตรฐานของเว็บ เรามักจะประสบปัญหาเกี่ยวกับแบบฟอร์มในด้านนี้ หวังว่ามันจะช่วยเค้าโครง CSS ของทุกคน
1. ใช้แท็ก fieldset และคำอธิบายแผนภูมิ
ในแบบฟอร์มเรามักจะจัดกลุ่มข้อมูลในแบบฟอร์ม ตัวอย่างเช่น ในแบบฟอร์มการลงทะเบียน เราอาจจัดกลุ่มข้อมูลการลงทะเบียนเป็นข้อมูลพื้นฐาน (โดยทั่วไปจำเป็น) และข้อมูลโดยละเอียด (โดยทั่วไปเป็นทางเลือก) แล้วเราจะทำอย่างไรให้บรรลุผลสำเร็จ มัน? เราสามารถพิจารณาเพิ่มสองแท็กต่อไปนี้ลงในแบบฟอร์ม:
fieldset: แบบฟอร์มกลุ่ม แบบฟอร์มสามารถมีได้หลายชุดข้อมูล
คำอธิบาย : อธิบายเนื้อหาของแต่ละกลุ่ม
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <form id="demoform" class="democss" action=""> <ชุดสนาม> <legend>การลงทะเบียนพื้นฐาน</legend> <p>ชื่อ: <input type="text" name="fname" value="" /></p> - </ฟิลด์เซต> <ชุดสนาม> <legend>รายละเอียดการลงทะเบียน</legend> <p>ความสนใจ: <input type="text" name="interest" value="" /></p> - </ฟิลด์เซต> - </แบบฟอร์ม> |
ชุดเขตข้อมูลจะมีเส้นขอบตามค่าเริ่มต้น และโดยทั่วไปคำอธิบายจะแสดงที่มุมซ้ายบนตามค่าเริ่มต้น แต่ในบางกรณี คุณอาจไม่ต้องการให้สไตล์เริ่มต้นหรือเค้าโครงเริ่มต้นของชุดเขตข้อมูลและคำอธิบายส่งผลต่อความสวยงามของการออกแบบ
วิธีแก้ไข: ตั้งค่าเส้นขอบของ fieldset เป็น 0 และการแสดงคำอธิบายแผนภูมิเป็น none ใน CSS
2. ใช้แท็กป้ายกำกับ
เรากำหนดป้ายกำกับให้กับป้ายกำกับข้อความในแบบฟอร์ม และใช้แอตทริบิวต์ for เพื่อเชื่อมโยงกับส่วนประกอบของแบบฟอร์ม ผลที่ได้คือเมื่อคลิกป้ายกำกับข้อความ เคอร์เซอร์จะแสดงในส่วนประกอบของแบบฟอร์มที่เกี่ยวข้อง
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <form id="demoform" class="democss" action=""> <ชุดสนาม> <legend>การลงทะเบียนพื้นฐาน</legend> <p> <label for="fname">ชื่อ:</label> <input type="text" id="fname" name="fname" value="" /> </p> - </ฟิลด์เซต> <ชุดสนาม> <legend>รายละเอียดการลงทะเบียน</legend> <p> <label for="interest">ดอกเบี้ย:</label> <input type="text" id="interest" name="interest" value="" /> </p> - </ฟิลด์เซต> - </แบบฟอร์ม> |
นอกเหนือจากวิธีการข้างต้นแล้ว เรายังสามารถใช้ป้ายกำกับเพื่อซ้อนส่วนประกอบของฟอร์มและป้ายกำกับข้อความทั้งหมดได้ เช่น:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <label for="fname"> ชื่อ: <input type="text" id="fname" name="fname" value="" /> </ฉลาก> |
ตามข้อกำหนด ข้อความจะเชื่อมโยงกับส่วนประกอบของแบบฟอร์มที่อยู่ติดกันโดยอัตโนมัติ แต่น่าเสียดายที่เบราว์เซอร์หลักในปัจจุบัน IE6 ไม่รองรับคุณสมบัตินี้
3. ใช้แอตทริบิวต์ accesskey และ tabindex
เว็บไซต์จำเป็นต้องคำนึงถึงสถานการณ์การใช้งานมากขึ้น ตัวอย่างเช่น เมื่อไม่มีอุปกรณ์เคอร์เซอร์ (เช่น เมาส์) ก็สามารถกรอกแบบฟอร์มโดยใช้การทำงานของแป้นพิมพ์ได้ ในขณะนี้ การคลิกไม่มีความหมายสำหรับสิ่งเหล่านั้น ในเวลานี้ เราเลือกคีย์การเข้าถึงของป้ายกำกับ (คีย์ลัด, ค่าแอตทริบิวต์ alt+accesskey ภายใต้ IE, alt+shift+ ค่าแอตทริบิวต์คีย์การเข้าถึงภายใต้ FF) และแอตทริบิวต์ tabindex (คีย์ Tab, ค่าแอตทริบิวต์ tabindex เป็นลำดับ) เพื่อเพิ่มลงในป้ายกำกับแบบฟอร์ม เช่น ฉลาก ข้อมูลเข้า ฯลฯ
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <label for="fname" accesskey="f" tabindex="1">ชื่อ:</label> <input type="text" id="fname" name="fname" value="" /> |
4. ใช้แท็ก optgroup
บทบาทของแท็ก optgroup คือการกำหนดชุดตัวเลือกในรายการตัวเลือก เราสามารถใช้แท็ก optgroup เพื่อจัดประเภทตัวเลือกขององค์ประกอบที่เลือกและใช้แอตทริบิวต์ฉลาก ค่าแอตทริบิวต์จะแสดงเป็นชื่อที่ไม่สามารถเลือกได้และเยื้องในรายการแบบเลื่อนลง (เลือก) หมายเหตุ: optgroups ไม่รองรับการซ้อน
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <select name="จีน"> <optgroup label="เจียงซู"> <option value="nj">หนานจิง</option> <option value="sz">ซูโจว</option> </เลือกกลุ่ม> <optgroup label="เจ้อเจียง"> <option value="hz">หางโจว</option> <option value="wz">เหวิน โจว</option> </เลือกกลุ่ม> </เลือก> |
มีข้อผิดพลาดเล็กน้อยใน IE6.0 (ไม่มีอยู่ใน FireFox): เมื่อใช้ปุ่มลูกศรบนแป้นพิมพ์เพื่อเลือก ใน IE เมื่อรายการที่เลือกถูกเปลี่ยนจากตัวเลือกของ optgroup หนึ่งไปเป็นตัวเลือกของ optgroup อื่น onchange จะไม่ ถูกกระตุ้น วิธีแก้ไขคือ: เพิ่มเหตุการณ์ onkeydown หรือ onkeyup เพื่อช่วยแก้ปัญหา
5. ใช้แท็กปุ่ม
ความหมายและการใช้งาน
กำหนดให้เป็นปุ่มส่ง ภายในองค์ประกอบปุ่ม คุณสามารถวางเนื้อหา เช่น ข้อความหรือรูปภาพได้ นี่คือความแตกต่างระหว่างองค์ประกอบนี้และปุ่มองค์ประกอบอินพุต
<button><img src="images/click.gif" alt="คลิกฉัน!" />คลิกฉัน!</button>
ปุ่มมีฟังก์ชันและเนื้อหาที่สมบูรณ์มากกว่าอินพุต ปุ่มจะแยกข้อความของปุ่ม และคุณสามารถเพิ่มรูปภาพภายในปุ่มได้ ทำให้ข้อความและรูปภาพมีรูปแบบให้เลือกมากขึ้น ทำให้ปุ่มแข็งมีสีสันมากขึ้น
และการใช้แท็กปุ่มจะมีความหมายมากกว่าปุ่มอินพุต และสามารถเข้าใจได้ง่ายจากความหมายที่แท้จริง