วิธีการออกแบบช่องทำเครื่องหมายใน CSS กำหนดสไตล์ช่องทำเครื่องหมายและปุ่มตัวเลือกด้วยแบบฟอร์มช่องทำเครื่องหมาย CSS3 Html

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

สาธิต

ช่องทำเครื่องหมายใน HTML

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

หนึ่ง

สอง

สาม

สี่

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

CSS สำหรับช่องทำเครื่องหมาย

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

คอนเทนเนอร์ (
จอแสดงผล: บล็อก;
ผู้ใช้เลือก: ไม่มี;
}

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

อินพุตคอนเทนเนอร์ (
ความทึบ: 0;
ความสูง: 0;
ความกว้าง: 0;
}

เราสร้างช่องทำเครื่องหมายที่กำหนดเอง เปลี่ยนขนาดและสีของพื้นหลัง

เครื่องหมายถูก (
ส่วนสูง: 23px;
ความกว้าง: 22px;
สีพื้นหลัง: #eec321;
}

เมื่อคุณวางเคอร์เซอร์ ให้ทำให้สีพื้นหลังเข้มขึ้นเล็กน้อย

คอนเทนเนอร์:อินพุตโฮเวอร์ ~ .เครื่องหมายถูก (
สีพื้นหลัง: #ccc678;
}

สำหรับช่องทำเครื่องหมายที่ทำเครื่องหมายไว้ ให้ตั้งค่าสีอื่นสำหรับพื้นหลัง

อินพุตคอนเทนเนอร์:ทำเครื่องหมายแล้ว ~ .เครื่องหมายถูก (
สีพื้นหลัง: #2196f3;
}

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

เครื่องหมายถูก:หลัง (
เนื้อหา: "";
ตำแหน่ง: แน่นอน;
จอแสดงผล: ไม่มี;
}

เราทำให้เครื่องหมายถูกมองเห็นได้เฉพาะกับช่องทำเครื่องหมายที่เลือกเท่านั้น

อินพุตคอนเทนเนอร์:ตรวจสอบแล้ว ~ .เครื่องหมายถูก:หลัง (
จอแสดงผล: บล็อก;
}

วาดและจัดรูปแบบเครื่องหมายถูก เราวาดเครื่องหมายถูกลงในช่องว่าง ซีเอสเอส. ลองวาดรูปสี่เหลี่ยมผืนผ้าที่มีกรอบสีขาว ทั้งสองด้านของสี่เหลี่ยมผืนผ้าไม่มีกรอบ (ความกว้างเป็นศูนย์) เราจะได้มุมสี่เหลี่ยม หมุนไป 45 องศา แล้วเราจะได้เครื่องหมายถูก

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

ปุ่มวิทยุ - ประเภทวิทยุ

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

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

มาเพิ่มป้ายกำกับกัน ฉลากกับคำตอบ” ใช่» เพื่อให้บุคคลคลิกที่ฉลากแล้วปุ่มจะเปิดใช้งานโดยอัตโนมัติ

ใช่

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

ใช่ เลขที่

นี่คือวิธีที่คุณสามารถส่งค่า = ตัวเลือกของคำตอบอย่างใดอย่างหนึ่งไปยังตัวจัดการ

เรามาเพิ่มคำถามหลังย่อหน้าเปิด ลองถามคนดูว่าเขาชอบประหยัดเวลาไหม?

คุณชอบที่จะประหยัดเวลาหรือไม่?

ใช่ เลขที่

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

คุณชอบที่จะประหยัดเวลาหรือไม่?

ใช่ ตรวจสอบแล้ว> เลขที่

และนี่คือผลลัพธ์สุดท้าย

ช่องทำเครื่องหมาย - ประเภทช่องทำเครื่องหมาย

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

ไดอารี่

หากคุณตรวจสอบโค้ดของเราในเบราว์เซอร์ มันจะมีลักษณะดังนี้:

ในทำนองเดียวกัน เราจะสร้างช่องทำเครื่องหมายเพิ่มเติมสองช่อง: เวลาและความสำเร็จของเราเอง

คุณใช้เครื่องมือประหยัดเวลาอะไร?

ไดอารี่ เวลา ความสำเร็จของเราเอง

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

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

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

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

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

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

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

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

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

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

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

เลือกอาคารที่จะเยี่ยมชม
อาคารโอ๊ก
บราวน์ฮอลล์
คาร์เนกี้คอมเพล็กซ์
เดรค คอมมอนส์
บ้านเอลเลียต

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

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

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

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

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

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

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

ตอนนี้คุณเพียงแค่ต้องเรียกใช้ฟังก์ชัน IsChecked(chkboxname,value) ตัวอย่างเช่น:

If(IsChecked("formDoor","A")) ( //ทำ ... )

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

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

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

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

เพื่อให้ทุกอย่างได้ผล สิ่งสำคัญคือต้องพิจารณาสิ่งต่อไปนี้:

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

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

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

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

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

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

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

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

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

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

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

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

รหัส HTMLในกรณีนี้จะเป็นดังนี้:

ฉันเปลี่ยนช่องทำเครื่องหมาย

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

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

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

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

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

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

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

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

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

ตัวอย่าง

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

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

เครื่องหมายถูกปกติ

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

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

ในการสร้างเว็บไซต์

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

ช่องทำเครื่องหมายถูกสร้างขึ้นอย่างไร? HTML มีองค์ประกอบพิเศษ (แท็ก) ซึ่งเป็นฟิลด์ที่มีประเภทช่องทำเครื่องหมายซึ่งเขียนดังนี้: .

หลักการทำงาน

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

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

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

ช่องทำเครื่องหมายขึ้นอยู่กับ

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

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

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

ใช้ในตาราง

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

มีโปรแกรมอะไรอีกบ้างที่ใช้องค์ประกอบนี้? Excel - ทุกคนรู้จักโปรแกรมสเปรดชีตนี้จาก Microsoft ซึ่งมักเป็นหลักการของการทำงานของช่องทำเครื่องหมาย: หากเลือกช่องทำเครื่องหมายองค์ประกอบจะส่งกลับค่าจริงหากไม่ได้เลือกก็จะส่งกลับค่าเท็จ หากต้องการแทรกช่องทำเครื่องหมายลงในเอกสาร คุณต้องเปิดใช้งานแท็บพิเศษสำหรับนักพัฒนา ทำได้ผ่านพารามิเตอร์ที่แตกต่างกันเล็กน้อยใน Excel แต่ละเวอร์ชัน

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

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

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

บทสรุป

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