แอตทริบิวต์

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

เราได้กล่าวถึงแอตทริบิวต์โดยย่อในภาพรวมของ 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">

อย่างไรก็ตาม การละเว้นแอตทริบิวต์ไม่ได้หมายความว่าจะเป็นเท็จ แอตทริบิวต์ที่มีค่าหายไป ไม่จำเป็นต้องเป็นจริง และค่าเริ่มต้นสำหรับค่าที่ไม่ถูกต้องไม่จำเป็นต้องเหมือนกับสตริง Null จากตัวอย่างเดิม 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 หรือบุ๊กมาร์กขององค์ประกอบนั้น เบราว์เซอร์จะเลื่อนไปยังจุดที่กำหนด Anchor

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

<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 ไม่ใช่ส่วนหนึ่งของตัวระบุส่วนย่อย ตัวระบุ Fragment จะเป็นส่วนสุดท้ายของ URL เสมอและจะไม่ถูกส่งไปยังเซิร์ฟเวอร์

ตัวเลือก CSS

ใน CSS คุณสามารถกำหนดเป้าหมายแต่ละส่วนได้โดยใช้ตัวเลือก ID เช่น #feedback หรือสำหรับความเฉพาะเจาะจงที่น้อยกว่า ให้ใช้ตัวเลือกแอตทริบิวต์ที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ [id="feedback"]

การเขียนสคริปต์

ใน MLW.com มีไข่อีสเตอร์สำหรับผู้ใช้เมาส์เท่านั้น การคลิกสวิตช์ไฟจะเปิดและปิดหน้า

มาร์กอัปสำหรับรูปภาพสวิตช์ไฟมีดังนี้ 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 จะกำหนดว่าจะเพิ่มค่าดังกล่าวลงในลำดับแท็บหรือไม่ และจะเพิ่มลงในลำดับการกด Tab ที่ไม่ใช่ค่าเริ่มต้นหรือไม่ (ไม่บังคับ)

แอตทริบิวต์ tabindex จะใช้จำนวนเต็มเป็นค่า ค่าลบ (ธรรมเนียมคือการใช้ -1) จะทําให้องค์ประกอบรับโฟกัสได้ เช่น ผ่าน JavaScript แต่จะไม่เพิ่มองค์ประกอบลงในลําดับการกด Tab ค่า tabindex เป็น 0 จะทำให้องค์ประกอบสามารถโฟกัสและเข้าถึงได้ผ่านการกด Tab โดยจะเพิ่มองค์ประกอบดังกล่าวลงในลำดับการกด Tab เริ่มต้นของหน้าตามลำดับในซอร์สโค้ด ค่า 1 หรือมากกว่าจะทำให้องค์ประกอบอยู่ในลำดับการโฟกัสที่มีลำดับความสำคัญและไม่แนะนำ

ในหน้านี้มีฟังก์ชันการแชร์ที่ใช้<share-action>องค์ประกอบที่กำหนดเองซึ่งทำหน้าที่เป็น<button> ระบบจะรวม tabindex ของศูนย์ เพื่อเพิ่มองค์ประกอบที่กำหนดเองลงในลำดับการกด Tab เริ่มต้นของแป้นพิมพ์

<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

การควบคุมแบบฟอร์ม ลิงก์ ปุ่ม และองค์ประกอบ contenteditable จะรับโฟกัสได้ เมื่อผู้ใช้แป้นพิมพ์กดแป้น Tab โฟกัสจะย้ายไปยังองค์ประกอบที่โฟกัสได้ถัดไปราวกับว่าได้tabindex="0"ตั้งค่าไว้ องค์ประกอบอื่นๆ จะโฟกัสไม่ได้โดยค่าเริ่มต้น การเพิ่มแอตทริบิวต์ tabindex ลงในองค์ประกอบเหล่านั้นจะช่วยให้องค์ประกอบได้รับโฟกัสในกรณีที่ไม่ได้โฟกัส

หากเอกสารมีองค์ประกอบที่มี tabindex ตั้งแต่ 1 ขึ้นไป องค์ประกอบเหล่านั้นจะรวมอยู่ในลำดับแท็บแยกต่างหาก ดังที่คุณจะเห็นใน Codepen การกด Tab จะเริ่มต้นในลำดับแยกต่างหาก โดยเรียงตามค่าจากต่ำสุดไปสูงสุด ก่อนที่จะไปยังรายการในลำดับปกติตามลำดับแหล่งที่มา

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

role

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

มีวิดเจ็ต UI ทั่วไปบางรายการ เช่น กล่องคำสั่งผสม แถบเมนู รายการแท็บ และตารางแบบต้นไม้ ที่ไม่มีเทียบเท่า 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 อย่านำพร็อพเพอร์ตี้ display ออก มิฉะนั้นบล็อกสไตล์จะหายไป

แอตทริบิวต์ที่กำหนดเอง

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

ทดสอบความเข้าใจ

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