เมื่อสร้างแบบฟอร์มมันเป็นสิ่งที่หลีกเลี่ยงไม่ได้ที่จะทำการตรวจสอบแบบฟอร์ม นอกจากนี้ยังจำเป็นต้องจัดเตรียมรูปแบบสถานะการตรวจสอบและเอฟเฟกต์เหล่านี้ยังมีอยู่ในกรอบ Bootstrap
1. การเตือน: สถานะเตือน (สีเหลือง)
2. HAS-ERROR: สถานะข้อผิดพลาด (สีแดง)
3 ..has-success: สถานะความสำเร็จ (สีเขียว)
เมื่อใช้งานคุณจะต้องเพิ่มชื่อคลาสสถานะที่สอดคล้องกับคอนเทนเนอร์แบบฟอร์ม
<form role = "form"> <div> <label for = "inputsuccess1"> สถานะความสำเร็จ </label> <อินพุต type = "text" id = "inputsuccess1" placeholder = "สถานะความสำเร็จ"> </div> <div> <label for = "inputwarning1" สำหรับ = "inputerRor1"> สถานะข้อผิดพลาด </label> <อินพุต type = "text" id = "inputerror1" placeholder = "สถานะข้อผิดพลาด"> </div> </diform>
เอฟเฟกต์การทำงานมีดังนี้หรือดูหน้าต่างผลลัพธ์ทางด้านขวา:
หลายครั้งเมื่อตรวจสอบแบบฟอร์มสถานะที่แตกต่างกันจะให้ไอคอนที่แตกต่างกันเช่นความสำเร็จคือเครื่องหมายตรวจสอบ (√) ข้อผิดพลาดคือเครื่องหมายข้าม (×) ฯลฯ เอฟเฟกต์นี้ยังมีอยู่ในกล่อง bootstrap หากคุณต้องการให้แบบฟอร์มแสดงไอคอนในสถานะที่สอดคล้องกันคุณจะต้องเพิ่มชื่อคลาส "Has-Feedback" ในสถานะที่เกี่ยวข้อง โปรดทราบว่าชื่อดังกล่าวจะต้องอยู่กับ "Has-error", "Have Warning" และ "ประสบความสำเร็จ":
<form role = "form"> <div> <label for = "inputSuccess1"> สถานะความสำเร็จ </label> <อินพุต type = "text" id = "inputsuccess1" placeholder = "สถานะความสำเร็จ"> <span> สถานะ "> <span> </span> </div> <div> <label for =" inputerRor1 "> สถานะข้อผิดพลาด </label> <อินพุต type =" text "id =" inputerRor1 "placeholder =" สถานะข้อผิดพลาด "
เอฟเฟกต์การทำงานมีดังนี้หรือดูหน้าต่างผลลัพธ์ทางด้านขวา:
ดังที่เห็นได้จากการเรนเดอร์ไอคอนอยู่ทางขวา ไอคอนขนาดเล็กใน bootstrap ถูกสร้างขึ้นทั้งหมดโดยใช้ @font-face (ส่วนจะถูกนำเสนอในเนื้อหาต่อไปนี้) และคุณต้องเพิ่มองค์ประกอบ Span ลงในแบบฟอร์ม:
<span> </span>
ข้างต้นคือสถานะการควบคุมแบบฟอร์ม (สถานะการตรวจสอบ) ใน bootstrap แนะนำให้คุณทราบโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!