เราได้พูดถึงแอตทริบิวต์ไปคร่าวๆ ในภาพรวมของ 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>&</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
และแอตทริบิวต์เฉพาะองค์ประกอบอื่นๆ อีกหลายรายการ เมื่อเราตรวจสอบลิงก์อย่างละเอียด
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับแอตทริบิวต์
id
ไม่ควรซ้ำกันในเอกสาร
เลือกแอตทริบิวต์ที่กำหนดเองซึ่งมีรูปแบบถูกต้อง
data-birthday
birthday
data:birthday