Attributes

เราได้พูดถึงแอตทริบิวต์ไปคร่าวๆ ในภาพรวมของ HTML แล้ว ถึงเวลาเจาะลึกกันแล้ว

แอตทริบิวต์คือสิ่งที่ทำให้ 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 อย่างชัดแจ้งได้

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

ลิงก์ทั้ง 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 1 ฟังก์ชันของเราใช้ประโยชน์จากความสามารถในการกำหนดเป้าหมายองค์ประกอบตามแอตทริบิวต์ 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 รายการ

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

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

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

style

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

รูปแบบจะใช้กับองค์ประกอบที่มีการตั้งค่าแอตทริบิวต์เท่านั้น โดยองค์ประกอบสืบทอดจะรับค่าพร็อพเพอร์ตี้ที่รับช่วงมาหากไม่มีการลบล้างโดยการประกาศสไตล์อื่นๆ ในองค์ประกอบที่ฝัง หรือในบล็อก <style> หรือสไตล์ชีต เนื่องจากค่าดังกล่าวประกอบด้วยเนื้อหาของบล็อกสไตล์รายการเดียวที่ใช้กับองค์ประกอบนั้นเท่านั้น จึงไม่สามารถใช้กับเนื้อหาที่สร้างขึ้น เพื่อสร้างภาพเคลื่อนไหวของคีย์เฟรม หรือใช้กฎที่กฎอื่นๆ ได้

ถึงแม้ style จะเป็นแอตทริบิวต์ส่วนกลาง แต่ไม่แนะนำให้ใช้ แต่ให้กำหนดรูปแบบในไฟล์แยกต่างหากหรือไฟล์อื่น อย่างไรก็ตาม แอตทริบิวต์ style จะมีประโยชน์ในระหว่างการพัฒนาเพื่อให้จัดรูปแบบได้อย่างรวดเร็ว เช่น เพื่อใช้ในการทดสอบ จากนั้นใช้สไตล์ "โซลูชัน" แล้วใส่ไว้ในไฟล์ CSS ที่ลิงก์

tabindex

เพิ่มแอตทริบิวต์ tabindex ลงในองค์ประกอบใดก็ได้เพื่อให้องค์ประกอบนั้นรับโฟกัสได้ ค่า tabindex จะกำหนดว่าจะเพิ่มค่าในลำดับแท็บ และอาจเพิ่มในลำดับการกด Tab ที่ไม่ใช่ค่าเริ่มต้นหรือไม่

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

ในหน้านี้ มีฟังก์ชันการแชร์ที่ใช้องค์ประกอบที่กำหนดเอง <share-action> ซึ่งทำหน้าที่เป็น <button> ระบบจะรวม tabindex ของ 0 เพื่อเพิ่มองค์ประกอบที่กำหนดเองลงในลำดับการกด 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

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

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

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

role

แอตทริบิวต์ role เป็นส่วนหนึ่งของข้อกำหนด ARIA แทนที่จะเป็นข้อกำหนด WHATWG HMTL แอตทริบิวต์ 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 หากไม่มีแอตทริบิวต์หรือมีค่าที่ไม่ถูกต้อง

แท็กเปิดทั้งสามนี้มีเหมือนกัน

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

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

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