ภาษามาร์กอัป HTML - แบบฟอร์ม

คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน 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: ผลของวิธีการที่แสดงในเบราว์เซอร์

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

วิธี B: ไม่จำเป็นต้องใช้ตารางเพียงแค่บีบเข้าด้วยกัน

<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 ยังใช้เทคนิคการปรับจูนเหล่านี้ดังนั้นลองมาดูกัน

วิธี 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 แล้วข้อได้เปรียบที่สำคัญที่สุดคือช่วยปรับปรุงความสะดวกในการใช้งาน

<label> แท็ก

การใช้แท็ก <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> ในแบบฟอร์ม คำถามที่สำคัญที่สุดคือ เหตุผลที่ คุณควรใช้แท็ก <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 หน้าถัดไปอ่านข้อความเต็ม