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

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

กล่าวอีกนัยหนึ่งในเบราว์เซอร์สมัยใหม่ช่องทำเครื่องหมายและปุ่มตัวเลือกจะดูสวยงามตามการออกแบบที่ตั้งใจไว้ แต่ในรุ่นเก่า (สิ่งนี้ใช้กับ Internet Explorer เวอร์ชัน 8 และต่ำกว่า) จะยังคงอยู่ในการออกแบบ "เริ่มต้น" เฉพาะสำหรับระบบปฏิบัติการแต่ละระบบ

นอกจากนี้, รักษาความสามารถในการตรวจสอบ HTML5องค์ประกอบที่มีสไตล์ (ซึ่งอาจไม่เป็นเช่นนั้นเมื่อใช้ปลั๊กอิน JavaScript) ในเบราว์เซอร์สมัยใหม่ การสนับสนุนเป็นบรรทัดฐานมานานแล้ว

คุณสมบัติที่สำคัญ

เพื่อที่จะประสบความสำเร็จ สิ่งสำคัญคือต้องพิจารณาสิ่งต่อไปนี้:

1. ยกเว้นแต่ที่จริงแท็ก element เองที่เราอยากได้สไตล์สวยๆ ( หรือ ) คุณต้องมีแท็ก ต้องขอบคุณการที่คุณสามารถเปลี่ยนองค์ประกอบโดยคลิกที่ข้อความ ไม่ใช่แค่บนองค์ประกอบเอง
2. แท็ก ต้องอยู่ก่อนแท็ก (ในกรณีนี้ สถานะขององค์ประกอบแบบฟอร์มถูกสลับโดยใช้แอตทริบิวต์ for) หรือต้องอยู่ภายใน tag (ในกรณีนี้ ไม่จำเป็นต้องใช้แอตทริบิวต์ for แต่จำเป็นต้องมีแท็ก wrapper สำหรับข้อความ)

เคล็ดลับคือการใช้ :checked และ :not pseudo-selectors ในเวลาเดียวกัน ช่องทำเครื่องหมายหรือปุ่มตัวเลือกเองจะมองไม่เห็น และการจำลองจะดำเนินการโดยใช้องค์ประกอบหลอก: before และ: after สำหรับแท็ก หรือแท็กกระดาษห่อดังกล่าว

จัดแต่งทรงผมสำหรับเบราว์เซอร์สมัยใหม่

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

ช่องทำเครื่องหมายและแท็กปุ่มตัวเลือกจะอยู่หน้าแท็ก

ในโค้ด HTMLดูเหมือนว่านี้:

ฉันสลับช่องทำเครื่องหมาย และฉันเปลี่ยนปุ่มตัวเลือก

ฉันต้องการดึงความสนใจของคุณอีกครั้ง - tag อย่างจำเป็นควรจะตั้งอยู่ ก่อนแท็ก . หากคุณสลับพวกมันจะไม่มีอะไรทำงาน

โค้ด CSS สำหรับช่องทำเครื่องหมายจะเป็นดังนี้:

ช่องกาเครื่องหมาย ( ตำแหน่ง: สัมบูรณ์; ดัชนี z: -1; ความทึบ: 0; ระยะขอบ: 10px 0 0 20px; ) . ช่องทำเครื่องหมาย + ป้ายกำกับ ( ตำแหน่ง: สัมพัทธ์; ช่องว่างภายใน: 0 0 0 60px; เคอร์เซอร์: ตัวชี้; ) . ช่องทำเครื่องหมาย + ป้ายกำกับ :before ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บนสุด: -4px; ซ้าย: 0; ความกว้าง: 50px; ความสูง: 26px; border-radius: 13px; พื้นหลัง: #CDD1DA; box-shadow: inset 0 2px 3px rgba( 0,0,0,.2); การเปลี่ยนแปลง: .2s; ) .checkbox + label:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บนสุด: -2px; ซ้าย: 2px; ความกว้าง: 22px; ความสูง: 22px; เส้นขอบ -รัศมี: 10px พื้นหลัง: #FFF กล่องเงา: 0 2px 5px rgba(0,0,0,.3); การเปลี่ยนแปลง: .2s; ) .checkbox:checked + label:before ( พื้นหลัง: #9FD468; ) .checkbox:checked + label:after ( ซ้าย: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255) ,0,.7); )

โค้ด CSS สำหรับปุ่มตัวเลือกจะเป็นดังนี้:

วิทยุ ( ตำแหน่ง: สัมบูรณ์; ดัชนี z: -1; ความทึบ: 0; ระยะขอบ: 10px 0 0 7px; ) .วิทยุ + ป้ายกำกับ ( ตำแหน่ง: สัมพัทธ์; ช่องว่างภายใน: 0 0 0 35px; เคอร์เซอร์: ตัวชี้; ) .radio + ป้ายกำกับ :before ( content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; ) radio + label:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บนสุด: 1px; ซ้าย: 4px; ความกว้าง: 16px; ความสูง: 16px; border-radius: 50%; พื้นหลัง: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; ) .radio:checked + label:after ( ความทึบ: 1; ) .radio:focus + label:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )

ด้วยคุณสมบัติ position , z-index และความทึบของคลาส .checkbox และ .radio เรามองเห็นองค์ประกอบดั้งเดิมโดยมองเห็นได้ในขณะที่เก็บไว้ในที่เดียวกันกับองค์ประกอบที่มีสไตล์ และด้วยความช่วยเหลือของระยะขอบ เราปรับเปลี่ยนเล็กน้อยเพื่อให้ข้อความตรวจสอบความถูกต้องของ HTML5 ดูกลมกลืนกัน ขึ้นอยู่กับการออกแบบของช่องทำเครื่องหมายและปุ่มตัวเลือก การเยื้องนี้สามารถปรับได้

ช่องทำเครื่องหมายและแท็กปุ่มตัวเลือกอยู่ภายในแท็ก

โค้ด HTMLในกรณีนี้จะเป็น:

และฉันเปลี่ยนปุ่มตัวเลือก

โดยเปรียบเทียบกับเวอร์ชันก่อนหน้า - แท็ก อย่างจำเป็นควรจะตั้งอยู่ ก่อนแท็กที่มีคลาส .checkbox__text และ .radio__text

โค้ด CSS สำหรับช่องทำเครื่องหมายจะเป็นดังนี้:

อินพุตช่องทำเครื่องหมาย ( ตำแหน่ง: สัมบูรณ์; ดัชนี z: -1; ความทึบ: 0; ระยะขอบ: 10px 0 0 20px; ) .checkbox__text ( ตำแหน่ง: สัมพัทธ์; ช่องว่างภายใน: 0 0 0 60px; เคอร์เซอร์: ตัวชี้; ) .checkbox__text: ก่อน ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บนสุด: -4px; ซ้าย: 0; ความกว้าง: 50px; ความสูง: 26px; รัศมีเส้นขอบ: 13px; พื้นหลัง: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0 ,0,.2); การเปลี่ยนแปลง: .2s; ) .checkbox__text:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บนสุด: -2px; ซ้าย: 2px; ความกว้าง: 22px; ความสูง: 22px; รัศมีเส้นขอบ: 10px; พื้นหลัง: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); การเปลี่ยนแปลง: .2s; ) :checked + .checkbox__text:after ( left: 26px; ) .checkbox input:focus + checkbox__text:before ( กล่องเงา: สิ่งที่ใส่เข้าไป 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255.255.0.7); )

โค้ด CSS สำหรับปุ่มตัวเลือกจะเป็นดังนี้:

อินพุตวิทยุ ( ตำแหน่ง: สัมบูรณ์; ดัชนี z: -1; ความทึบ: 0; ระยะขอบ: 10px 0 0 7px; ) .radio__text ( ตำแหน่ง: สัมพัทธ์; ช่องว่างภายใน: 0 0 0 35px; เคอร์เซอร์: ตัวชี้; ) .radio__text: ก่อน ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บนสุด: -3px; ซ้าย: 0; ความกว้าง: 22px; ความสูง: 22px; เส้นขอบ: 1px ทึบ #CDD1DA; รัศมีเส้นขอบ: 50%; พื้นหลัง: #FFF; ) .radio_text:after (เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บนสุด: 1px; ซ้าย: 4px; ความกว้าง: 16px; ความสูง: 16px; รัศมีเส้นขอบ: 50%; พื้นหลัง: #9FD468; กล่องเงา: สิ่งที่ใส่เข้าไป 0 1px 1px 1px rgba (0, 0,0,.5); ความทึบ: 0; การเปลี่ยนแปลง: .2s; ) อินพุตวิทยุ: ตรวจสอบ + .radio__text: หลัง ( ความทึบ: 1; ) อินพุตวิทยุ: โฟกัส + .radio__text: ก่อน ( กล่องเงา: 0 0 0 3px rgba(255,255,0,.7); )

สไตล์ที่นี่เหมือนกับในวิธีการก่อนหน้านี้ แต่จะใช้กับตัวเลือกอื่นๆ เท่านั้น

จัดแต่งทรงผมสำหรับเบราว์เซอร์รุ่นเก่า

โค้ด CSS สำหรับช่องทำเครื่องหมาย. ในความคิดเห็นของโค้ด ฉันได้เพิ่มคำอธิบายเกี่ยวกับเบราว์เซอร์:

/* กำหนดรูปแบบแรกสำหรับ IE8 และเวอร์ชันเก่ากว่า เช่น ที่นี่เราเป็นช่องทำเครื่องหมายมาตรฐานที่น่ายกย่องเล็กน้อย */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* ใช้สำหรับเบราว์เซอร์ทั้งหมด ยกเว้นเบราว์เซอร์รุ่นเก่าที่ไม่รองรับตัวเลือกบวก เราแสดงว่าฉลากสามารถคลิกได้ */ .checkbox + label ( เคอร์เซอร์: ตัวชี้; ) /* ถัดไปเป็นการกำหนดสไตล์ของช่องทำเครื่องหมายในเบราว์เซอร์รุ่นใหม่ เช่นเดียวกับ IE9 ขึ้นไป เนื่องจากเบราว์เซอร์รุ่นเก่าไม่รองรับตัวเลือก :not และ :checked สไตล์ต่อไปนี้ทั้งหมดจะไม่ทำงาน ในกรณีนี้ การตรวจสอบจะถูกระบุโดยไม่มีเครื่องหมายทวิภาคด้านหน้า ด้วยเหตุผลบางประการจึงเป็นเช่นนั้น */ .checkbox:not(checked) ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; ) .checkbox:not(checked) + label ( ตำแหน่ง: สัมพันธ์; ช่องว่างภายใน: 0 0 0 60px; ) .checkbox:not(checked) + label:before ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ด้านบน: -4px; ซ้าย: 0; ความกว้าง: 50px; ความสูง: 26px; รัศมีเส้นขอบ: 13px; พื้นหลัง : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); การเปลี่ยนแปลง: .2s; ) .checkbox:not(checked) + label:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์ ด้านบน: -2px ซ้าย: 2px ความกว้าง: 22px ความสูง: 22px รัศมีเส้นขอบ: 10px พื้นหลัง: #FFF กล่องเงา: 0 2px 5px rgba(0,0,0,.3); การเปลี่ยนแปลง: .2s; ) .checkbox:checked + label:before ( พื้นหลัง: #9FD468; ) .checkbox:checked + label:after ( ซ้าย: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); )

โค้ด CSS สำหรับปุ่มตัวเลือก:

วิทยุ ( Vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) .radio + label ( เคอร์เซอร์: ตัวชี้; ) .radio:not(checked) ( position: absolute; z-index: -1; ความทึบ: 0; ระยะขอบ: 10px 0 0 7px; ) .radio:not(checked) + label ( ตำแหน่ง: สัมพันธ์; padding: 0 0 0 35px; ) .radio:not(checked) + label:before ( เนื้อหา : ""; ตำแหน่ง: สัมบูรณ์; บนสุด: -3px; ซ้าย: 0; ความกว้าง: 22px; ความสูง: 22px; border: 1px solid #CDD1DA; border-radius: 50%; พื้นหลัง: #FFF; ) .radio:not( ตรวจสอบแล้ว) + label:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; บนสุด: 1px; ซ้าย: 4px; ความกว้าง: 16px; ความสูง: 16px; รัศมีเส้นขอบ: 50%; พื้นหลัง: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; ) .radio:checked + label:after ( ความทึบ: 1; ) .radio:focus + label:before ( box-shadow : 0 0 0 3px rgba(255,255,0,.7); )

ตัวอย่าง

นี่คือวิธีการทำในวิธีที่ง่าย ด้วยวิธีนี้ คุณจะกำหนดรูปแบบช่องทำเครื่องหมายและปุ่มตัวเลือกโดยใช้ CSS ได้ตามต้องการ

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

มาร์กอัปเริ่มต้น

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

ตัวเลือก 1 ทางเลือก2 ตัวเลือก 3

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

เราลบอินพุต จัดเรียง span

ดังนั้น ตอนนี้ เราต้องซ่อนช่องทำเครื่องหมายปกติจากหน้า

ป้อนข้อมูล (
แสดง:ไม่มี;
}

ตอนนี้เราจำเป็นต้องจัดเรียงฟิลด์ใหม่ เราจะจัดรูปแบบองค์ประกอบช่วงเนื่องจากอยู่ภายในป้ายกำกับ

อินพุต + ช่วงป้ายกำกับ (
จอแสดงผล:อินไลน์บล็อก;
ความกว้าง:40px;
ระยะขอบขวา: 10px;
ความสูง:40px;
แนวตั้งจัด:กลาง;
เส้นขอบ: สีเขียวทึบ 5px;
เคอร์เซอร์:ตัวชี้;
รัศมีเส้นขอบ: 5px
}

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

ทำทุกอย่างให้สำเร็จ

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

อินพุต: ตรวจสอบ + ช่วงป้ายกำกับ (
พื้นหลัง:url(btn.png) ไม่ซ้ำ;
}

ทุกอย่างทำงานได้แล้ว! ลองคลิกแล้วคุณจะเห็นเครื่องหมายถูกปรากฏขึ้นเมื่อคุณเลือก รูปภาพของฉันอยู่ในโฟลเดอร์เดียวกับไฟล์ css และถูกเรียกว่า btn.png ดังนั้นจึงเป็นรายการ

แล้ว magic input:checked + label span selector ของเราทำอะไร? โดยพื้นฐานแล้ว มันบอกเบราว์เซอร์ดังต่อไปนี้: เมื่อมีการทำเครื่องหมายที่ช่องทำเครื่องหมายใด ๆ ให้ใช้ภาพพื้นหลังกับช่วงในป้ายกำกับ เพียงเท่านี้ ทุกอย่างก็เรียบง่าย เราทำโดยไม่มีสคริปต์ ทำให้ช่องกาเครื่องหมายที่สวยงามบน pure css เขียนความคิดเห็นหากมีบางอย่างไม่ชัดเจน

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

ช่องทำเครื่องหมายในรูปแบบ HTML หรือ "ช่องทำเครื่องหมาย" ถูกกำหนดโดย tag ป้อนข้อมูลซึ่งมีประเภท ช่องทำเครื่องหมาย.

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

หากจำเป็นต้องแสดงช่องทำเครื่องหมายโดยค่าเริ่มต้น คุณจะต้องเพิ่มแอตทริบิวต์ลงในแท็ก ตรวจสอบแล้ว. มันจะมีลักษณะดังนี้:

และนี่คือลักษณะที่ช่องทำเครื่องหมายในเบราว์เซอร์:

การมีอยู่ของช่องทำเครื่องหมายไม่ได้หมายความว่าจะต้องเลือกองค์ประกอบเดียวจากองค์ประกอบที่มีอยู่ ในเรื่องนี้หากมีช่องทำเครื่องหมายหลายช่องในรูปแบบเดียวก็ควรตั้งชื่อต่างกัน

รหัสสำหรับแบบฟอร์มที่ให้ไว้ตอนต้นของบทความจะเป็นดังนี้:

อาหารเช้า
อาหารเย็น
อาหารเย็น

สำหรับชื่อในสภาพแวดล้อมแบบมืออาชีพฟิลด์นี้เรียกว่า "ช่องทำเครื่องหมาย"

ด้วย CSS3 เราจึงสามารถบรรลุผลเกือบทุกอย่างที่เราต้องการบนหน้าจอ ในบทช่วยสอนนี้ เราจะมาดูวิธีที่เราสามารถจัดรูปแบบช่องกาเครื่องหมายและปุ่มตัวเลือก

Input:checked + label:before ( เนื้อหา: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; )

เมื่อเรากดปุ่มตัวเลือก วงกลมสีขาวขนาดเล็กควรปรากฏในวงกลมสีเทาหลัก

กล่องกาเครื่องหมายจัดแต่งทรงผม

ตอนนี้ ไปที่การกำหนดสไตล์ช่องกาเครื่องหมาย ขั้นแรก ให้ซ่อนองค์ประกอบอีกครั้ง:

อินพุต (แสดง: ไม่มี; )

เนื่องจากเรากำลังลบการแสดงช่องทำเครื่องหมายเริ่มต้นที่มี :before pseudo-element เราจะเพิ่มเส้นขอบ:

ช่องทำเครื่องหมาย label:before ( border-radius: 3px; )

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

Input:checked + label:before ( เนื้อหา: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center ; ความสูงของบรรทัด: 15px; )

ในที่สุดนี่คือสิ่งที่เราควรได้รับ:

ผลลัพธ์

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

คู่มือนี้จะแนะนำคุณให้รู้จักกับ ช่องทำเครื่องหมาย HTML และสอนวิธีจัดการกับมันใน PHP.

แบบฟอร์มช่องทำเครื่องหมายเดียว

มาสร้างแบบฟอร์มง่ายๆ ด้วยช่องกาเครื่องหมายช่องเดียว

คุณต้องการอินเทอร์เน็ตหรือไม่?

ในสคริปต์ PHP (ช่องทำเครื่องหมายไฟล์-form.php) คุณสามารถอ่านค่าของฟิลด์โดยใช้อาร์เรย์ $_POST หาก $_POST["formWheelchair"] ถูกตั้งค่าเป็น YES แสดงว่าช่องทำเครื่องหมายถูกเลือกแล้ว หากไม่ได้เลือกช่องทำเครื่องหมาย จะไม่มีการตั้งค่าตัวแปร $_POST["formWheelchair"]

นี่คือตัวอย่างการประมวลผลแบบฟอร์มใน PHP:

ตัวแปร $_POST["formWheelchair"] ถูกตั้งค่าเป็น YES เนื่องจากแอตทริบิวต์ value ของแท็กอินพุตคือ "YES"

แอตทริบิวต์ค่าสามารถตั้งค่าเป็น 1 แทน YES ได้ อย่าลืมอัปเดตโค้ด PHP ของคุณตามลำดับ

กลุ่มช่องทำเครื่องหมาย

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

มาสร้างแบบฟอร์มที่จะให้ผู้ใช้มีตัวเลือกมากมาย

เลือกอาคารที่คุณต้องการเยี่ยมชม
อาคารโอ๊ก
ห้องโถงสีน้ำตาล
คาร์เนกี้ คอมเพล็กซ์
Drake Commons
บ้านเอลเลียต

โปรดทราบว่าช่องทำเครื่องหมายทั้งหมดมีชื่อเดียวกัน (formDoor) ชื่อหนึ่งระบุว่าช่องทำเครื่องหมายทั้งหมดเกี่ยวข้องกัน วงเล็บเหลี่ยมระบุว่าค่าทั้งหมดจะพร้อมใช้งานจากอาร์เรย์เดียวกัน นั่นคือ $_POST["formDoor"] จะไม่ส่งคืนสตริง ดังในตัวอย่างข้างต้น แต่จะคืนค่าอาร์เรย์ที่มีค่าของช่องทำเครื่องหมายที่ผู้ใช้เลือกแทน

ตัวอย่างเช่น ถ้าฉันเลือกช่องทำเครื่องหมายทั้งหมด $_POST["formDoor"] จะคืนค่าอาร์เรย์ของ (A,B,C,D,E) ในตัวอย่างด้านล่าง เราได้รับและแสดงค่าทั้งหมดในอาร์เรย์

ฟังก์ชันว่างมีประโยชน์ในกรณีที่ผู้ใช้ไม่ได้เลือกอะไร หากอาร์เรย์ไม่ว่างเปล่า เราจะนับจำนวนช่องทำเครื่องหมายที่เลือกโดยใช้ฟังก์ชันการนับและส่งออกค่าทั้งหมดโดยใช้ลูป for

หากเลือกช่องทำเครื่องหมาย "Acorn Building" อาร์เรย์จะมีค่า "A"

ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายเฉพาะหรือไม่

บ่อยครั้งคุณต้องการตรวจสอบว่าได้เลือกช่องทำเครื่องหมายใดไว้หรือไม่ คุณสามารถใช้ฟังก์ชันต่อไปนี้สำหรับสิ่งนี้:

ฟังก์ชัน IsChecked($chkname,$value) ( ​​​​if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] เป็น $chkval) ( if($chkval == $value) ( ​​​​คืนค่าจริง; ) ) ) คืนค่าเท็จ; )

ตอนนี้ก็เพียงพอแล้วที่จะเรียกใช้ฟังก์ชัน IsChecked(chkboxname, value) ตัวอย่างเช่น:

If(IsChecked("formDoor","A")) ( //do ... )