เราพูดถึงแอตทริบิวต์คร่าวๆ ในภาพรวมของ HTML ถึงเวลาเจาะลึกรายละเอียดแล้ว
แอตทริบิวต์คือสิ่งที่ทำให้ HTML มีประสิทธิภาพมาก แอตทริบิวต์คือชื่อที่คั่นด้วยช่องว่างและคู่ชื่อ/ค่าที่ปรากฏในแท็กเปิด ที่ให้ข้อมูลและฟังก์ชันการทำงานขององค์ประกอบนั้นๆ
แอตทริบิวต์จะกำหนดลักษณะการทำงาน การลิงก์ และฟังก์ชันการทำงานขององค์ประกอบ แอตทริบิวต์บางรายการเป็นแอตทริบิวต์ที่ใช้ได้ทั่วโลก ซึ่งหมายความว่าจะปรากฏ ภายในแท็กเปิด ของเอลิเมนต์ใดก็ได้ แอตทริบิวต์อื่นๆ จะใช้กับหลายองค์ประกอบ แต่ไม่ใช่ทั้งหมด ในขณะที่แอตทริบิวต์อื่นๆ จะเป็นแอตทริบิวต์เฉพาะ จะเกี่ยวข้องกับองค์ประกอบ หนึ่งๆ เท่านั้น ใน HTML แอตทริบิวต์ทั้งหมดยกเว้นบูลีนและแอตทริบิวต์ที่แจกแจงในบางขอบเขตต้องมีการระบุค่า
หากค่าแอตทริบิวต์มีการเว้นวรรคหรือสัญลักษณ์พิเศษ คุณจะต้องใส่เครื่องหมายคำพูดให้กับค่าดังกล่าว ด้วยเหตุนี้ และเพื่อให้อ่านง่ายขึ้น ขอแนะนำให้ยกข้อความมาอ้างอิงเสมอ
แม้ว่า HTML จะไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ แต่ก็มีค่าแอตทริบิวต์บางค่า ค่าที่เป็นส่วนหนึ่งของข้อกำหนด HTML ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ค่าสตริงที่กําหนดไว้ เช่น ชื่อคลาสและชื่อรหัส จะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ หากค่าแอตทริบิวต์ใน HTML คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ระบบจะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่เมื่อใช้เป็นส่วนหนึ่งของตัวเลือกแอตทริบิวต์ใน CSS และใน JavaScript ไม่เช่นนั้น ก็ไม่ได้เป็นเช่นนั้น
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
แอตทริบิวต์บูลีน
หากมีแอตทริบิวต์บูลีน จะเป็นจริงเสมอ แอตทริบิวต์บูลีน ได้แก่ autofocus
, inert
, checked
, disabled
required
, reversed
, allowfullscreen
, default,
loop
, autoplay
, controls
, muted
, readonly
, multiple,
และ selected
หากมีแอตทริบิวต์เหล่านี้อย่างน้อย 1 รายการ องค์ประกอบถูกปิดใช้ จำเป็น อ่านอย่างเดียว ฯลฯ หากไม่มี ก็ไม่ใช่
โดยอาจละเว้นค่าบูลีน ตั้งค่าเป็นสตริงว่างเปล่า หรือเป็นชื่อของแอตทริบิวต์ก็ได้ แต่มูลค่าไม่จำเป็นต้อง
ตั้งค่าเป็นสตริง true
ค่าทั้งหมด รวมถึง true
, false
และ 😀
จะเปลี่ยนเป็น "จริง" แม้ว่าจะไม่ถูกต้อง
แท็กทั้ง 3 นี้เทียบเท่ากัน
<input required>
<input required="">
<input required="required">
หากค่าแอตทริบิวต์เป็น "เท็จ" ให้ข้ามแอตทริบิวต์นั้น หากแอตทริบิวต์เป็นจริง ให้ใส่แอตทริบิวต์แต่ไม่ระบุค่า
ตัวอย่างเช่น required="required"
ไม่ใช่ค่าที่ถูกต้องใน HTML แต่เนื่องจาก required
เป็นบูลีน ค่าที่ไม่ถูกต้องจะเปลี่ยนเป็น "จริง"
แต่เนื่องจากแอตทริบิวต์ที่แจกแจงที่ไม่ถูกต้องไม่จำเป็นต้องแก้ไขเป็นค่าเดียวกันกับค่าที่หายไป การเข้าถึงฟังก์ชัน
เป็นนิสัยที่จะละเว้นค่ามากกว่าที่จะจำว่าแอตทริบิวต์ใดเป็นบูลีนเทียบกับค่าที่ระบุ และอาจให้ค่าที่ไม่ถูกต้อง
เมื่อสลับระหว่าง "จริง" และ "เท็จ" ให้เพิ่มและนำแอตทริบิวต์ทั้งหมดออกด้วย JavaScript แทนที่จะสลับค่า
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
โปรดทราบว่าในภาษา XML เช่น SVG แอตทริบิวต์ทั้งหมดต้องมีค่ารวมถึงแอตทริบิวต์บูลีน
แอตทริบิวต์ที่แจกแจง
บางครั้งแอตทริบิวต์ที่แจกแจงอาจสับสนกับแอตทริบิวต์บูลีน เป็นแอตทริบิวต์ HTML ที่มีชุดค่าที่ถูกต้องและกำหนดไว้ล่วงหน้าในจำนวนจำกัด
โดยจะมีค่าเริ่มต้นหากมีแอตทริบิวต์แต่ไม่มีค่า เช่นเดียวกับแอตทริบิวต์บูลีน ตัวอย่างเช่น หากคุณใส่ <style contenteditable>
ค่าเริ่มต้นคือ <style contenteditable="true">
แต่ต่างจากแอตทริบิวต์แบบบูลีน การละเว้นแอตทริบิวต์ไม่ได้หมายความว่าแอตทริบิวต์นั้นเป็นเท็จ แอตทริบิวต์ปัจจุบันที่มีค่าขาดหายไป
ไม่จำเป็นต้องเป็นความจริง และค่าเริ่มต้นของค่าที่ไม่ถูกต้องไม่จำเป็นต้องเหมือนกับสตริงค่าว่าง ต่อจากตัวอย่าง
contenteditable
จะมีค่าเริ่มต้นเป็น inherit
หากไม่มีหรือไม่ถูกต้อง และสามารถตั้งค่าเป็น false
ได้อย่างชัดเจน
ค่าเริ่มต้นจะขึ้นอยู่กับแอตทริบิวต์ แอตทริบิวต์จะไม่เป็น "จริง" โดยอัตโนมัติ ซึ่งต่างจากค่าบูลีน หากมี หากคุณ
รวม <style contenteditable="false">
องค์ประกอบนี้ไม่สามารถแก้ไขได้ หากค่าไม่ถูกต้อง เช่น <style contenteditable="😀">
หรือน่าประหลาดใจที่ <style contenteditable="contenteditable">
ค่านี้ไม่ถูกต้องและมีค่าเริ่มต้นเป็น inherit
ในกรณีส่วนใหญ่ที่มีแอตทริบิวต์แบบแจกแจง ค่าที่หายไปและไม่ถูกต้องจะเหมือนกัน เช่น หากแอตทริบิวต์ type
ใน <input>
หายไป มี แต่ไม่มีค่า หรือมีค่าไม่ถูกต้อง ค่าเริ่มต้นจะเป็น text
แม้ว่านี่จะเป็นกฎทั่วไป แต่ก็ไม่ใช่กฎ
ด้วยเหตุนี้ คุณจึงควรทราบว่าแอตทริบิวต์ใดเป็นบูลีนเทียบกับที่ระบุ ละเว้นค่าหากทำได้ จะได้ไม่ป้อนผิดและค้นหาค่าตามที่ต้องการ
แอตทริบิวต์ร่วม
แอตทริบิวต์ร่วมคือแอตทริบิวต์ที่ตั้งค่าในองค์ประกอบ HTML ใดก็ได้ รวมถึงองค์ประกอบใน <head>
มีวิดีโอ
แอตทริบิวต์ร่วม 30 รายการ แม้ว่าในทางทฤษฎีแล้วสามารถเพิ่มรายการเหล่านี้ลงในองค์ประกอบ HTML ใดก็ได้ แต่แอตทริบิวต์ร่วมบางอย่างจะไม่มีผล
เมื่อกำหนดไว้ในองค์ประกอบบางอย่าง เช่น การตั้งค่า hidden
ใน <meta>
เนื่องจากเนื้อหาเมตาจะไม่แสดง
id
แอตทริบิวต์ร่วม id
ใช้เพื่อกำหนดตัวระบุที่ไม่ซ้ำกันสำหรับองค์ประกอบ ซึ่งใช้ได้หลายวัตถุประสงค์ ดังนี้
- เป้าหมายของตัวระบุส่วนย่อยของลิงก์
- การระบุองค์ประกอบสำหรับการเขียนสคริปต์
- การเชื่อมโยงองค์ประกอบของแบบฟอร์มกับป้ายกำกับ
- การระบุป้ายกำกับหรือคำอธิบายสำหรับเทคโนโลยีความช่วยเหลือพิเศษ
- การกำหนดเป้าหมายสไตล์ด้วย (ความเฉพาะเจาะจงสูงหรือเป็นตัวเลือกแอตทริบิวต์) ใน CSS
ค่า id
เป็นสตริงที่ไม่มีการเว้นวรรค หากมีการเว้นวรรค เอกสารจะไม่เสียหาย แต่คุณจะต้องกำหนดเป้าหมาย
id
โดยใช้อักขระหลีกใน HTML, CSS และ JS อักขระอื่นๆ ทั้งหมดถูกต้อง ค่า id
อาจเป็น 😀
หรือ .class
แต่ไม่ใช่แนวคิดที่ดี เพื่อให้เขียนโปรแกรมได้ง่ายขึ้นสำหรับตัวเองในอนาคตและในอนาคต โปรดทำให้อักขระตัวแรกของ id
เป็นตัวอักษร
และใช้ตัวอักษร ASCII, ตัวเลข, _
และ -
เท่านั้น คุณควรตั้งรูปแบบการตั้งชื่อ id
ขึ้นมาและยึดตามนั้น
เนื่องจากค่า id
คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
id
ไม่ควรซ้ำกันในเอกสาร เลย์เอาต์ของหน้าอาจจะไม่เสียหายหากใช้ id
มากกว่า 1 ครั้ง
แต่การโต้ตอบของ JavaScript, ลิงก์ และองค์ประกอบต่างๆ อาจไม่ทำงานตามที่คาดไว้
ตัวระบุส่วนย่อยของลิงก์
แถบนำทางจะมีลิงก์ 4 รายการ เราจะพูดถึงองค์ประกอบของลิงก์ในภายหลัง แต่ในตอนนี้โปรดทราบว่าลิงก์ไม่ได้ถูกจำกัด ไปยัง URL แบบ HTTP อาจเป็นตัวระบุส่วนย่อยของส่วนของหน้าในเอกสารปัจจุบัน (หรือในเอกสารอื่นๆ)
ในเว็บไซต์เวิร์กช็อปแมชชีนเลิร์นนิง แถบนำทางในส่วนหัวของหน้ามีลิงก์ 4 ลิงก์ดังนี้
แอตทริบิวต์ href มีไฮเปอร์ลิงก์ที่การเปิดใช้งานลิงก์จะนำผู้ใช้ไปยังหน้า เมื่อ URL มีเครื่องหมายแฮช (#
)
ตามด้วยสตริงอักขระ สตริงนั้นคือตัวระบุส่วนย่อย หากสตริงนั้นตรงกับ id
ขององค์ประกอบในองค์ประกอบ
หน้าเว็บ ส่วนย่อยคือ Anchor หรือบุ๊กมาร์กไปยังองค์ประกอบนั้นๆ เบราว์เซอร์จะเลื่อนไปยังจุดที่กำหนดจุดยึด
ลิงก์ 4 ลิงก์เหล่านี้ชี้ไปยัง 4 ส่วนของหน้าเว็บที่ระบุโดยแอตทริบิวต์ id
เมื่อผู้ใช้คลิกที่อย่างใดอย่างหนึ่ง
4 ลิงก์ในแถบนำทาง องค์ประกอบที่ลิงก์ด้วยตัวระบุส่วนย่อย องค์ประกอบที่มีรหัสที่ตรงกัน
ลบ #
เลื่อนดู
เนื้อหา <main>
ของเวิร์กช็อปแมชชีนเลิร์นนิงมี 4 ส่วนที่มีรหัส เมื่อผู้เข้าชมเว็บไซต์คลิกที่หนึ่งใน
ลิงก์ใน <nav>
ส่วนที่มีตัวระบุส่วนย่อยนั้นจะเลื่อนเข้ามาในมุมมอง มาร์กอัปมีลักษณะการทำงานดังต่อไปนี้
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
การเปรียบเทียบตัวระบุส่วนย่อยในลิงก์ <nav>
คุณจะพบว่าแต่ละรายการตรงกับ id
ของ <section>
ใน <main>
เบราว์เซอร์ให้เรา "ด้านบนของหน้า" ฟรี ลิงก์ การตั้งค่า href="#top"
ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ หรือเพียงแค่ href="#"
จะเลื่อน
ที่ด้านบนของหน้า
ตัวคั่นเครื่องหมายแฮชใน href
ไม่ได้เป็นส่วนหนึ่งของตัวระบุส่วนย่อย ตัวระบุส่วนย่อยจะเป็นตัวสุดท้ายเสมอ
ของ URL และไม่ถูกส่งไปยังเซิร์ฟเวอร์
ตัวเลือก CSS
ใน CSS คุณสามารถกำหนดเป้าหมายแต่ละส่วนได้โดยใช้ตัวเลือกรหัส เช่น #feedback
หรือสำหรับความจำเพาะที่น้อยลงโดยพิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
ตัวเลือกแอตทริบิวต์ [id="feedback"]
การเขียนสคริปต์
ใน MLW.com มี Easter Egg สำหรับผู้ใช้เมาส์เท่านั้น การคลิกสวิตช์ไฟจะเป็นการเปิดและปิดหน้าเว็บ
มาร์กอัปสำหรับรูปภาพสวิตช์ไฟคือ
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
แอตทริบิวต์ id
สามารถใช้เป็นพารามิเตอร์สำหรับเมธอด getElementById()
และมีคำนำหน้า #
เป็นส่วนหนึ่งของ
พารามิเตอร์สำหรับเมธอด querySelector()
และ querySelectorAll()
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
ฟังก์ชัน JavaScript หนึ่งของเราจะใช้ความสามารถในการกำหนดเป้าหมายองค์ประกอบตามแอตทริบิวต์ id
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
องค์ประกอบ HTML <label>
มีแอตทริบิวต์ for
ที่ใช้เป็นค่า id
ของตัวควบคุมแบบฟอร์มซึ่งเชื่อมโยงกับองค์ประกอบนี้
การสร้างป้ายกำกับที่ชัดเจนโดยการรวม id
ไว้ในตัวควบคุมแบบฟอร์มทั้งหมด และจับคู่แต่ละรายการกับแอตทริบิวต์ for
ของป้ายกำกับจะช่วยให้มั่นใจได้ว่า
ตัวควบคุมฟอร์มทุกรายการมีป้ายกำกับที่เชื่อมโยง
แม้ว่าป้ายกำกับแต่ละรายการจะเชื่อมโยงกับการควบคุมแบบฟอร์มได้ 1 รายการเท่านั้น แต่ตัวควบคุมแบบฟอร์มอาจมีป้ายกำกับที่เชื่อมโยงอยู่มากกว่า 1 รายการ
หากการควบคุมแบบฟอร์มซ้อนกันระหว่างแท็กเปิดและแท็กปิด <label>
แอตทริบิวต์ for
และ id
ไม่จำเป็น ซึ่งเรียกว่า "โดยนัย" ป้ายกำกับ ป้ายกำกับช่วยให้ผู้ใช้ทุกคนทราบว่าการควบคุมแบบฟอร์มแต่ละรายการมีไว้เพื่ออะไร
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
การเชื่อมโยงระหว่าง for
และ id
ช่วยให้ผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษเข้าถึงข้อมูลนี้ได้ นอกจากนี้
การคลิกที่ใดก็ได้บนป้ายกำกับจะเป็นการโฟกัสที่องค์ประกอบที่เกี่ยวข้อง ซึ่งขยายพื้นที่การคลิกของการควบคุม ฟีเจอร์นี้มีประโยชน์
สำหรับผู้ที่มีปัญหาเกี่ยวกับความคล่องแคล่ว ทำให้การชี้เมาส์แม่นยำน้อยลง โมเดลนี้ยังช่วยให้ผู้ใช้อุปกรณ์เคลื่อนที่ทุกคนที่มีนิ้วกว้างกว่าวิทยุ
ในตัวอย่างโค้ดนี้ คำถามปลอมที่ 5 ของแบบทดสอบปลอมจะเป็นคำถามแบบเลือกตอบข้อเดียว ตัวควบคุมแบบฟอร์มแต่ละรายการจะมี
โดยมี id
ที่ไม่ซ้ำกันสำหรับแต่ละรายการ ค่ารหัสคือการผสมกันระหว่างหมายเลขคำถามกับค่า เพื่อไม่ให้เราทำรหัสซ้ำโดยไม่ตั้งใจ
ในการรวมปุ่มตัวเลือก เนื่องจากป้ายกำกับอธิบายค่าของปุ่มตัวเลือก เราจึงรวมปุ่มต่างๆ ที่มีชื่อเหมือนกันทั้งหมดใน <fieldset>
โดย <legend>
เป็นป้ายกำกับ หรือคำถามสำหรับทั้งชุด
การใช้งานการช่วยเหลือพิเศษอื่นๆ
การใช้ id
ในการช่วยเหลือพิเศษและความสามารถในการใช้งานไม่ได้จำกัดเฉพาะป้ายกำกับ ในบทแนะนำเกี่ยวกับข้อความ <section>
แปลงเป็นจุดสังเกตของภูมิภาคโดยอ้างอิง id
ของ <h2>
เป็นค่า aria-labelledby
ของ <section>
เพื่อระบุ
ชื่อที่เข้าถึงได้:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
aria-*
มีสถานะและพร็อพเพอร์ตี้มากกว่า 50 รายการที่ใช้เพื่อให้มีการช่วยเหลือพิเศษได้ aria-labelledby
, aria-describedby
aria-details
และ aria-owns
ใช้ค่าอ้างอิงเป็นรายการอ้างอิง id
ที่คั่นด้วยช่องว่าง aria-activedescendant
ซึ่ง
ระบุองค์ประกอบสืบทอดที่โฟกัสอยู่ในปัจจุบัน โดยใช้เป็นค่าอ้างอิง id
เดียว ซึ่งเป็นค่าขององค์ประกอบเดี่ยว
ที่มีโฟกัส (โฟกัสได้ครั้งละ 1 องค์ประกอบเท่านั้น)
class
แอตทริบิวต์ class
เป็นวิธีเพิ่มเติมสำหรับการกำหนดเป้าหมายองค์ประกอบด้วย CSS (และ JavaScript) แต่ไม่ได้ตอบสนองวัตถุประสงค์อื่นๆ
เป็น HTML (แต่เฟรมเวิร์กและไลบรารีคอมโพเนนต์อาจใช้สิ่งเหล่านี้) แอตทริบิวต์คลาสจะใช้ค่าเป็นรายการที่คั่นด้วยช่องว่าง
ของคลาสที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ของเอลิเมนต์
การสร้างโครงสร้างการสื่อความหมายเสียงช่วยให้กำหนดเป้าหมายองค์ประกอบได้ตามตำแหน่งและฟังก์ชัน โครงสร้างเสียง ทำให้สามารถใช้ตัวเลือกองค์ประกอบสืบทอด ตัวเลือกเชิงสัมพันธ์ และตัวเลือกแอตทริบิวต์ ในขณะที่คุณเรียนรู้เกี่ยวกับแอตทริบิวต์ ตลอดทั้งส่วนนี้ ลองพิจารณาวิธีจัดรูปแบบองค์ประกอบที่มีแอตทริบิวต์หรือค่าแอตทริบิวต์เดียวกัน ไม่ได้ว่าคุณ ไม่ควรใช้แอตทริบิวต์ class เนื่องจากนักพัฒนาซอฟต์แวร์ส่วนใหญ่ไม่ทราบว่ามักไม่จำเป็น
ตอนนี้ MLW แล้วยังไม่ได้ใช้คลาสใดๆ สามารถเปิดตัวเว็บไซต์โดยไม่มีชื่อชั้นเรียนเดียวได้หรือไม่ เราจะคอยดูกัน
style
แอตทริบิวต์ style
จะเปิดใช้รูปแบบแทรกในบรรทัด ซึ่งเป็นรูปแบบที่ใช้กับองค์ประกอบเดียวที่มีการตั้งค่าแอตทริบิวต์
แอตทริบิวต์ style
จะนำค่าเป็นคู่ค่าพร็อพเพอร์ตี้ CSS ซึ่งมีไวยากรณ์ของค่าเหมือนกับเนื้อหาของแอตทริบิวต์
บล็อกรูปแบบ CSS: พร็อพเพอร์ตี้จะตามด้วยเครื่องหมายโคลอนเหมือนกับใน CSS และเซมิโคลอนจะจบการประกาศแต่ละรายการที่อยู่หลังค่า
สไตล์จะใช้กับองค์ประกอบที่มีการตั้งค่าแอตทริบิวต์เท่านั้น โดยองค์ประกอบสืบทอดจะรับค่าพร็อพเพอร์ตี้ที่รับค่ามาหากไม่
ถูกลบล้างโดยการประกาศรูปแบบอื่นๆ ในองค์ประกอบที่ฝังหรือใน <style>
หรือบล็อกหรือสไตล์ชีต เนื่องจากค่าประกอบด้วยสิ่งที่เทียบเท่ากับเนื้อหา
ของบล็อกรูปแบบเดียวที่ใช้กับองค์ประกอบนั้นๆ เท่านั้น และไม่สามารถใช้กับเนื้อหาที่สร้างขึ้น เพื่อสร้างภาพเคลื่อนไหวของคีย์เฟรม หรือเพื่อใช้
ในกฎอื่นๆ
แม้ว่า style
จะเป็นแอตทริบิวต์ส่วนกลางอยู่แล้ว แต่ไม่แนะนำให้ใช้ แต่ให้กำหนดรูปแบบในไฟล์แยกต่างหากหรือแต่ละไฟล์แยกกัน
อย่างไรก็ตาม แอตทริบิวต์ style
อาจมีประโยชน์ในระหว่างการพัฒนาเพื่อให้ใช้การจัดรูปแบบได้อย่างรวดเร็ว เช่น เพื่อการทดสอบ จากนั้นใช้
"โซลูชัน" จัดรูปแบบและใส่ไว้ในไฟล์ CSS ที่ลิงก์
tabindex
คุณเพิ่มแอตทริบิวต์ tabindex
ลงในองค์ประกอบใดก็ได้เพื่อให้รับโฟกัสได้ ค่า tabindex
จะกำหนดว่า
จะเพิ่มลงในลำดับแท็บ และอาจรวมถึงลำดับแท็บที่ไม่ใช่ค่าเริ่มต้น
แอตทริบิวต์ tabindex
จะนำค่าเป็นจำนวนเต็ม ค่าลบ (ธรรมเนียมคือการใช้ -1
) จะทำให้องค์ประกอบสามารถ
ของการรับโฟกัส เช่น ผ่าน JavaScript แต่ไม่ได้เพิ่มองค์ประกอบลงในลำดับแท็บ ค่า tabindex
ของ 0
ทําให้
องค์ประกอบที่โฟกัสได้และเข้าถึงได้ผ่านการกด Tab และเพิ่มในลำดับแท็บเริ่มต้นของหน้าตามลำดับซอร์สโค้ด ค่า 1
หรือมากกว่าจะทำให้องค์ประกอบอยู่ในลำดับการโฟกัสที่มีลำดับความสำคัญสูง เราจึงไม่แนะนำ
ในหน้านี้ มีฟังก์ชันการแชร์ที่ใช้องค์ประกอบที่กำหนดเอง <share-action>
ซึ่งทำหน้าที่เป็น <button>
tabindex
ของ 0
อยู่เพื่อเพิ่มองค์ประกอบที่กำหนดเองลงในลำดับการใช้แท็บเริ่มต้นของแป้นพิมพ์:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
role
จาก button
แจ้งให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบว่าองค์ประกอบนี้ควรมีลักษณะการทำงานเหมือนปุ่ม เราใช้ JavaScript เพื่อให้แน่ใจว่า
ฟังก์ชันของปุ่มจะยังคงเดิม รวมถึงการจัดการทั้งเหตุการณ์ click และ keydown รวมถึงการจัดการการกดแป้น Enter และ Space
ตัวควบคุมแบบฟอร์ม ลิงก์ ปุ่ม และองค์ประกอบเนื้อหาที่แก้ไขได้จะโฟกัสได้ เมื่อผู้ใช้แป้นพิมพ์กดแป้น Tab
โฟกัสจะย้ายไปยังองค์ประกอบที่โฟกัสได้ถัดไปราวกับว่าได้ตั้งค่าtabindex="0"
ไว้ ไม่สามารถโฟกัสองค์ประกอบอื่นๆ ได้โดยค่าเริ่มต้น กำลังเพิ่ม tabindex
ให้กับองค์ประกอบเหล่านั้น ช่วยให้พวกเขาได้รับการโฟกัสทั้งๆ ที่อาจไม่ได้เป็นเช่นนั้น
หากเอกสารมีองค์ประกอบที่มี tabindex
ตั้งแต่ 1
ขึ้นไป ระบบจะรวมองค์ประกอบเหล่านั้นไว้ในลำดับแท็บที่แยกต่างหาก คุณจะสังเกตได้จากตัวแปลงรหัส
การเลือกแท็บจะเริ่มต้นในลำดับที่แยกต่างหาก โดยเรียงจากค่าต่ำสุดไปค่าสูงสุด ก่อนไปยังลำดับปกติตามลำดับที่มา
การเปลี่ยนลำดับแท็บอาจสร้างประสบการณ์ที่ไม่ดีแก่ผู้ใช้ ทำให้การพึ่งพาเทคโนโลยีความช่วยเหลือพิเศษ เช่น แป้นพิมพ์และโปรแกรมอ่านหน้าจอ ควบคุมทิศทางได้ยาก เนื้อหาของคุณ นอกจากนี้ ยังเป็นเรื่องยากในฐานะนักพัฒนาแอปในการจัดการและบำรุงรักษา การมุ่งเน้นเป็นสิ่งสำคัญ โมดูลนี้พูดถึงการมุ่งเน้นและลำดับขั้น
role
แอตทริบิวต์ role
เป็นส่วนหนึ่งของข้อกำหนด ARIA
แทนที่จะเป็นข้อกำหนด WHATWG HMTL แอตทริบิวต์ role
สามารถ
ใช้เพื่อให้ความหมายในเชิงความหมายแก่เนื้อหา ทำให้โปรแกรมอ่านหน้าจอสามารถแจ้งให้ผู้ใช้เว็บไซต์ทราบถึงการโต้ตอบที่ผู้ใช้คาดว่าจะได้รับ
มีวิดเจ็ต UI อยู่บ้าง เช่น combobox
แถบเมนู, รายการแท็บ
และ Treegrids ที่ไม่มี HTML ที่เทียบเท่ากันแบบดั้งเดิม
ตัวอย่างเช่น เมื่อสร้างรูปแบบการออกแบบที่เป็นแท็บ tab
, tablist
และ
บทบาท tabpanel
ได้ ผู้ที่มองเห็น
อินเทอร์เฟซผู้ใช้ได้เรียนรู้จากประสบการณ์ในการไปยังส่วนต่างๆ ของวิดเจ็ตและทำให้แผงต่างๆ มองเห็นได้โดยการคลิกแท็บที่เกี่ยวข้อง
การใส่บทบาท tab
ด้วย <button role="tab">
เมื่อมีการใช้กลุ่มปุ่มต่างๆ เพื่อแสดงแผงต่างๆ ช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบ
<button>
ที่โฟกัสอยู่สามารถสลับแผงที่เกี่ยวข้องให้เป็นมุมมองแทนการใช้ฟังก์ชันการทำงานที่เหมือนปุ่มทั่วไป
แอตทริบิวต์ role
จะไม่เปลี่ยนลักษณะการทำงานของเบราว์เซอร์หรือเปลี่ยนแปลงการโต้ตอบกับแป้นพิมพ์หรืออุปกรณ์ตัวชี้ โดยการเพิ่ม role="button"
ลงใน <span>
ไม่เปลี่ยนเป็น <button>
ด้วยเหตุนี้ เราจึงแนะนำให้ใช้องค์ประกอบ HTML เชิงความหมายตามวัตถุประสงค์ อย่างไรก็ตาม เมื่อใช้
ใส่องค์ประกอบที่ถูกต้องไม่ได้ แอตทริบิวต์ role
จะช่วยให้แจ้งผู้ใช้โปรแกรมอ่านหน้าจอได้เมื่อมีการปรับองค์ประกอบที่ไม่มีความหมาย
เป็นบทบาทขององค์ประกอบเชิงความหมาย
contenteditable
องค์ประกอบที่ตั้งค่าแอตทริบิวต์ contenteditable
เป็น true
จะแก้ไข โฟกัสได้ และเพิ่มลงในลำดับแท็บเสมือนว่า
ตั้งค่า tabindex="0"
แล้ว Contenteditable
เป็นแอตทริบิวต์แบบแจกแจงที่รองรับค่า true
และ false
โดยมีค่าเริ่มต้นเป็น inherit
หากไม่มีแอตทริบิวต์หรือมีค่าที่ไม่ถูกต้อง
แท็กเปิดทั้ง 3 แท็กมีค่าเท่ากัน
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
หากคุณใส่ <style contenteditable="false">
องค์ประกอบนั้นจะไม่สามารถแก้ไขได้ (ยกเว้นกรณีที่แก้ไขได้โดยค่าเริ่มต้น เช่น <textarea>
)
หากค่าไม่ถูกต้อง เช่น <style contenteditable="😀">
หรือ <style contenteditable="contenteditable">
ค่าเริ่มต้นจะเป็น inherit
หากต้องการสลับระหว่างสถานะ ให้ค้นหาค่าของพร็อพเพอร์ตี้ HTMLElement.isContentEditable แบบอ่านอย่างเดียว
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
หรือจะระบุพร็อพเพอร์ตี้นี้โดยการตั้งค่า editor.contentEditable
เป็น true
, false
หรือ inherit
ก็ได้
แอตทริบิวต์ร่วมใช้ได้กับองค์ประกอบทั้งหมด รวมถึงองค์ประกอบ <style>
คุณสามารถใช้แอตทริบิวต์และ CSS เล็กน้อยเพื่อสร้างโปรแกรมแก้ไข CSS แบบสด
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
ลองเปลี่ยน color
ของ style
เป็นอย่างอื่นที่ไม่ใช่ inherit
จากนั้นลองเปลี่ยน style
เป็นตัวเลือก p
อย่านำคุณสมบัติการแสดงผลออก มิฉะนั้นบล็อกรูปแบบจะหายไป
แอตทริบิวต์ที่กำหนดเอง
เราได้แสดงแอตทริบิวต์ร่วมของ HTML เท่านั้น นอกจากนี้ยังมีแอตทริบิวต์ที่ใช้กับองค์ประกอบเพียงชุดเดียวหรือชุดที่จำกัด แม้จะมีแอตทริบิวต์ที่กำหนดไว้หลายร้อยรายการ แต่คุณอาจมีแอตทริบิวต์ที่ไม่อยู่ในข้อกำหนดเฉพาะ HTML ช่วยคุณได้
ซึ่งสามารถสร้างแอตทริบิวต์ที่กำหนดเองได้ตามต้องการโดยเพิ่มคำนำหน้า data-
คุณตั้งชื่อแอตทริบิวต์ใดก็ได้ที่ขึ้นต้นด้วย data-
ตามด้วยชุดอักขระตัวพิมพ์เล็กที่ไม่ได้ขึ้นต้นด้วย xml
และไม่มีโคลอน (:
)
แม้ว่า HTML จะไม่เสียหายอะไรและจะไม่เสียหาย หากคุณสร้างแอตทริบิวต์ที่ไม่รองรับซึ่งไม่ได้ขึ้นต้นด้วย data
หรือจะเริ่มต้น
แอตทริบิวต์ที่กำหนดเองโดยใช้ xml
หรือมี :
จะสร้างแอตทริบิวต์ที่กำหนดเองที่ถูกต้องซึ่งขึ้นต้นด้วย data-
มีประโยชน์
แอตทริบิวต์ข้อมูลที่กำหนดเองจะทำให้คุณทราบว่าไม่ได้ใช้ชื่อแอตทริบิวต์ที่มีอยู่โดยไม่ได้ตั้งใจ แอตทริบิวต์ข้อมูลที่กำหนดเองช่วยให้ประสบความสำเร็จในระยะยาว
แม้ว่าเบราว์เซอร์จะไม่ใช้ลักษณะการทํางานเริ่มต้นสําหรับแอตทริบิวต์ที่มี data-
คํานําหน้าที่เฉพาะเจาะจง แต่ก็มี API ชุดข้อมูลในตัว
เพื่อทำซ้ำผ่านแอตทริบิวต์ที่กำหนดเอง พร็อพเพอร์ตี้ที่กำหนดเองเป็นวิธีที่ยอดเยี่ยมในการสื่อสารข้อมูลเฉพาะแอปพลิเคชัน
ผ่าน JavaScript เพิ่มแอตทริบิวต์ที่กำหนดเองลงในองค์ประกอบในรูปแบบ data-name
และเข้าถึงแอตทริบิวต์เหล่านี้ผ่าน DOM โดยใช้ dataset[name]
ในองค์ประกอบที่เป็นปัญหา
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
คุณสามารถใช้ getAttribute()
โดยใช้ชื่อแอตทริบิวต์แบบเต็มหรือใช้ประโยชน์จากพร็อพเพอร์ตี้ dataset
ที่ใช้ง่ายขึ้นก็ได้
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
พร็อพเพอร์ตี้ dataset
จะแสดงผลออบเจ็กต์ DOMStringMap
ของแอตทริบิวต์ data-
ของแต่ละองค์ประกอบ มีแอตทริบิวต์ที่กำหนดเองหลายรายการ
ในวันที่ <blockquote>
พร็อพเพอร์ตี้ชุดข้อมูลหมายความว่าคุณไม่จำเป็นต้องทราบว่าแอตทริบิวต์ที่กำหนดเองเหล่านั้นคืออะไรเพื่อเข้าถึง
ชื่อและค่า:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
แอตทริบิวต์ในบทความนี้ใช้กับส่วนกลางได้ ซึ่งหมายความว่าสามารถใช้กับองค์ประกอบ HTML ใดก็ได้ (แม้ว่าแอตทริบิวต์เหล่านี้จะไม่ได้มีผลกับ
องค์ประกอบเหล่านั้น) ต่อไป เราจะมาดูแอตทริบิวต์ทั้ง 2 อย่างจากรูปภาพแนะนำที่เราไม่ได้ระบุ ซึ่งได้แก่ target
และ href
และ
แอตทริบิวต์เฉพาะองค์ประกอบอื่นๆ อีกหลายรายการเมื่อเราเจาะลึกลงไปในลิงก์
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับแอตทริบิวต์
id
ต้องไม่ซ้ำกันในเอกสาร
เลือกแอตทริบิวต์ที่กำหนดเองซึ่งมีรูปแบบถูกต้อง
data:birthday
birthday
data-birthday