Attributes

เราพูดถึงแอตทริบิวต์คร่าวๆ ในภาพรวมของ 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>&amp;</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 และ แอตทริบิวต์เฉพาะองค์ประกอบอื่นๆ อีกหลายรายการเมื่อเราเจาะลึกลงไปในลิงก์

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับแอตทริบิวต์