คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML
ด้านบน: ภาษามาร์กอัป - ใบเสนอราคา
ต้นฉบับต้นฉบับบทที่ 5 แบบฟอร์ม
การโต้ตอบเป็นจุดสนใจของอินเทอร์เน็ตเสมอทำให้ผู้ใช้สามารถแลกเปลี่ยนข้อมูลและสื่อสารกันได้ แบบฟอร์มช่วยให้เราสามารถจัดระเบียบและรวบรวมข้อมูลจากผู้ใช้ในลักษณะเดียวกันดังนั้นเมื่อออกแบบเว็บไซต์เรามักจะเป็นหมวดหมู่ที่สามารถใช้ในทุกสถานการณ์ ตัวอย่างเช่นเราพบว่ามีประมาณ 10,000 วิธีในการทำเครื่องหมายแบบฟอร์ม อาจจะไม่มากนัก แต่เรายังคงคิดเกี่ยวกับหลายสถานการณ์ทำให้ผู้ใช้ใช้โครงสร้างแบบฟอร์มได้ง่ายและยังอำนวยความสะดวกในการจัดการโดยเจ้าของเว็บไซต์ วิธีการทำเครื่องหมายฟอร์ม A: ใช้แบบฟอร์ม
<form action =/path/to/method/script = post>
<table>
<tr>
<th> ชื่อ: </th>
<td> <ประเภทอินพุต = ชื่อข้อความ = ชื่อ /> </td>
</tr>
<tr>
<th> อีเมล: </th>
<td> <ประเภทอินพุต = ชื่อข้อความ = อีเมล /> </td>
</tr>
<tr>
<th> & nbsp; </th>
<td> <อินพุตประเภท = ส่งค่า = submit /> </td>
</tr>
</table>
</form>
หลายคนมีรูปแบบที่ทำเครื่องหมายมานานพร้อมโต๊ะ เนื่องจากความถี่สูงของการใช้งานเราจึงคุ้นเคยกับการดูประเภทของแบบฟอร์มด้วยวิธีนี้: คอลัมน์ด้านซ้ายเป็นคำอธิบายข้อความที่อยู่ในแนวขวาและคอลัมน์ด้านขวาเป็นองค์ประกอบรูปแบบที่อยู่ในแนวซ้าย การใช้แบบฟอร์มสองรายง่ายเป็นหนึ่งในวิธีง่ายๆในการจัดเรียงการเรียงลำดับแบบฟอร์มที่ใช้งานง่าย
บางคนคิดว่าไม่จำเป็นต้องมีแบบฟอร์มและบางคนก็คิดว่ารูปแบบควรได้รับการพิจารณาว่าเป็นวัสดุแบบฟอร์ม เราไม่ได้ตั้งใจที่จะสนับสนุนคำแถลงใด ๆ แต่ในบางกรณีวิธีที่ดีที่สุดในการบรรลุเค้าโครงแบบฟอร์ม เฉพาะ เมื่อใช้แบบฟอร์มโดยเฉพาะอย่างยิ่งรูปแบบที่ซับซ้อนที่มีองค์ประกอบต่าง ๆ มากมาย (รูปแบบที่ใช้กล่องวิทยุกล่องดรอปดาวน์ ฯลฯ ) การพึ่งพา CSS ทั้งหมดเพื่อจัดการกับรูปแบบดังกล่าวอาจทำให้หงุดหงิดและมักจะต้องใช้ <span> และ <div> เพิ่มเติมเพื่อใช้แท็กมากกว่าตาราง
จากนั้นดูรูปที่ 5-1 นี่คือเอฟเฟกต์ของวิธีการแสดงเบราว์เซอร์ภาพทั่วไป A:
รูปที่ 5-1: ผลของวิธีการที่แสดงในเบราว์เซอร์
คุณจะพบว่าการใช้ตารางสามารถจัดเรียงองค์ประกอบข้อความได้อย่างเรียบร้อย อย่างไรก็ตามสำหรับรูปแบบที่เรียบง่ายฉันอาจหลีกเลี่ยงการใช้ตารางและใช้วิธีอื่น ๆ ที่ไม่ต้องการป้ายกำกับมากมาย อาจ ไม่ จำเป็นต้องมีการออกแบบภาพของแบบฟอร์มที่ต้องการการเรียงพิมพ์ดังกล่าว ในเวลาเดียวกันเราควรพิจารณาใช้งานง่ายหลายครั้ง เมื่อศึกษาสองวิธีต่อไปนี้เราจะได้รับการติดต่อกับส่วนนี้
<form action =/path/to/method/script = post>
<p>
ชื่อ: <อินพุตประเภท = ชื่อข้อความ = ชื่อ /> <br />
อีเมล: <อินพุตประเภท = ชื่อข้อความ = อีเมล /> <br />
<ประเภทอินพุต = ส่งค่า = ส่ง />
</p>
</form>
การใช้ย่อหน้าเดียวและแท็ก <br /> ไม่กี่ตัวเป็นวิธีที่เป็นไปได้ในการแยกองค์ประกอบทั้งหมด แต่อาจแสดงให้เห็นภาพที่ถูกบีบด้วยสายตา รูปที่ 5-2 เอฟเฟกต์การแสดงผลของเบราว์เซอร์รุ่นที่สิบเอ็ด:
รูปที่ 5-2: ผลของวิธีการแสดงเบราว์เซอร์ b
แม้ว่าเราจะสามารถสร้างเลย์เอาต์ให้สมบูรณ์โดยไม่ต้องใช้ตาราง แต่ก็ดูแออัดและน่าเกลียดเล็กน้อย ในเวลาเดียวกันเรายังพบปัญหาที่สร้างองค์ประกอบไม่สามารถจัดตำแหน่งได้อย่างสมบูรณ์แบบ
เราสามารถเพิ่มแพตช์พิเศษให้กับองค์ประกอบ <put> ด้วย CSS เพื่อบรรเทาความรู้สึกของการเบียดเสียด แบบนี้:
ป้อนข้อมูล{
มาร์จิ้น: 6px 0;
-
ย่อหน้าก่อนหน้านี้เพิ่มแพตช์พิเศษ 6 พิกเซลลงในส่วนบนและล่างของแต่ละองค์ประกอบ <put> (รวมถึงชื่อกล่องอินพุตอีเมลและปุ่มส่ง) และเพิ่มพื้นที่พิเศษระหว่างองค์ประกอบ เช่นเดียวกับรูปที่ 5-3:
รูปที่ 5-3 เอฟเฟกต์ของวิธี B หลังจากเพิ่มแพตช์พิเศษลงในองค์ประกอบอินพุต
วิธี B เองไม่มีปัญหาใหญ่ แต่ก็สามารถปรับแต่งได้อย่างละเอียดเพื่อทำให้แบบฟอร์มดีขึ้น Method C ยังใช้เทคนิคการปรับจูนเหล่านี้ดังนั้นลองมาดูกัน
<form action =/path/to/script id = method ฟอร์ม = post>
<p> <label for = name> ชื่อ: < /label> <br />
<ประเภทอินพุต = ข้อความข้อความ = ชื่อชื่อ = ชื่อ /> </p>
<p> <label for = อีเมล> อีเมล: < /label> <br />
<ประเภทอินพุต = รหัสข้อความ = ชื่ออีเมล = อีเมล /> </p>
<p> <ประเภทอินพุต = ส่งค่า = submit /> </p>
</form>
ฉันชอบหลายสิ่งเกี่ยวกับวิธีการ C ก่อนสำหรับรูปแบบง่าย ๆ คล้ายกับตัวอย่างนี้ฉันพบว่ามันสะดวกกว่าที่จะวางคำอธิบายและองค์ประกอบรูปแบบในย่อหน้าแยกต่างหาก โดยไม่ต้องเพิ่มการแสดงผลสไตล์ระยะห่างที่ตั้งไว้ระหว่างย่อหน้าควรเพียงพอที่จะทำให้คุณอ่านเนื้อหาได้อย่างง่ายดาย ต่อมาเราสามารถตั้งค่าช่วงเวลาโดยใช้ CSS เป็นแท็ก <p> ที่มีอยู่ในรูปแบบ
เรายังก้าวไปอีกขั้นและตั้งค่า id = thisform ที่ไม่ซ้ำกันสำหรับแบบฟอร์ม ดังนั้นช่วงเวลาที่แน่นอนที่ฉันพูดถึงตอนนี้สามารถเขียนได้อย่างคร่าวๆเช่นนี้:
#thisform p {
มาร์จิ้น: 6px 0;
-
ซึ่งหมายถึงการตั้งค่าแพตช์ด้านบนและด้านนอกของแท็ก <p> ในรูปแบบนี้เป็น 6 พิกเซลครอบคลุมค่าที่ตั้งไว้ล่วงหน้าที่เลือกโดยเบราว์เซอร์สำหรับย่อหน้าทั่วไป
ความแตกต่างอีกประการหนึ่งระหว่างวิธี C และสองวิธีแรกคือแม้ว่าแต่ละกลุ่ม (คำสั่งและกล่องอินพุต) จะถูกวางไว้ใน <p> เรายังคงวางไว้ในบรรทัดอิสระ การใช้ <br /> เพื่อแยกแต่ละองค์ประกอบเราสามารถข้ามปัญหาของความยาวข้อความที่แตกต่างกันทำให้ไม่สามารถจัดเรียงรายการอินพุตได้อย่างสมบูรณ์แบบ
รูปที่ 5-4 แสดงผลของวิธีการแสดงเบราว์เซอร์ทั่วไป C ซึ่งรูปแบบที่ตั้งไว้สำหรับแท็ก <p> ถูกใช้
รูปที่ 5-4 เอฟเฟกต์ของวิธีการแสดงเบราว์เซอร์ C โดยใช้ CSS สำหรับ p tag
นอกเหนือจากเอฟเฟกต์ภาพของวิธี C แล้วข้อได้เปรียบที่สำคัญที่สุดคือช่วยปรับปรุงความสะดวกในการใช้งาน
การใช้แท็ก <lable> เพื่อปรับปรุงความสะดวกในการใช้แบบฟอร์มต้องใช้สองขั้นตอนและวิธี C ได้เสร็จสิ้นสองขั้นตอนนี้ ก่อนอื่นให้ใช้ <label> เพื่อเชื่อมต่อคำอธิบายข้อความกับองค์ประกอบฟอร์มที่เกี่ยวข้องไม่ว่าจะเป็นกล่องป้อนข้อความ (ฟิลด์ข้อความ) กล่องป้อนข้อความบล็อก (พื้นที่ข้อความ) กล่องวิทยุ (วิทยุ) ช่องทำเครื่องหมาย (ช่องทำเครื่องหมาย) ฯลฯ เมธอด C ใช้แท็ก <lable>> บนชื่อ: และอีเมล
ขั้นตอนที่สองคือการเพิ่มแอตทริบิวต์สำหรับแท็ก <lable> และกรอกข้อมูลใน ID ของกล่องอินพุตที่เกี่ยวข้อง
ตัวอย่างเช่นในเมธอด C ให้ใช้แท็ก <lable> เพื่อห่อชื่อ: และกรอกข้อมูลสำหรับแอตทริบิวต์สำหรับค่าเดียวกับ ID กล่องอินพุตหลังจากนั้น
<form action =/path/to/script id = method ฟอร์ม = post>
<p> <label for = name> ชื่อ: < /label> <br />
<ประเภทอินพุต = ข้อความข้อความ = ชื่อชื่อ = ชื่อ /> </p>
<p> <label for = อีเมล> อีเมล: < /label> <br />
<ประเภทอินพุต = รหัสข้อความ = ชื่ออีเมล = อีเมล /> </p>
<p> <ประเภทอินพุต = ส่งค่า = submit /> </p>
</form>
บางทีฉันอาจเคยได้ยินคนอื่นบอกว่าคุณควรเพิ่มแท็ก <lable> ในแบบฟอร์ม คำถามที่สำคัญที่สุดคือ เหตุผลที่ คุณควรใช้แท็ก <lable>
มันเป็นสิ่งที่ดีในการสร้างการเชื่อมโยงฉลาก/ID ที่อนุญาตให้ผู้อ่านหน้าจออ่านฉลากที่ถูกต้องสำหรับแต่ละองค์ประกอบแบบฟอร์มโดยไม่มีอิทธิพลของการจัดเรียงเค้าโครง ในเวลาเดียวกันแท็ก <lable> ถูกสร้างขึ้นเพื่อทำเครื่องหมาย ป้ายกำกับบาร์แบบฟอร์ม เมื่อใช้แท็กนี้เรากำลังอธิบายความหมายของแต่ละองค์ประกอบและเสริมสร้างโครงสร้างของรูปแบบ
มีประโยชน์เพิ่มเติมในการใช้แท็ก <lable> เมื่อประมวลผลกล่องเลือกเดียวและกล่องตรวจสอบหลายกล่องนั่นคือเบราว์เซอร์ส่วนใหญ่จะเปลี่ยนค่าขององค์ประกอบเมื่อผู้ใช้คลิกบนข้อความใน <lable> สิ่งนี้สามารถสร้างพื้นที่คลิกขนาดใหญ่ขึ้นสำหรับองค์ประกอบอินพุตทำให้ผู้ใช้ที่มีความสามารถเคลื่อนย้ายได้ง่ายขึ้นในการกรอกแบบฟอร์ม (Mark Pilgrim, ดำดิ่งสู่การเข้าถึง , http://diveintoaccessibility.org/day_28_labeling_form_elements.html)
ตัวอย่างเช่นหากคุณเพิ่มกล่องตรวจสอบหลายแบบลงในแบบฟอร์มเพื่อให้ผู้ใช้สามารถเลือกที่จะเขียนข้อมูลนี้ได้เราสามารถใช้แท็ก <lable> เช่นนี้:
<form action =/path/to/script id = method ฟอร์ม = post>
<p> <label for = name> ชื่อ: < /label> <br />
<ประเภทอินพุต = ข้อความข้อความ = ชื่อชื่อ = ชื่อ /> </p>
<p> <label for = อีเมล> อีเมล: < /label> <br />
<ประเภทอินพุต = รหัสข้อความ = ชื่ออีเมล = อีเมล /> </p>
<p> <อินพุตประเภท = ช่องทำเครื่องหมาย = จดจำชื่อ = จำ /> <label for = remember> จำข้อมูลนี้ได้หรือไม่ </label> </p><p> <ประเภทอินพุต = ส่งค่า = submit /> </p>
</form>
ด้วยการทำเครื่องหมายกล่องตรวจสอบแบบหลายกล่องด้วยวิธีนี้สามารถรับประโยชน์สองประการได้: ตัวอ่านหน้าจอสามารถอ่านข้อความอธิบายที่ถูกต้อง (เช่นตัวอย่างนี้ข้อความสามารถปรากฏขึ้นหลังจากกล่องอินพุต) และช่วงของการสลับกล่องตรวจสอบหลายช่องมีขนาดใหญ่ขึ้น ตอนนี้นอกเหนือจากกล่องตรวจสอบหลายตัวเองแล้วส่วนข้อความก็รวมอยู่ด้วย (เบราว์เซอร์ส่วนใหญ่รองรับ)
รูปที่ 5-5 แสดงเอฟเฟกต์การแสดงผลของแบบฟอร์มนี้ในเบราว์เซอร์ เราระบุช่วงการสลับกล่องหลายช่องหลังจากขยาย:
รูปที่ 5-5 กล่องเลือกหลายกล่องที่มีข้อความในช่วงการสลับ
นอกเหนือจากรูปแบบและย่อหน้าแล้วฉันยังต้องการแสดงวิธีอื่นในการทำเครื่องหมายแบบฟอร์มโดยใช้รายการนิยาม
หน้าก่อนหน้า 1 2 3 4 หน้าถัดไปอ่านข้อความเต็ม