การตรวจสอบลูกค้าเป็นหนึ่งในฟังก์ชั่นที่ใช้กันมากที่สุดของโปรแกรมไคลเอนต์เว็บ HTML5 ได้ให้ฟังก์ชั่นการตรวจสอบแบบฟอร์มแก่เราแล้ว สำหรับสาเหตุที่ไม่เป็นที่นิยมมันคาดว่าจะเข้ากันได้และสไตล์นั้นน่าเกลียดเกินไป
ด้านล่างเราจะสร้างการตรวจสอบแบบฟอร์มของ HTML5 และ CSS3 ทีละขั้นตอนโดยใช้ HTML และ CSS เท่านั้น
ต่อไปนี้มีดังนี้:
ขั้นตอนที่ 1: เรียงลำดับฟิลด์การตรวจสอบและพิมพ์ก่อนอื่นเราต้องการฟิลด์ต่อไปนี้:
หลังจากผู้ใช้ป้อนข้อมูลบางอย่างเราต้องตรวจสอบว่าข้อมูลของผู้ใช้ถูกต้องหรือไม่เพื่อหลีกเลี่ยงข้อมูลข้อผิดพลาดและข้อมูลที่ถูกหลอกไปยังเซิร์ฟเวอร์
ในข้อกำหนดใหม่ของ HTML5 กล่องอินพุตให้ความหลากหลายของประเภทอินพุตเช่น: โทรศัพท์, อีเมล, จำนวน, ช่วง, สี ฯลฯ ประเภทเหล่านี้โดยทั่วไปไม่ได้สะท้อนให้เห็นในไคลเอนต์เดสก์ท็อป ตัวอย่างเช่นหมายเลขจะเปลี่ยนเป็นหมายเลขบริสุทธิ์บนแป้นพิมพ์มือถือโดยอัตโนมัติและแป้นพิมพ์อีเมลจะสลับด้วย@คีย์บอร์ดโดยอัตโนมัติ
ขั้นตอนที่ 2: กำหนดรูปแบบสไตล์เราจำเป็นต้องกำหนดรูปแบบสุดท้ายของแบบฟอร์ม ที่นี่ฉันพบรูปแบบรูปแบบในการเลี้ยงลูกเป็นสไตล์การสาธิตในเวลานี้
ขั้นตอนที่ 3: รหัสเทมเพลตใช้รหัสคำสั่ง HTML5 มาตรฐาน
<!ขั้นตอนที่ 4: สร้างแบบฟอร์ม
สร้างองค์ประกอบรูปแบบพื้นฐานที่นี่เราไม่ได้ส่งข้อมูลใด ๆ เป็นเพียงการสาธิตดังนั้นแบบฟอร์มจะไม่ส่ง
<form action = onsubmit = return false> </form>ขั้นตอนที่ 5: สร้างองค์ประกอบ
องค์ประกอบของตารางมีองค์ประกอบองค์ประกอบดังต่อไปนี้:
องค์ประกอบ UL และ LI ใช้สำหรับเค้าโครงการพิมพ์ซึ่งใช้ในการแบ่งองค์ประกอบหน่วยตารางและเลย์เอาต์ ฉลากใช้สำหรับข้อความพรอมต์ฟิลด์ของแบบฟอร์ม อินพุตใช้สำหรับข้อมูลอินพุตของผู้ใช้ ช่วงที่ใช้ในการใช้อิโมจิเพื่อระบุว่าฟิลด์ผู้ใช้เต็มไปอย่างถูกต้องหรือไม่
<ul> <li> <label for = name> ชื่อเต็ม </label> <input type = text id = name name = name placeholder = โปรดป้อนชื่อ/> <span class = icon-name> </span> < /span> </span> li> </ul>
ฟอร์มฟอร์มรหัส HTML รหัสสมบูรณ์มีดังนี้:
ขั้นตอนที่ 6: เพิ่มสไตล์เขียนองค์ประกอบแบบฟอร์มให้สมบูรณ์ปรับปรุงสไตล์ให้แน่นขึ้นทำให้ดูสวยงามยิ่งขึ้น
Body {display: flex;}} {padding: 0 10%; ; สี: Black; Absolute;รหัส CSS กรอกรหัสดังต่อไปนี้:
ขั้นตอนที่ 7: เพิ่มพรอมต์อีโมจิในโครงสร้างแบบฟอร์มแต่ละรูปแบบเราได้เพิ่มแท็ก SPAN เช่นเราเพิ่มฉลาก <span class = icon-name> </span> ในฟิลด์ชื่อ ตอนนี้เพิ่มสไตล์ให้กับสถานะของสนามทดสอบโรงเรียน
Li Span {Display: block;