แอตทริบิวต์ HTML สากล แอตทริบิวต์แบบฟอร์ม HTML5

บน HTML5 แม้ว่าเบราว์เซอร์สมัยใหม่ทั้งหมดจะรองรับมาตรฐานนี้แล้วก็ตาม ณ เดือนธันวาคม 2554 มาตรฐานยังอยู่ระหว่างการพัฒนา

HTML5 เพิ่มคุณสมบัติทางวากยสัมพันธ์ใหม่มากมาย - , และ . องค์ประกอบเหล่านี้ได้รับการออกแบบมาเพื่อให้สามารถฝังและจัดการกราฟิกและสื่อบนเว็บได้ง่ายขึ้น โดยไม่ต้องใช้ปลั๊กอินและ API แบบเนทีฟ องค์ประกอบใหม่อื่นๆ เช่น , และได้รับการออกแบบเพื่อเพิ่มคุณค่าเนื้อหาเชิงความหมายของเอกสาร (หน้า)

แท็ก HTML5 ใหม่

1. แท็กส่วน (บทความ, กัน, ส่วนท้าย, ส่วนหัว, hgroup, nav, ส่วน)
2. แท็กการจัดกลุ่มเนื้อหา (รูป, คำบรรยายภาพ)
3. แท็กสำหรับการเน้นข้อความเชิงความหมาย (bdo, mark, time, ruby, rt, rp, wbr)
4. แท็กสำหรับการแทรกเนื้อหา (เสียง วิดีโอ แคนวาส ฝัง แหล่งที่มา)
5. แท็กสำหรับองค์ประกอบของฟอร์ม (ดาตาลิสต์, คีย์เจน, เอาต์พุต, ความคืบหน้า, มิเตอร์)
6. องค์ประกอบแบบโต้ตอบ (รายละเอียด สรุป คำสั่ง เมนู)

แท็กคำอธิบายโดยย่อ

	กำหนดบทความ
	กำหนดเนื้อหานอกเหนือจากเนื้อหาของหน้าหลัก
	กำหนดเนื้อหาเสียง
	กำหนดกราฟิก
	กำหนดปุ่มคำสั่ง
	กำหนดข้อมูลลงในรายการที่เรียงลำดับ
	กำหนดรายการแบบเลื่อนลง
	กำหนดเทมเพลตข้อมูล
	กำหนดรายละเอียดองค์ประกอบ
	กำหนดบทสนทนา (การสนทนา)
	กำหนดวัตถุประสงค์ของเหตุการณ์ที่ส่งผ่านเซิร์ฟเวอร์
	กำหนดกลุ่มของเนื้อหาสื่อและคำอธิบายภาพ
	กำหนดส่วนท้ายสำหรับส่วนหรือหน้า
	กำหนดพื้นที่ชื่อส่วนหรือหน้า
	กำหนดข้อความที่เลือก
	กำหนดการวัดภายในช่วงที่กำหนดไว้ล่วงหน้า
	กำหนดลิงก์การนำทาง
	กำหนดจุดที่ซ้อนกันในรูปแบบข้อมูล
	กำหนดผลลัพธ์บางประเภท
	กำหนดความก้าวหน้าของงานใดๆ
	กำหนดกฎสำหรับการอัพเดตเทมเพลต
	กำหนดส่วน (ส่วน)
	กำหนดทรัพยากรสื่อ
	กำหนดวันที่/เวลา
	กำหนดวิดีโอ

แท็กที่ไม่รองรับ: แท็กคำอธิบายโดยย่อ

	ไม่รองรับ.
	กำหนดคำย่อ
	ไม่รองรับ.
	กำหนดแอปเพล็ต
	ไม่รองรับ.
	ใช้แทน CSS เพื่อตั้งค่าแบบอักษร
	ไม่รองรับ.
	กำหนดข้อความขนาดใหญ่
	ไม่รองรับ.
	ไม่รองรับ.
	กำหนดส่วนที่ไม่สนับสนุนเฟรม
	ไม่รองรับ.
	ไม่รองรับ.
	กำหนดข้อความขีดทับ
	ไม่รองรับ.

กำหนดข้อความ TTY ไม่รองรับ.

กำหนดข้อความที่ขีดเส้นใต้	ไม่รองรับ. กำหนดข้อความที่จัดแนว	รายการแอตทริบิวต์ HTML5
คุณสมบัติ ค่า คำอธิบายโดยย่อ	เป็นที่พอใจ	จริง
เท็จ	ไม่รองรับ. กำหนดว่าผู้ใช้สามารถแก้ไขเนื้อหา (เนื้อหา) เมนูบริบท	เมนู_id
กำหนดเมนูบริบทขององค์ประกอบ	ไม่รองรับ. กำหนดข้อความที่จัดแนว	ลากได้
เท็จ	อัตโนมัติ	กำหนดว่าผู้ใช้สามารถลากองค์ประกอบได้หรือไม่
ไม่เกี่ยวข้อง	ระบุว่าองค์ประกอบไม่มีค่า องค์ประกอบที่มีค่าจะไม่แสดง	อ้างอิง
URL/รหัส	อัตโนมัติ	กำหนดลิงค์ไปยังเอกสารอื่น / ส่วนหนึ่งของเอกสาร (ใช้เฉพาะเมื่อมีการตั้งค่าแอตทริบิวต์)

เครื่องหมายทะเบียน

reg_mark

ระบุเครื่องหมายที่ลงทะเบียนขององค์ประกอบ

แม่แบบ

กำหนดลิงค์ไปยังเอกสารอื่น/ส่วนหนึ่งของเอกสารที่ควรนำไปใช้กับองค์ประกอบ

โครงสร้างเค้าโครงหน้า HTML5

เมื่อใช้โครงสร้างหน้าเว็บไซต์ตามปกติ คุณสามารถระบุบล็อกทั่วไปได้หลายบล็อก ซึ่งอธิบายด้วยแท็ก div พร้อมคลาสที่เกี่ยวข้อง (, , , ฯลฯ)

คุณลักษณะ accesskey ช่วยให้คุณสามารถเปิดใช้งานลิงก์โดยใช้คีย์ผสมบางอย่างที่มีตัวอักษรหรือตัวเลขที่ระบุในโค้ดลิงก์ เบราว์เซอร์ใช้คีย์ผสมที่แตกต่างกัน ตัวอย่างเช่น สำหรับ accesskey="s" ชุดค่าผสมต่อไปนี้ใช้งานได้

Internet Explorer: Alt + S
โครม: Alt+S
โอเปร่า: Shift + Esc , S
ซาฟารี: Alt+S
Firefox: Shift + Alt + S

ระบุคลาสสไตล์ที่อนุญาตให้คุณเชื่อมโยงแท็กเฉพาะกับสไตล์ชีต คุณสามารถระบุคลาสหลายคลาสในค่าเดียวพร้อมกัน โดยคั่นคลาสเหล่านั้นด้วยการเว้นวรรค

แจ้งว่าผู้ใช้สามารถแก้ไของค์ประกอบได้ - อนุญาตให้ลบข้อความและป้อนข้อความใหม่ได้ คำสั่งมาตรฐาน เช่น เลิกทำ วางข้อความจากบัฟเฟอร์ ฯลฯ ก็ใช้งานได้เช่นกัน

ตั้งค่าเมนูบริบทสำหรับองค์ประกอบ ค่านี้คือตัวระบุของเมนูที่สร้างขึ้นโดยใช้แท็ก

กำหนดทิศทางและการแสดงข้อความ - ซ้ายไปขวาหรือขวาไปซ้าย โดยปกติเบราว์เซอร์จะแยกทิศทางของข้อความหากอยู่ใน Unicode แต่คุณสามารถใช้แอตทริบิวต์ dir เพื่อระบุทิศทางที่จะแสดงข้อความได้ สำหรับอักขระอารบิกและฮิบรู ทิศทาง Unicode จะมีความสำคัญเหนือกว่า ดังนั้นแอตทริบิวต์ dir จะไม่ส่งผลกระทบต่ออักขระเหล่านั้น

ลากได้

ช่วยให้คุณสามารถลากองค์ประกอบเพื่อจัดการเพิ่มเติม

ดรอปโซน

ระบุสิ่งที่ต้องทำกับองค์ประกอบที่ถูกลาก

ซ่อนเนื้อหาขององค์ประกอบไม่ให้มองเห็น องค์ประกอบดังกล่าวจะไม่แสดงบนเพจ แต่สามารถเข้าถึงได้ผ่านสคริปต์

ตั้งค่าตัวระบุ - ชื่อเฉพาะขององค์ประกอบซึ่งใช้ในการเปลี่ยนสไตล์และเข้าถึงผ่านสคริปต์ ตัวระบุในรหัสเอกสารจะต้องอยู่ในสำเนาชุดเดียว กล่าวคือ ปรากฏเพียงครั้งเดียวเท่านั้น

itemid, itemprop, itemref, itemscope, ประเภทรายการ

กลุ่มแอตทริบิวต์ที่ออกแบบมาเพื่อทำงานกับ Microdata

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

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

ใช้เพื่อจัดรูปแบบองค์ประกอบโดยใช้กฎ CSS

คุณลักษณะ tabindex จะกำหนดลำดับการรับโฟกัสเมื่อนำทางระหว่างองค์ประกอบต่างๆ โดยใช้ปุ่ม Tab การเปลี่ยนแปลงเกิดขึ้นจากค่าที่น้อยลงไปเป็นค่าที่มากขึ้น เช่น จาก 1 เป็น 2 จากนั้นเป็น 3 และต่อๆ ไป ในกรณีนี้ ลำดับที่เข้มงวดไม่สำคัญ อนุญาตให้ข้ามตัวเลขบางตัวและเริ่มจากตัวเลขใดก็ได้ หากค่า tabindex ขององค์ประกอบเท่ากัน ระบบจะพิจารณาลำดับการปรากฏในโค้ดด้วย

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

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

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

จะเขียนคุณสมบัติได้อย่างไร?

คุณลักษณะเป็นคำสงวน (เช่น แท็ก โดยไม่มีวงเล็บเหลี่ยมเท่านั้น) แต่ความหมายของคำเหล่านั้นอาจแตกต่างกันได้ เช่นเดียวกับแท็กขอแนะนำให้เขียนแอตทริบิวต์ที่มีค่าเป็นตัวอักษรตัวเล็กแม้ว่าโดยทั่วไปแล้วเบราว์เซอร์จะไม่สนใจ - นี่เป็นเพียงกฎแห่งมารยาทที่ดี: ในภาษารัสเซียก็ไม่สามารถเขียนได้เมื่อตัวพิมพ์ใหญ่ล็อค เปิดใช้งานแล้ว ทำไม HTML ถึงแย่ลง?

ค่าแอตทริบิวต์เขียนในรูปแบบต่อไปนี้:

คุณสมบัติ =”ค่า” lang=”en”

คุณควรเขียนแอตทริบิวต์ไว้ในแท็กเปิด หลังคำสงวนเสมอ

ย่อหน้า

โดยทั่วไปแล้วจะมีแอตทริบิวต์หลายรายการสำหรับแท็กเดียว ไม่สำคัญว่าจะเรียงลำดับอย่างไร

คุณลักษณะสากล

แท็ก HTML แต่ละแท็กมีชุดแอตทริบิวต์ของตัวเอง คุณลักษณะบางอย่างอาจใช้ได้กับหลายแท็ก ในขณะที่แอตทริบิวต์อื่นๆ อาจใช้ได้กับแท็กเดียวเท่านั้น นอกจากนี้ยังมีกลุ่มของแอตทริบิวต์สากล (ทั่วโลก) ที่สามารถใช้กับแท็กใดก็ได้ มาดูคุณสมบัติของหมวดหมู่นี้โดยย่อ

accesskey ช่วยให้คุณสามารถตั้งค่าแป้นพิมพ์ลัดเพื่อเข้าถึงวัตถุหน้าเฉพาะ ตัวอย่างเช่น คุณสามารถให้ผู้ใช้คลิกลิงก์ใดลิงก์หนึ่งโดยใช้คีย์ผสม Alt+1 จึงพัฒนาระบบนำทางที่สำคัญ

ค่าแอตทริบิวต์อาจเป็นตัวเลข 0-9 หรือตัวอักษรละติน:

ลิงค์จะเปิดขึ้นโดยการกดคีย์ผสมด้วยปุ่มเดียว

คลาสช่วยให้คุณเชื่อมโยงแท็กกับการออกแบบที่กำหนดไว้ล่วงหน้าโดยใช้ CSS การใช้แอตทริบิวต์ช่วยให้คุณสามารถลดโค้ดได้อย่างมาก เนื่องจากแทนที่จะป้อนบล็อก CSS เดียวกันซ้ำๆ คุณสามารถป้อนชื่อของคลาสที่เกี่ยวข้องได้
เมื่อใช้ contenteditable คุณสามารถอนุญาตให้ผู้ใช้สามารถแก้ไของค์ประกอบใดๆ ของหน้า HTML: ลบ แทรก และเปลี่ยนข้อความ คุณลักษณะเดียวกันทำให้สามารถแก้ไขและปิดใช้งานได้ มีเพียงสองค่าเท่านั้น: จริง - อนุญาตให้แก้ไข, เท็จ - ปิดใช้งาน
การใช้แอตทริบิวต์ contextmenu คุณสามารถจัดเตรียมองค์ประกอบเอกสารใดๆ ที่มีรายการเมนูบริบทที่ไม่ซ้ำใครได้ตามดุลยพินิจของคุณ เมนูนั้นถูกสร้างขึ้นในแท็ก และแอตทริบิวต์เมนูบริบทได้รับการกำหนดตัวระบุ
dir ระบุทิศทางของข้อความ: ซ้ายไปขวา (ltr) หรือขวาไปซ้าย (rtl)
ลากได้ ช่วยให้คุณสามารถปิดการใช้งาน (เท็จ) หรืออนุญาตให้ผู้ใช้ (จริง) ลากองค์ประกอบของหน้ากอปรด้วยแอตทริบิวต์นี้
dropzone บอกเบราว์เซอร์ว่าจะทำอย่างไรกับองค์ประกอบที่ถูกดร็อป: คัดลอก (คัดลอกค่า) ย้าย (ย้าย) หรือสร้างลิงก์ไปยังองค์ประกอบนั้น (ลิงก์)
ซ่อนเร้น - คุณลักษณะที่ช่วยให้คุณสามารถซ่อนเนื้อหาขององค์ประกอบเพื่อไม่ให้แสดงในเบราว์เซอร์ หากแอตทริบิวต์ถูกตั้งค่าเป็นเท็จ วัตถุจะแสดงขึ้น จริง - มันถูกซ่อนไว้
id ระบุตัวระบุขององค์ประกอบ - ชื่อชนิดหนึ่งที่จำเป็นในการเปลี่ยนรูปแบบของออบเจ็กต์ เช่นเดียวกับเพื่อให้สคริปต์สามารถเข้าถึงได้ ค่าของแอตทริบิวต์จะเป็นชื่อของมัน ต้องขึ้นต้นด้วยตัวอักษรละติน และสามารถประกอบด้วยตัวเลข ตัวอักษรที่มีตัวอักษรละตินเหมือนกัน (ใหญ่และเล็ก) รวมถึงเครื่องหมายขีดกลาง (-) และขีดล่าง (_) ไม่สามารถมีตัวอักษรรัสเซียได้
lang ช่วยให้เบราว์เซอร์เข้าใจว่าเนื้อหานั้นเขียนด้วยภาษาใดและจัดรูปแบบตามนั้น (เช่น ภาษาอาจใช้เครื่องหมายคำพูดต่างกัน) ค่าคือรหัสภาษา (รัสเซีย - ru, อังกฤษ - en ฯลฯ )
การตรวจการสะกดเปิดใช้งาน (จริง) หรือปิดใช้งานการตรวจสอบการสะกด (เท็จ) มีประโยชน์อย่างยิ่งในการใช้แอตทริบิวต์ในแท็กฟิลด์แบบฟอร์มที่ผู้ใช้จะป้อนข้อความ
style ช่วยให้คุณสามารถตั้งค่าการออกแบบองค์ประกอบโดยใช้โค้ด CSS
tabindex ช่วยให้คุณกำหนดได้ว่าผู้ใช้จะต้องกดปุ่ม Tab กี่ครั้งสำหรับวัตถุที่มีคุณสมบัตินั้นเพื่อรับโฟกัส จำนวนคลิกจะกำหนดค่าแอตทริบิวต์ - จำนวนเต็มบวก
title - คำแนะนำเครื่องมือที่จะปรากฏขึ้นหากคุณเลื่อนเมาส์ไปเหนือองค์ประกอบและปล่อยทิ้งไว้ครู่หนึ่ง บรรทัดในความหมายจะเป็นคำใบ้

แปลอนุญาต (ใช่) หรือปฏิเสธ (ไม่ใช่) การแปลเนื้อหาแท็ก
align ระบุการจัดตำแหน่งขององค์ประกอบ ตัวอย่างเช่น คุณสามารถใช้เพื่อจัดแนวข้อความไปทางซ้าย (ซ้าย) ขวา กึ่งกลาง หรือจัดชิดขอบ สำหรับรูปภาพ (แท็ก ) นอกจากนี้ยังสามารถจัดแนวให้ชิดขอบด้านบนขององค์ประกอบสูงสุดของเส้น (บน) ไปจนถึงขอบล่าง (ล่าง) ได้ และค่าตรงกลางจะทำให้เส้นกลางของภาพตรงกับเส้นฐานของเส้น

โปรดทราบว่าไม่แนะนำให้ใช้แอตทริบิวต์ align และควรจัดข้อความโดยใช้ CSS จะดีกว่า

ตัวอย่างการใช้แอตทริบิวต์

เป็นตัวอย่าง ให้พิจารณาบรรทัดของโค้ด HTML:

ข้อความนี้สามารถแก้ไขได้

ทั้งบรรทัดจะสร้างย่อหน้าของข้อความที่ผู้ใช้สามารถแก้ไขได้ในเบราว์เซอร์

มาดูแต่ละองค์ประกอบของเส้นกัน

- แท็กเปิดของคอนเทนเนอร์ที่เก็บย่อหน้า

- แท็กปิด

ระหว่างสัญลักษณ์ > และ< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true” - นี่คือแอตทริบิวต์และคุณค่าของมัน จำไว้ว่าในโรงเรียน: x=3 เหมือนกันที่นี่: contenteditable = “true” แอตทริบิวต์ contenteditable ระบุว่าผู้ใช้สามารถแก้ไขเนื้อหาขององค์ประกอบได้หรือไม่ โดยเขียนด้วยเครื่องหมายคำพูดคั่นด้วยเครื่องหมายเท่ากับ อนุญาตให้แก้ไข:

คุณสมบัติ =”ค่า” contenteditable=”true”

ย้อนกลับไปในสมัยของ XHTML/HTML4 นักพัฒนามีเพียงไม่กี่ตัวเลือกที่พวกเขาสามารถใช้เพื่อจัดเก็บข้อมูลที่เกี่ยวข้องกับ DOM โดยพลการ คุณสามารถประดิษฐ์แอตทริบิวต์ของคุณเองได้ แต่สิ่งนี้มีความเสี่ยง - รหัสของคุณไม่ถูกต้อง เบราว์เซอร์อาจเพิกเฉยต่อข้อมูลของคุณ และอาจทำให้เกิดปัญหาหากชื่อตรงกับแอตทริบิวต์ HTML มาตรฐาน

ดังนั้นนักพัฒนาส่วนใหญ่จึงติดอยู่กับแอตทริบิวต์ของคลาสหรือ rel เนื่องจากเป็นวิธีเดียวที่สมเหตุสมผลในการจัดเก็บแถวเพิ่มเติม ตัวอย่างเช่น สมมติว่าเรากำลังสร้างวิดเจ็ตเพื่อแสดงข้อความ เช่น ไทม์ไลน์ของข้อความ Twitter ตามหลักการแล้ว JavaScript ควรกำหนดค่าได้โดยไม่ต้องเขียนโค้ดใหม่ ดังนั้นเราจึงกำหนด ID ผู้ใช้ในแอตทริบิวต์ class เช่นนี้

โค้ด JavaScript ของเราจะค้นหาองค์ประกอบที่มี ID msglist เมื่อใช้สคริปต์ เราจะค้นหาคลาสที่ขึ้นต้นด้วย user_ และ "bob" ในกรณีของเราคือ ID ผู้ใช้ และเราจะแสดงข้อความทั้งหมดของผู้ใช้นั้น

สมมติว่าเราต้องการตั้งค่าจำนวนข้อความสูงสุดและข้ามข้อความที่เก่ากว่าหกเดือน (180 วัน):

คุณลักษณะคลาสของเรายุ่งเหยิงอย่างรวดเร็ว - ง่ายต่อการทำผิดพลาด และการแยกวิเคราะห์สตริงใน JavaScript จะยากขึ้นเรื่อยๆ

คุณสมบัติข้อมูล HTML5

โชคดีที่ HTML5 นำเสนอความสามารถในการใช้แอตทริบิวต์ที่กำหนดเอง คุณสามารถใช้ชื่อตัวพิมพ์เล็กที่นำหน้าด้วย data- ได้ เช่น:

คุณลักษณะข้อมูลที่กำหนดเอง:

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

ตัวอย่างการประมวลผล JavaScript #1: getAttribute และ setAttribute

เบราว์เซอร์ทั้งหมดอนุญาตให้คุณรับและเปลี่ยนแอตทริบิวต์ข้อมูลโดยใช้วิธี getAttribute และ setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("ข้อมูลขนาดรายการ"); msglist.setAttribute("ข้อมูล-รายการขนาด", +show+3);

ใช้งานได้ แต่ควรใช้เพื่อรักษาความเข้ากันได้กับเบราว์เซอร์รุ่นเก่าเท่านั้น

ตัวอย่างที่ 2 ของการประมวลผลใน JavaScript: วิธีการ data() ของไลบรารี jQuery

ตั้งแต่ jQuery 1.4.3 เมธอด data() จะจัดการแอตทริบิวต์ข้อมูล HTML5 คุณไม่จำเป็นต้องระบุคำนำหน้าข้อมูลอย่างชัดเจน ดังนั้นโค้ดลักษณะนี้จะใช้งานได้:

msglist วาร์ = $("#msglist"); var show = msglist.data("รายการขนาด"); msglist.data("ขนาดรายการ", show+3);

อย่างไรก็ตาม โปรดทราบว่า jQuery พยายามที่จะแปลงค่าของแอตทริบิวต์ดังกล่าวให้เป็นประเภทที่เหมาะสม (บูลีน ตัวเลข วัตถุ อาร์เรย์ หรือค่าว่าง) และจะส่งผลต่อ DOM ซึ่งแตกต่างจาก setAttribute เมธอด data() จะไม่แทนที่แอตทริบิวต์ data-list-size ทางกายภาพ - หากคุณตรวจสอบค่านอก jQuery - จะยังคงเป็น 5

ตัวอย่างที่ 3 ของการประมวลผล JavaScript: API สำหรับการทำงานกับชุดข้อมูล

สุดท้ายนี้ เรามี API สำหรับการทำงานกับชุดข้อมูล HTML5 ที่ส่งคืนออบเจ็กต์ DOMStringMap สิ่งสำคัญคือต้องจำไว้ว่าแอตทริบิวต์ของข้อมูลถูกแมปกับออบเจ็กต์โดยไม่มีคำนำหน้าข้อมูล ยัติภังค์จะถูกลบออกจากชื่อ และชื่อจะถูกแปลงเป็น CamelCase ตัวอย่างเช่น:

ชื่อแอตทริบิวต์	ชื่อ API ชุดข้อมูล
ผู้ใช้ข้อมูล	ผู้ใช้
ข้อมูลสูงสุด	สูงสุด
ขนาดรายการข้อมูล	รายการขนาด

รหัสใหม่ของเรา:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +แสดง+3;

API นี้รองรับเบราว์เซอร์รุ่นใหม่ทั้งหมด แต่ไม่รองรับ IE10 หรือต่ำกว่า มีวิธีแก้ไขปัญหาชั่วคราวสำหรับเบราว์เซอร์เหล่านี้ แต่การใช้ jQuery อาจเป็นประโยชน์มากกว่าหากคุณเขียนสำหรับเบราว์เซอร์รุ่นเก่า

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

ในบทความนี้ เราจะเน้นที่การสำรวจคุณลักษณะใหม่ๆ และในบทความถัดไปเราจะดูประเภทการป้อนข้อมูล

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

บทความนี้ตัดตอนมาจากบทที่ 6 ของหนังสือ Beginning HTML5 และ CSS3: The Web Evolved โดย Christopher Murphy, Oli Studholme, Richard Clark และ Divya Manian จัดพิมพ์โดย Apress

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

ประวัติความเป็นมาของแบบฟอร์ม HTML5

ส่วนแบบฟอร์มของ HTML5 เดิมเป็นข้อกำหนดที่เรียกว่า Web Forms 2.0 ซึ่งเพิ่มเครื่องมือการจัดการแบบฟอร์มประเภทใหม่ เริ่มต้นที่ Opera และแก้ไขโดยเอียน ฮิกสัน ซึ่งเป็นเจ้าหน้าที่ของโอเปร่าในขณะนั้น และได้รับการอนุมัติจาก W3C ในต้นปี 2548 งานนี้เดิมดำเนินการโดย W3C จากนั้นจึงรวมกับข้อกำหนด Web Applications 1.0 เพื่อสร้างพื้นฐานของข้อกำหนด Web Hypertext Application Technology Working Group (WHATWG) HTML5 ที่แยกย่อยออกไป

การใช้หลักการออกแบบ HTML5

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

แอตทริบิวต์แบบฟอร์ม HTML5

ในบทความนี้ เราจะดูแอตทริบิวต์ใหม่ 14 รายการต่อไปนี้

ตัวยึดตำแหน่ง

อย่างแรกคือแอตทริบิวต์ placeholder ซึ่งช่วยให้เราสามารถตั้งค่าข้อความ placeholder ซึ่งจนกระทั่งเมื่อเร็วๆ นี้ได้ทำใน HTML4 โดยใช้แอตทริบิวต์ value ใช้สำหรับคำอธิบายสั้นๆ เท่านั้น ถ้ายาวกว่านี้ ให้ใช้แอตทริบิวต์ title ความแตกต่างกับ HTML4 คือข้อความจะแสดงเฉพาะเมื่อฟิลด์ว่างเปล่าและไม่อยู่ในโฟกัส ทันทีที่ฟิลด์อยู่ในโฟกัส (เช่น โดยการคลิกเมาส์หรือชี้ไปที่ฟิลด์) และคุณเริ่มพิมพ์ ข้อความก็จะหายไป คล้ายกับช่องค้นหาใน Safari มาก

เรามาดูวิธีการใช้แอตทริบิวต์ตัวยึดตำแหน่งกัน

< input type = "text" name = "user-name" id = "user-name" placeholder = "อย่างน้อย 3 ตัวอักษร" >

แบบนี้! ฉันได้ยินคุณคิดว่า “เขามีอะไรพิเศษมากขนาดนี้? ฉันทำสิ่งนี้มาตลอดชีวิตด้วย JavaScript" ใช่แล้ว ถูกต้องแล้ว อย่างไรก็ตาม ด้วย HTML5 HTML5 จะกลายเป็นส่วนหนึ่งของเบราว์เซอร์ ซึ่งหมายความว่าจำเป็นต้องเขียนสคริปต์น้อยลงเพื่อให้ได้รับประสบการณ์ข้ามเบราว์เซอร์ที่เข้าถึงได้มากขึ้น (แม้จะปิดใช้งาน JavaScript ก็ตาม) รูปภาพนี้แสดงวิธีการทำงานของแอตทริบิวต์ข้อความตัวยึดตำแหน่งใน Chrome

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

ออโต้โฟกัส

ออโต้โฟกัสทำหน้าที่ตามที่กล่าวไว้ทุกประการ การเพิ่มลงในอินพุตจะเน้นฟิลด์โดยอัตโนมัติเมื่อมีการแสดงผลเพจ เช่นเดียวกับตัวยึดตำแหน่ง ในอดีตเราใช้ JavaScript สำหรับโฟกัสอัตโนมัติ

อย่างไรก็ตาม วิธีการจาวาสคริปต์แบบเดิมมีปัญหาด้านการใช้งานที่ร้ายแรง ตัวอย่างเช่น หากผู้ใช้เริ่มกรอกแบบฟอร์มก่อนที่สคริปต์จะโหลดเต็ม สคริปต์จะกลับมา (อย่างไม่เป็นที่พอใจ) หลังจากโหลดไปที่ฟิลด์แบบฟอร์มแรก คุณลักษณะโฟกัสอัตโนมัติใน HTML5 แก้ไขปัญหานี้ด้วยการโฟกัสขณะโหลดเอกสาร โดยไม่ต้องรอให้ JavaScript โหลด อย่างไรก็ตาม เราขอแนะนำให้ใช้เพื่อป้องกันปัญหาการใช้งานเฉพาะหน้าเว็บที่มีวัตถุประสงค์เพียงอย่างเดียวคือแบบฟอร์ม (เช่น Google)

นี่คือแอตทริบิวต์บูลีน (เว้นแต่ว่าคุณกำลังเขียน XHTML5 ดูหมายเหตุ) และดำเนินการดังนี้:

< input type = "text" name = "first-name" id = "first-name" autofocus >

เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ และเช่นเดียวกับตัวยึดตำแหน่ง เบราว์เซอร์ที่ไม่โฟกัสอัตโนมัติก็เพิกเฉยต่อมัน

หมายเหตุ: คุณลักษณะรูปแบบ HTML5 ใหม่บางอย่างเป็นแบบบูลีน ซึ่งหมายความว่ามีการติดตั้งไว้หากมี และจะไม่ติดตั้งหากไม่มี ใน HTML5 สามารถเขียนได้หลายวิธี

ออโต้โฟกัส ออโต้โฟกัส = "" ออโต้โฟกัส = "ออโต้โฟกัส"

ออโต้โฟกัส

ออโต้โฟกัส = ""

ออโต้โฟกัส = "ออโต้โฟกัส"

อย่างไรก็ตาม เมื่อเขียน XHTML5 คุณควรใช้รูปแบบ autofocus="autofocus"

เติมข้อความอัตโนมัติ

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

< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" >

สถานะเติมข้อความอัตโนมัติของฟิลด์จะแทนที่สถานะเติมข้อความอัตโนมัติใด ๆ ที่ตั้งค่าไว้ในองค์ประกอบแบบฟอร์มที่มี

ที่จำเป็น

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

< input type = "text" id = "given-name" name = "given-name" required >

ปัจจุบันจำเป็นต้องใช้ใน Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 และ Chrome 5+ เท่านั้น ดังนั้นในขณะนี้ คุณจะต้องเขียนสคริปต์ตรวจสอบฟิลด์ฝั่งไคลเอ็นต์สำหรับเบราว์เซอร์อื่นต่อไป (*ไอ- ไอ* IE!) Opera, Chrome และ Firefox แสดงข้อความแสดงข้อผิดพลาดแก่ผู้ใช้เมื่อส่งแบบฟอร์ม ในเบราว์เซอร์ส่วนใหญ่ ข้อผิดพลาดจะถูกแปลตามภาษาที่ประกาศ Safari ไม่แสดงข้อความแสดงข้อผิดพลาดเมื่อส่ง แต่จะเน้นที่ฟิลด์แทน

การแสดงข้อความแสดงข้อผิดพลาด "จำเป็น" เริ่มต้นจะแตกต่างกันไปตามแต่ละเบราว์เซอร์ ปัจจุบันฟองข้อผิดพลาดไม่สามารถจัดสไตล์ด้วย CSS ในทุกเบราว์เซอร์ อย่างไรก็ตาม Chrome มีคุณสมบัติของตัวเองที่สามารถใช้เพื่อจัดรูปแบบข้อความแสดงข้อผิดพลาดได้ คุณยังสามารถกำหนดสไตล์ให้กับอินพุตข้อมูลของคุณโดยใช้:required pseudo-class อีกทางเลือกหนึ่งคือการแทนที่ถ้อยคำและสไตล์ใน JavaScript โดยใช้เมธอด setCustomValidity() สิ่งสำคัญมากคืออย่าลืมว่าการตรวจสอบความถูกต้องบนเบราว์เซอร์ดังกล่าวไม่ได้แทนที่การตรวจสอบฝั่งเซิร์ฟเวอร์

ลวดลาย

แอตทริบิวต์ pattern มักจะเป็นปัญหาใหญ่สำหรับนักพัฒนาหลายคน (เช่นเดียวกับแอตทริบิวต์ของฟอร์มใดๆ ก็ตาม) โดยจะกำหนดนิพจน์ทั่วไปของ JavaScript สำหรับฟิลด์ที่ต้องตรวจสอบค่า รูปแบบช่วยให้เราใช้การตรวจสอบแยกสำหรับรหัส หมายเลขบัญชี และอื่นๆ ได้ง่ายขึ้น ความเป็นไปได้ของรูปแบบมีมากมาย และนี่เป็นเพียงตัวอย่างง่ายๆ ตัวอย่างหนึ่งที่ใช้หมายเลขผลิตภัณฑ์

หมายเลขผลิตภัณฑ์:

< label >หมายเลขผลิตภัณฑ์:

< input pattern = "{3}" name = "product" type = "text" title = "หลักเดียวตามด้วยตัวพิมพ์ใหญ่สามตัว" / >

< / label >

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

เช่นเดียวกับที่จำเป็น Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 และ Chrome 5+ เป็นเบราว์เซอร์เดียวที่รองรับเทมเพลตในปัจจุบัน อย่างไรก็ตาม คนอื่นๆ จะตามทันในไม่ช้านี้เนื่องจากความก้าวหน้าอย่างรวดเร็วของตลาดเบราว์เซอร์

รายการและองค์ประกอบดาต้าลิสต์

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

ตัวอย่างต่อไปนี้แสดงการรวมรายการและดาต้าลิสต์เข้าด้วยกัน

ผลไม้ที่คุณชื่นชอบ: แบล็คเบอร์รี่ แบล็คเคอร์แรนท์ บลูเบอร์รี่ อื่นๆ โปรดระบุ:

< label >ผลไม้ที่คุณชื่นชอบ:

< datalist id = "fruits" >

< option value = "แบล็คเบอร์รี่" >แบล็คเบอร์รี่< / option >

< option value = "แบล็คเคอแรนท์" >แบล็คเคอแรนท์< / option >

< option value = "บลูเบอร์รี่" >บลูเบอร์รี่< / option >

< ! -- …-- >

< / datalist >

หากเป็นอย่างอื่น โปรดระบุ:

< input type = "text" name = "fruit" list = "fruits" >

< / label >

ด้วยการเพิ่มองค์ประกอบที่เลือกลงในดาต้าลิสต์ คุณสามารถบรรลุการย่อยสลายที่ยอดเยี่ยมได้ง่ายๆ เพียงใช้องค์ประกอบตัวเลือก นี่คือเทมเพลตมาร์กอัปที่สวยงามซึ่งสร้างโดย Jeremy Keith ซึ่งเข้ากันได้อย่างลงตัวกับหลักการย่อยสลายแบบค่อยเป็นค่อยไปของ HTML5

< label >ผลไม้ที่คุณชื่นชอบ:

< datalist id = "fruits" >

< select name = "fruits" >

< option value = "แบล็คเบอร์รี่" >แบล็คเบอร์รี่< / option >

< option value = "แบล็คเคอแรนท์" >แบล็คเคอแรนท์< / option >

< option value = "บลูเบอร์รี่" >บลูเบอร์รี่< / option >

< ! -- …-- >

< / select >

หากเป็นอย่างอื่น โปรดระบุ:

< / datalist >

< input type = "text" name = "fruit" list = "fruits" >

< / label >

การสนับสนุนเบราว์เซอร์สำหรับรายการและดาต้าลิสต์ปัจจุบันจำกัดอยู่ที่ Opera 9.5+, Chrome 20+, Internet Explorer 10 และ Firefox 4+

หลายรายการ

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

< label >ผลไม้ที่คุณชื่นชอบ:

< datalist id = "fruits" >

< select name = "fruits" >

< option value = "แบล็คเบอร์รี่" >แบล็คเบอร์รี่< / option >

< option value = "แบล็คเคอแรนท์" >แบล็คเคอแรนท์< / option >

< option value = "บลูเบอร์รี่" >บลูเบอร์รี่< / option >

< ! -- …-- >

< / select >

หากเป็นอย่างอื่น โปรดระบุ:

< / datalist >

< input type = "text" name = "fruit" list = "fruits" multiple >

< / label >

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

อัพโหลดไฟล์:

< label >อัพโหลดไฟล์:

< input type = "file" multiple name = "upload" > < / label >

รองรับหลายรายการใน Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 และ Chrome 4+

novalidate และ formnovalidate

แอตทริบิวต์ novalidate และ formnovalidate ระบุว่าไม่จำเป็นต้องตรวจสอบข้อมูลเมื่อส่งแบบฟอร์ม ทั้งสองเป็นคุณลักษณะบูลีน formnovalidate สามารถนำไปใช้กับอินพุตประเภทส่งหรือรูปภาพ คุณลักษณะ novalidate สามารถตั้งค่าให้กับองค์ประกอบแบบฟอร์มเท่านั้น

ตัวอย่างของการใช้แอตทริบิวต์ formnovalidate สามารถดูได้บนปุ่ม "บันทึกฉบับร่าง" โดยที่แบบฟอร์มมีช่องที่ต้องใช้ในการส่งฉบับร่าง แต่ไม่จำเป็นต้องบันทึกฉบับร่าง novalidate จะใช้ในกรณีที่คุณไม่จำเป็นต้องตรวจสอบความถูกต้องของแบบฟอร์ม แต่ต้องการใช้ประโยชน์จากประสบการณ์ผู้ใช้ที่ดีขึ้นจากการป้อนข้อมูลประเภทใหม่

การใช้ formnovalidate สามารถดูได้ในตัวอย่างต่อไปนี้:

อีเมล:

< form action = "process.php" >

< label for = "email" >อีเมล:< / label >

< input type = "text" name = "email" value = "[ป้องกันอีเมล]" >

< input type = "submit" formnovalidate value = "ส่ง" >

< / form >

และตัวอย่างนี้แสดงการใช้ novalidate:

อีเมล:

< form action = "process.php" novalidate >