สร้างรูปแบบเว็บรุ่นต่อไปด้วย HTML5

HTML5 เริ่มต้นโดย WHATWG (Web Hypertext Application Technology Working Working) ชื่อเริ่มต้นคือเว็บแอปพลิเคชัน 1.0 มาตรฐานนี้ดูดซับมาตรฐานเว็บ 2.0 และได้รับการรับรองจากองค์กร W3C เพื่อรวมเข้ากับมาตรฐาน HTML5 รุ่นต่อไป

คำนำ

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

แบบฟอร์มเป็นตัวควบคุมทั่วไป (ชุด) ในหน้าเว็บ จากการลงทะเบียนเว็บไซต์และเข้าสู่ระบบไปจนถึงระบบการจัดการข้อมูลองค์กรมีรูปแบบโดยทั่วไป เหตุผลที่รูปแบบมีความสำคัญเป็นหลักเพราะพวกเขารับผิดชอบงานอัปเดตและโต้ตอบกับผู้ใช้จำนวนมากและข้อมูลพื้นหลังเว็บ นักพัฒนาเว็บสามารถกล่าวได้ว่ารักและเกลียดฟอร์มเว็บ พวกเขาชอบฟังก์ชั่นที่สะดวกในการรวบรวมและจัดระเบียบข้อมูลและพวกเขาเกลียดการทำงานของพวกเขาในระดับใหญ่ ฟังก์ชั่นบางอย่างที่ดูเหมือนเป็นเรื่องธรรมดาในผู้ใช้เว็บไซต์ขั้นสุดท้ายเช่นการตรวจสอบประเภทอินพุตการตรวจสอบแบบฟอร์มการแจ้งข้อผิดพลาด ฯลฯ นักพัฒนาทั้งหมดจำเป็นต้องใช้ความพยายามอย่างมากในการใช้ JavaScript และการเขียนโปรแกรม DOM เพื่อตอบสนองจุดฟังก์ชั่นที่จำเป็นตามธรรมชาติเหล่านี้ ด้วยความนิยมของ AJAX ห้องสมุดเครื่องมือ JavaScript บางแห่งเช่น Dojo, Yui ฯลฯ ได้จัดหาวิดเจ็ต JavaScript หรือ API ที่สะดวกสบายเพื่อลดภาระของนักพัฒนา

คุณสมบัติใหม่ของรูปแบบ HTML5

HTML5 Web Forms 2.0 เป็นการปรับปรุงที่ครอบคลุมในรูปแบบเว็บปัจจุบัน ในขณะที่ยังคงรักษาคุณสมบัติที่เรียบง่ายและใช้งานง่ายมันจะเพิ่มการควบคุมหรือควบคุมแอตทริบิวต์ในตัวเพื่อตอบสนองความต้องการของผู้ใช้และลดการเขียนโปรแกรมของนักพัฒนา ในความคิดของฉัน HTML5 ได้ปรับปรุงรูปแบบเว็บปัจจุบันเป็นหลักในด้านต่อไปนี้:

• ประเภทควบคุมใหม่
  • คุณยังคงกังวลเกี่ยวกับการตรวจสอบประเภทหรือไม่และคุณยังคงกังวลเกี่ยวกับรายการนิพจน์ทั่วไปที่คุณไม่สามารถเข้าใจได้ HTML5 มีชุดควบคุมใหม่ที่จะมีฟังก์ชั่นการตรวจสอบประเภทโดยธรรมชาติ ตัวอย่างเช่นกล่องอินพุต URL กล่องป้อนอีเมล ฯลฯ

     <อินพุต type = url> </input>
     <ประเภทอินพุต = อีเมล> </put>

  • แน่นอนว่ายังมีกล่องอินพุตที่สำคัญมาก คุณควรรู้ว่าการใช้ JavaScript และ CSS เพื่อสร้างกล่องอินพุตวันที่ยังคงยากมาก ห้องสมุดคลาสอย่าง Dojo และ Yui ก็ทำเรื่องใหญ่เกี่ยวกับวิดเจ็ตนี้

     <อินพุตประเภท = วันที่> </อินพุต>

  • ในฐานะที่เป็นส่วนหนึ่งของความทรงจำที่เจ็บปวดของฉันฉันมักจะจำได้ว่านักพัฒนาของเราต้องการเพิ่มตัวเลือกมากมายลงในตารางแบบเลื่อนลงที่เลือก ตัวเลือกเหล่านี้ส่วนใหญ่มาจากฐานข้อมูลเช่นประเทศจังหวัดและรายการเมือง ฯลฯ เรื่องนี้ยุ่งยากมาก HTML5 จะสนับสนุนคุณลักษณะข้อมูลและแหล่งข้อมูลสำหรับการควบคุมที่เลือก!

     <select data = http: // domain/getMyoptions> </select>

• ปรับปรุงการควบคุมการอัปโหลดไฟล์คุณสามารถใช้ตัวควบคุมหนึ่งตัวเพื่ออัปโหลดหลายไฟล์ระบุประเภทของไฟล์ที่อัปโหลด (ยอมรับ) และคุณสามารถตั้งค่าขนาดสูงสุด (maxlength) ของแต่ละไฟล์ คุณเห็นความแตกต่างระหว่างมันกับการควบคุมการอัปโหลดไฟล์ที่จัดทำโดยระบบปฏิบัติการทั่วไปหรือไม่? อย่างไรก็ตามฉันคิดว่ามันเหมือนกัน ในแอปพลิเคชัน HTML5 การควบคุมการอัปโหลดไฟล์จะมีประสิทธิภาพและใช้งานง่ายมาก
• ทำซ้ำโมเดล HTML5 จัดเตรียมชุดของกลไกการทำซ้ำเพื่อช่วยให้เราสร้างรายการอินพุตที่ซ้ำกันบางอย่างรวมถึงปุ่มบางประเภทเช่น Add, Remove, Move-Up และ Move-Down ด้วยกลไกการทำซ้ำชุดนี้นักพัฒนาสามารถใช้รายการแก้ไขที่เราเห็นได้อย่างง่ายดาย นี่เป็นรูปแบบที่พบบ่อยมาก เราสามารถเพิ่มรายการลบรายการที่แน่นอนหรือย้ายรายการ ฯลฯ
• ระบบการตรวจสอบแบบฟอร์มในตัว HTML5 ให้คุณลักษณะใหม่สำหรับการควบคุมอินพุตประเภทต่าง ๆ เพื่อควบคุมพฤติกรรมการป้อนข้อมูลของการควบคุมเหล่านี้เช่นแอตทริบิวต์ที่ต้องการของรายการที่ต้องการทั่วไปของเราเช่นเดียวกับ MAX, MIN ฯลฯ สำหรับการควบคุมประเภทตัวเลข เมื่อคุณส่งแบบฟอร์มเมื่อข้อผิดพลาดการตรวจสอบไม่ถูกต้องเบราว์เซอร์จะไม่ดำเนินการส่ง แต่จะแสดงข้อความแสดงข้อผิดพลาดการตรวจสอบที่สอดคล้องกัน

   <ประเภทอินพุต = ข้อความที่จำเป็น> </put>
   <ประเภทอินพุต = number min = 10 max = 100> </input>

• การส่ง XML สิ่งที่เรามักใช้คือรูปแบบการเข้ารหัสของแบบฟอร์มคือแอปพลิเคชัน/X-WWW-FORM-URLENCODED นักพัฒนามีความชัดเจนมากเกี่ยวกับรูปแบบนี้และข้อมูลสามารถส่งไปยังฝั่งเซิร์ฟเวอร์เพื่อเข้าถึงได้ง่าย HTML5 จะให้รูปแบบข้อมูลใหม่: การส่ง XML คือแอปพลิเคชัน/X-WWW-FORM+XML เพื่อให้ตัวอย่างง่ายๆเซิร์ฟเวอร์จะได้รับข้อมูลแบบฟอร์มโดยตรงในรูปแบบ XML

   <การส่ง>
   <ชื่อฟิลด์ = ชื่อดัชนี = 0> ปีเตอร์ </field>
   <ชื่อฟิลด์ = ดัชนีรหัสผ่าน = 0> รหัสผ่าน </field>
   </emission>

กรณีศึกษา

ฉันจะใช้ระบบฟอร์มใหม่ของ HTML5 เพื่อสร้างอินเทอร์เฟซการลงทะเบียนผู้ใช้อย่างง่ายรวมถึงชื่อผู้ใช้รหัสผ่านวันเดือนปีเกิดปัญหาการรักษาความลับ ฯลฯ รหัสมีดังนี้:

 - doctype html> <html> <head> <style> ฉลาก p {width: 180px; ลอย: ซ้าย; TEXT-ALIGING: ถูกต้อง; padding-right: 10px} ตาราง {margin-left: 80px} ตาราง td {border-bottom: 1px solid #cccccc} input.submit {margin-left: 80px} </style> </head> <body> <body> อีเมลเพื่อลงทะเบียน) </label> <ชื่ออินพุต = 'ชื่อ' ประเภทที่ต้องการ = 'อีเมล'> </input> </p> <p> <label for = 'รหัสผ่าน'> รหัสผ่าน </label> <ชื่ออินพุต = 'รหัสผ่าน' ประเภทที่ต้องการ = 'รหัสผ่าน'> </อินพุต> </p> <p> สำหรับ = 'Gender'> สัญชาติ </label> <เลือกชื่อ = 'ประเทศ' data = 'ประเทศ.xml'> </select> </p> <p> <label for = 'photo'> Avatar ส่วนบุคคล </label> <อินพุต type = 'file' name = 'photo' accept = 'image/*'/> <td> คำตอบ </td> <td> </td> </head> <tr id = คำถามซ้ำ = เทมเพลตซ้ำ-start = 1 ซ้ำ-min = 1 ซ้ำ max = 3> <td> <อินพุตประเภท = ชื่อข้อความ = คำถาม [คำถาม] .q> </td> <td> </tr> </table> <p> <อินพุต type = 'submit' value = 'send' class = 'ส่ง'/> </p> </form> </body> </html>

เนื่องจากมาตรฐาน HTML5 ยังอยู่ระหว่างการพัฒนาเบราว์เซอร์ที่แตกต่างกันรองรับคุณสมบัติ HTML5 ค่อนข้าง จำกัด ในหมู่พวกเขาโอเปร่าสนับสนุนมันให้ดีขึ้นในรูปแบบ ตัวอย่างนี้ทำงานตามปกติบน Opera9 การเรนเดอร์มีดังนี้:

ตัวอย่างนี้ใช้องค์ประกอบรูปแบบ HTML5 ใหม่บางอย่างเช่นกล่องอินพุตประเภทอีเมล (ID) และกล่องอินพุตประเภทวันที่ (วันเดือนปีเกิด) และรูปแบบที่ซ้ำกันใช้เพื่อแนะนำผู้ใช้ให้กรอกปัญหาการรักษาความลับ ในการอัปโหลดอวตารส่วนบุคคลโดยการ จำกัด ประเภทไฟล์ผู้ใช้สามารถเลือกรูปภาพสำหรับการอัปโหลดเนื้อหาที่ตรงตามมาตรฐาน กล่องอินพุตตัวเลือกแบบเลื่อนลงสำหรับการเลือกผู้ใช้ของสัญชาติถูกใช้ในรูปแบบของแหล่งข้อมูลการเผยแพร่ประชาสัมพันธ์ แหล่งข้อมูลการเผยแพร่ประชาสัมพันธ์ใช้ coutries.xml และเนื้อหามีดังนี้:

 <เลือก xmlns = http: //www.w3.org/1999/xhtml> <pontion> จีน </ตัวเลือก> <pontion> ญี่ปุ่น </petion> <petion> เกาหลี </petion> </elect>

และ Enctype ของแบบฟอร์มคือแอปพลิเคชัน/X-WWW-FORM+XML นั่นคือการส่ง HTML5 XML ดังนั้นเมื่อผ่านการตรวจสอบแบบฟอร์มเนื้อหาแบบฟอร์มจะถูกส่งใน XML คุณจะพบว่าหากไม่มีค่าในกล่องอินพุต ID หรือหากมีการป้อนสตริงประเภทที่ไม่ได้ถูกป้อนเมื่อคุณพยายามส่งแบบฟอร์มจะมีข้อความแสดงข้อผิดพลาดซึ่งอยู่ในเบราว์เซอร์

บทสรุป

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