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

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

ลิงก์ทั้ง 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 จะมีอีสเตอร์เอ 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>

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

หมายเหตุ: เมื่อใช้ aria-labelledby คุณสามารถสร้างการเชื่อมโยงย้อนกลับจากตัวควบคุมแบบฟอร์มไปยังป้ายกำกับหลายรายการได้ ซึ่งรวมถึงข้อความที่ไม่ได้ฝังอยู่ใน <label> ไม่ว่าข้อความจะติดป้ายกำกับตัวควบคุมแบบฟอร์มมากกว่า 1 รายการหรือไม่ก็ตาม หากการควบคุมมีทั้ง <label> และ aria-labelledby aria-labelledby จะมีลําดับความสําคัญเหนือกว่า ผู้ใช้จะไม่ได้ยินข้อความ <label> เว้นแต่ aria-labelledby จะมีรหัสของป้ายกำกับ

class

แอตทริบิวต์ class เป็นวิธีเพิ่มเติมในการกำหนดเป้าหมายองค์ประกอบด้วย CSS (และ JavaScript) แต่ไม่มีไว้เพื่อวัตถุประสงค์อื่นใน HTML (แม้ว่าเฟรมเวิร์กและไลบรารีคอมโพเนนต์อาจใช้แอตทริบิวต์นี้) แอตทริบิวต์ class จะใช้ค่าเป็นรายการคลาสที่คั่นด้วยเว้นวรรคซึ่งคำนึงถึงตัวพิมพ์เล็กและใหญ่สำหรับองค์ประกอบ

หมายเหตุ: คุณสามารถเลือกองค์ประกอบได้ด้วยตัวเลือก CSS และเมธอด DOM โดยอิงตามชื่อองค์ประกอบ แอตทริบิวต์ ค่าแอตทริบิวต์ ตำแหน่งภายในต้นไม้ DOM เป็นต้น Semantic HTML มีฮุกที่สื่อความหมาย ซึ่งทำให้ไม่จำเป็นต้องเพิ่มชื่อคลาสในหลายกรณี ความแตกต่างที่ไม่ซ้ำกันระหว่างการใส่ชื่อคลาสและการใช้ document.getElementsByClassName() กับการกําหนดเป้าหมายองค์ประกอบตามแอตทริบิวต์และโครงสร้างหน้าเว็บด้วย document.querySelectorAll() ที่มีประสิทธิภาพมากกว่าคือ รายการแรกจะแสดงรายการโหนดแบบเรียลไทม์ ส่วนรายการหลังเป็นแบบคงที่

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

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

style

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

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

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

tabindex

คุณเพิ่มแอตทริบิวต์ tabindex ลงในองค์ประกอบใดก็ได้เพื่อให้องค์ประกอบนั้นรับโฟกัสได้ ค่า tabindex จะกำหนดว่าจะเพิ่มค่านั้นลงในลําดับการกด Tab หรือไม่ และเพิ่มลงในลําดับการกด 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 ขึ้นไป ระบบจะรวมองค์ประกอบเหล่านั้นไว้ในลําดับแท็บแยกต่างหาก คุณจะสังเกตได้ว่าใน CodePen การกด Tab จะเริ่มในลำดับแยกต่างหาก โดยเรียงจากค่าต่ำสุดไปสูงสุด จากนั้นจึงไปยังค่าในลำดับปกติตามลําดับแหล่งที่มา

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

role

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

วิดเจ็ต UI ทั่วไปบางรายการ เช่น combobox, menubar, tablist และ treegrid จะไม่มีรายการที่เทียบเท่าใน HTML ดั้งเดิม เช่น เมื่อสร้างรูปแบบการออกแบบแบบแท็บ คุณจะใช้บทบาท tab, tablist และ tabpanel ได้ ผู้ที่มองเห็นอินเทอร์เฟซผู้ใช้ได้จะเรียนรู้จากประสบการณ์ว่าต้องไปยังส่วนต่างๆ ของวิดเจ็ตและทำให้แผงต่างๆ ปรากฏขึ้นได้อย่างไรโดยคลิกแท็บที่เกี่ยวข้อง การรวมบทบาท tab กับ <button role="tab"> เมื่อใช้กลุ่มปุ่มเพื่อแสดงแผงต่างๆ จะช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบว่า <button> ที่มีโฟกัสอยู่ในขณะนี้สามารถเปิดแผงที่เกี่ยวข้องให้แสดงแทนการใช้ฟังก์ชันการทำงานแบบปุ่มทั่วไป

แอตทริบิวต์ role จะไม่เปลี่ยนลักษณะการทํางานของเบราว์เซอร์หรือเปลี่ยนแปลงการโต้ตอบของแป้นพิมพ์หรืออุปกรณ์พอยน์เตอร์ การเพิ่ม role="button" ลงใน <span> จะไม่เปลี่ยน <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- followed by any lowercase series of characters that don't start with xml and don't contain a colon (:)

แม้ว่า 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

ลองอีกครั้ง