หน้าเข้าสู่ระบบบทสอน HTML5 พร้อมกับฟอร์ม HTML5

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

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

• การสาธิต
• แหล่งดาวน์โหลด

อินพุต HTML5

ลองดูที่มาร์กอัปต่อไปนี้.

 
 
 
 
อีเมล์ 
 
รหัสผ่าน 
 
 
 
 
 
 

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

ตัวยึด

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

คุณสมบัติที่จำเป็น

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

ตัวเลือกใหม่ได้รับการแนะนำใน CSS3, จำเป็น เพื่อกำหนดเป้าหมายเขตข้อมูลด้วย จำเป็นต้องใช้ คุณลักษณะ นี่คือตัวอย่าง;

 อินพุต: ต้องการ border: 1px solid red;  

ประเภทอินพุตอีเมล

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

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

ข้อเสีย

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

ตัวยึด คุณลักษณะ, ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยเท่านั้น - Firefox 3.7+, Safari 4+, Chrome 4+ และ Opera 11+. ดังนั้นหากคุณต้องการใช้งานกับเบราว์เซอร์ที่ไม่รองรับคุณสามารถใช้ polyfills นี้ร่วมกับ Modernizr.

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

ดังนั้นการใช้จาวาสคริปต์ในการตรวจสอบความถูกต้องของฟิลด์ที่ต้องการคือตัวเลือกที่ดีกว่า.

 ฟังก์ชัน validateForm () var x = document.forms ["เข้าสู่ระบบ"] ["ชื่อผู้ใช้"]. value; if (x == null || x == "") alert ("กรุณากรอกชื่อผู้ใช้"); กลับเท็จ  

จัดแต่งทรงผมในแบบฟอร์ม

เอาล่ะตอนนี้เรามาตกแต่งแบบฟอร์มเข้าสู่ระบบด้วย CSS ก่อนอื่นเราจะให้พื้นหลังเป็นลวดลายไม้ใน HTML แท็ก.

 html background: url ('wood_pattern.png'); ขนาดตัวอักษร: 10pt;  

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

 .ชื่อเข้าสู่ระบบ ul padding: 0; กำไรขั้นต้น: 0;  .loginform li display: inline; ลอย: ซ้าย;  

ตั้งแต่เราลอยตัว ลี้, ผู้ปกครองจะล่มสลายดังนั้นเราต้องล้างสิ่งต่าง ๆ รอบตัวผู้ปกครองด้วยการแฮก clearfix.

 ป้ายกำกับ display: block; สี: # 999;  .cf: before, .cf: after content: ""; แสดง: ตาราง;  .cf: หลังจาก ชัดเจน: ทั้งคู่  .cf * ซูม: 1; : โฟกัส โครงร่าง: 0;  

ใน CSS3 เรามีตัวเลือกการปฏิเสธ ดังนั้นเราจะใช้มันเพื่อกำหนดเป้าหมาย ปัจจัยการผลิต นอกเหนือจาก เสนอ ประเภทซึ่งในกรณีนี้ จะกำหนดเป้าหมายป้อนอีเมลและรหัสผ่าน;

 .ข้อมูลเข้าสู่ระบบ: ไม่ ([ประเภท = ส่ง]) padding: 5px; ระยะขอบขวา: 10px; เส้นขอบ: 1px solid rgba (0, 0, 0, 0.3); รัศมี - ชายแดน: 3px; box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);  

สุดท้ายเราจะให้การตกแต่งสไตล์เล็กน้อยสำหรับ เสนอ ปุ่มดังต่อไปนี้.

 .อินพุตของฟอร์มล็อกอิน [ประเภท = ส่ง] border: 1px solid rgba (0, 0, 0, 0.3); พื้นหลัง: # 64c8ef; / * เบราว์เซอร์เก่า * / พื้นหลัง: -moz-linear-gradient (บนสุด, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / background: -webkit-gradient (เป็นเส้นตรง, ด้านบนซ้าย, ล่างซ้าย, color-stop (0%, # 64c8ef), color-stop (100%, # 00a2e2); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (ด้านบน, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (ด้านบน, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (บนสุด, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / background: linear-gradient (จากล่างสุด, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; การขยาย: 5px 15px; ระยะขอบขวา: 0; margin-top: 15px; รัศมี - ชายแดน: 3px; ข้อความเงา: 1px 1px 0px rgba (0, 0, 0, 0.3);  

เพียงเท่านี้คุณสามารถลองแบบฟอร์มเข้าสู่ระบบได้จากลิงค์ต่อไปนี้.

• การสาธิต
• แหล่งดาวน์โหลด

คำพูดสุดท้าย

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

ในการโพสต์ถัดไปเราจะตรวจสอบคุณลักษณะใหม่ของฟอร์ม HTML5 ดังนั้นโปรดติดตาม.