จุดประสงค์ของคุณสมบัติ HTML5 ใหม่คือการปรับปรุงการสนับสนุนการฝังเช่นวิดีโอและเสียงและให้นักพัฒนาและผู้ใช้ขั้นสุดท้ายด้วยการเขียนโปรแกรมอย่างง่ายและประสบการณ์ผู้ใช้ที่ดีขึ้น ตอนนี้โลกอินเทอร์เน็ตกำลังรออยู่และเบราว์เซอร์สามารถรองรับ HTML5 เวอร์ชันใหม่เมื่อได้รับการอัปเดต HTML5 ได้รับการสนับสนุนจากเบราว์เซอร์จำนวนมากเช่น Safari, Chrome, Firefox, Opera, IE9 มันเข้ากันได้ย้อนหลัง แต่เบราว์เซอร์ของวันนี้ไม่สามารถใช้งานร่วมกับ HTML5 ได้อย่างสมบูรณ์
การอัพเกรดเว็บไซต์เป็น HTML5 นั้นค่อนข้างง่ายเนื่องจากเข้ากันได้กับ HTML4 คุณเพียงแค่ต้องแก้ไข doctype ของคุณ การอัปเดตใหม่นี้ช่วยให้สิ่งต่าง ๆ ง่ายขึ้นดังนั้นคุณสามารถอัปเดตเว็บไซต์ทั้งหมดของคุณและพวกเขาจะไม่ผิดพลาดเพราะแท็ก HTML4 ทั้งหมดยังคงรองรับ 100% ใน HTML5
รูปแบบ HTML5 กำหนดประเภทอินพุตและคุณสมบัติใหม่มากกว่าโหลและองค์ประกอบใหม่เหล่านี้ช่วยให้โปรแกรมเมอร์สามารถตั้งโปรแกรมได้ง่ายขึ้น มาพูดคุยเกี่ยวกับคุณสมบัติใหม่เหล่านี้ด้านล่าง
1. ตัวยึดกล่องอินพุต
ใน HTML4 นักพัฒนาใช้ JavaScript และ JQuery เป็นตัวยึดกล่องอินพุตในขณะที่อยู่ใน HTML5 นักพัฒนาสามารถแสดงตัวยึดตำแหน่งได้อย่างง่ายดาย ตัวยึดตำแหน่งคืออะไร? ตัวยึดตำแหน่งเป็นข้อความแจ้งที่ปรากฏในกล่องอินพุต เมื่อคุณคลิกที่ฟิลด์อินพุตมันจะหายไปโดยอัตโนมัติ คุณสามารถแจ้งตัวอย่างข้อความที่ผู้ใช้ควรป้อนในกล่องข้อความ ค่อนข้างมีกล่องอินพุตอีเมลที่คุณสามารถตั้งค่าตัวยึด [email protected] และมันจะหายไปเมื่อคุณคลิก
เช่น FF Safari Chrome Opera iPhone Android
- 3.7+ 4+ 4+ 11+ 4+ -
2. เหตุการณ์โฟกัสอัตโนมัติ
HTML5 เพียงแค่โหลดหน้าเว็บและหน้าเว็บจะย้ายโฟกัสไปยังกล่องอินพุตเฉพาะโดยอัตโนมัติเช่น JavaScript ความแตกต่างคืออะไร? เนื่องจากเป็นเพียงแท็ก HTML ในขณะนี้ผู้ใช้สามารถปิดการใช้งานคุณสมบัตินี้ในเบราว์เซอร์ได้อย่างง่ายดาย ไม่ใช่เบราว์เซอร์ทั้งหมดที่รองรับโฟกัสอัตโนมัติ แต่เบราว์เซอร์ไม่เพียง แต่เพิกเฉยต่อคุณสมบัตินี้ หากคุณต้องการให้เบราว์เซอร์ทั้งหมดทำงานเพียงเพิ่มคุณสมบัติ HTML5 Autofocus ใหม่แล้วตรวจสอบว่าเบราว์เซอร์รองรับ AutoFocus หรือไม่ หากทำได้คุณไม่จำเป็นต้องใช้สคริปต์โฟกัสอัตโนมัติ หากคุณไม่มีคุณต้องเพิ่มสคริปต์โฟกัสอัตโนมัติ
ff คือ Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - -
3. HTML ประเภทอินพุตที่กำหนดไว้ใหม่
1. อีเมล
กล่องอินพุตแรกที่ฉันจะบอกว่าเป็นที่อยู่อีเมล เบราว์เซอร์เก่าที่ไม่สนับสนุนประเภทใหม่ก็ถือว่าเป็นกล่องข้อความและผู้ใช้ 99% จะไม่สังเกตเห็นการเปลี่ยนแปลงนี้จนกว่าพวกเขาจะส่งแบบฟอร์ม (จะมีการตรวจสอบแบบฟอร์มในเวลานี้)
2. เว็บไซต์
มาพูดคุยเกี่ยวกับกล่องอินพุต URL หากคุณต้องการป้อน URL คุณคาดว่าจะป้อนเช่น http://www.vevb.com ตอนนี้อยู่ในกล่องอินพุตประเภท URL คีย์บอร์ดเสมือนจริงตัวแปรจะปรากฏขึ้นใน iPhone ผู้ใช้สามารถป้อน Slashes และ. com ได้อย่างง่ายดาย ในทำนองเดียวกันผู้ใช้ไม่ทราบว่าสิ่งเหล่านี้ก่อนที่จะส่งแบบฟอร์ม
3. ตัวเลข
ในการรับหมายเลขการจับคู่ใน HTML4 คุณต้องใช้สคริปต์ jQuery เพื่อช่วยในการตรวจสอบ HTML5 เพิ่มประเภทตัวเลข คุณสมบัติเพิ่มเติมบางอย่าง (ไม่บังคับ): นาที: ระบุหมายเลขอินพุตขั้นต่ำที่สามารถยอมรับได้โดยกล่องอินพุต สูงสุด: เป็นจำนวนสูงสุดที่อนุญาตให้ป้อน ขั้นตอน: ช่วงเวลาทางกฎหมายสำหรับโดเมนอินพุตแอตทริบิวต์ค่าเริ่มต้นคือ 1
ดังที่แสดงในรูปด้านบนอนุญาตให้ใช้ตัวเลขเท่านั้น (ในกรณีส่วนใหญ่สิ่งเหล่านี้จะไม่ถูกสังเกตจนกว่าจะมีข้อผิดพลาดเมื่อส่ง) เพียง 0, 2, 4 เป็นกฎหมาย (6 ผิดกฎหมายเนื่องจากขั้นตอนคือ 10 และกฎหมายคือ 0, 10, 20 ... )
4. ตัวเลื่อนดิจิตอล
HTML5 ช่วยให้คุณใช้ช่วงที่เรียกว่าประเภทใหม่และกล่องอินพุตจะกลายเป็นตัวเลื่อน แบบฟอร์มเว็บไซต์ของคุณสามารถใช้ตัวเลื่อน แท็กแอตทริบิวต์ของมันเหมือนกับประเภทตัวเลขเพียงเปลี่ยนประเภทการตั้งค่าประเภท = 'number' เป็น type = 'range'
5. ปฏิทิน
การเพิ่มใหม่ที่ดีที่สุดจนถึงวันที่ประเภทตัวเลือกวันที่ชื่อวันที่และวันที่ (มีประเภทวันที่/เวลาเพิ่มเติมอื่น ๆ เช่นเวลาสัปดาห์เดือนและปฏิทินท้องถิ่น) เฟรมเวิร์ก JavaScript จำนวนมากเช่น JQuery UI และ Yiu มีการควบคุมเหล่านี้อยู่แล้ว แต่การเพิ่มตัวเลือกปฏิทินนั้นค่อนข้างน่ารำคาญ HTML5 กำหนดตัวเลือกวันที่ท้องถิ่นใหม่ที่ไม่ต้องรวมการใช้สคริปต์ในหน้า ณ ตอนนี้โอเปร่าเป็นเพียงหนึ่งเดียวที่รองรับคุณสมบัตินี้อย่างเต็มที่และสำหรับเบราว์เซอร์อื่น ๆ คุณสามารถทำสคริปต์สำรองในกรณีที่เบราว์เซอร์ไม่รองรับ อย่างไรก็ตามในที่สุดเบราว์เซอร์ทั้งหมดจะได้รับการปรับปรุง
6. ค้นหา
HTML5 เพิ่มประเภทกล่องอินพุตการค้นหา นี่คืออะไร แต่เป็นการเปลี่ยนแปลงที่ดีสำหรับผู้ใช้บางคน มันสามารถวนรอบขอบของกล่องอินพุตโดยอัตโนมัติและเมื่อคุณเริ่มพิมพ์จะมี X ขนาดเล็กไปทางขวา ปัจจุบันเบราว์เซอร์ทั้งหมดรองรับมัน
7. สี
HTML5 ยังกำหนดสีของประเภทซึ่งช่วยให้คุณสามารถเลือกสีและส่งคืนค่า hexademical Opera11 เป็นเบราว์เซอร์เดียวที่รองรับเบราว์เซอร์ประเภทนี้ อย่างไรก็ตามไม่ควรมีคนจำนวนมากที่ใช้ประเภทนี้ดังนั้นจึงไม่ใช่ปัญหาใหญ่ที่จะไม่สนับสนุน
8. การตรวจสอบแบบฟอร์ม
คุณสมบัติใหม่ที่น่าตื่นเต้นที่สุดคือการตรวจสอบแบบฟอร์ม นักพัฒนาส่วนใหญ่ทำการตรวจสอบความถูกต้องไม่ว่าจะเป็นไคลเอนต์หรือเซิร์ฟเวอร์ บางทีตัวตรวจสอบรูปแบบของ HTML5 อาจไม่ได้แทนที่การตรวจสอบฝั่งเซิร์ฟเวอร์ของคุณ แต่ในที่สุดก็จะแทนที่การตรวจสอบฝั่งไคลเอ็นต์ของคุณในที่สุด ปัญหาเกี่ยวกับการตรวจสอบ JavaScript คือมันเป็นเรื่องง่ายสำหรับผู้ใช้ที่จะข้ามมันสามารถข้ามได้อย่างง่ายดายเพียงแค่ปิดการใช้งาน JavaScript ตอนนี้ HTML5 เป็นห่วงคุณไม่ต้องกังวลเกี่ยวกับเรื่องนี้ ข้อผิดพลาดเป็นพรอมต์ HTML5 ดั้งเดิมทั้งหมดและไม่ได้ใช้ JavaScript
เช่น FF Safari Chrome Opera iPhone Android
- 4+ 5+ 10+ 9+ - -
9. ฟิลด์ที่ต้องการ
การตรวจสอบรูปแบบของ HTML5 ไม่ จำกัด เฉพาะประเภทของฟิลด์การตรวจสอบ แต่ยังอนุญาตให้มีการเรียกแท็กพิเศษใหม่ที่จำเป็น คุณสมบัติใหม่นี้ช่วยให้นักพัฒนาสามารถตรวจสอบได้ว่ากล่องอินพุตนั้นกรอกโดยไม่ต้องใช้ JavaScript
สรุป: การอัปเดตข้างต้นมีความสำคัญต่อการพัฒนาวงจรการพัฒนาและเพิ่มประสบการณ์ผู้ใช้ เมื่อเบราว์เซอร์ทั้งหมดยอมรับ HTML5 เว็บไซต์รุ่นต่อไปจะเกินความคาดหวังของทุกคน HTML5 ไม่ยุ่งยาก แต่จะช่วยนักพัฒนาและปรับปรุงประสบการณ์ผู้ใช้อย่างมาก