HTML attributes กำหนดคุณสมบัติเพิ่มเติมสำหรับ HTML elements พวกมันถูกระบุในแท็กเปิดของ HTML element และบาง elements ต้องการ attribute เพื่อทำงาน
HTML attributes คืออะไร และใช้อย่างไร? เมื่อคุณเรียน HTML คุณอาจพบคำว่า attributes Attributes ใช้ให้ข้อมูลเพิ่มเติมเกี่ยวกับ element เฉพาะบนหน้า HTML
Attributes ถูกระบุในแท็กเปิดของเอกสาร HTML และมักระบุในคู่ name/value pair ตัวอย่างเช่น attribute ชื่อ name ที่มีค่า value จะปรากฏแบบนี้: name=value
บทช่วยสอนนี้จะอภิปราย พร้อมตัวอย่าง พื้นฐานของ attributes ใน HTML และทำไมจึงใช้ พร้อมอภิปราย attributes ทั่วไปบางอย่างที่ใช้กับ elements ส่วนใหญ่ใน HTML และที่คุณมีโอกาสเจอมากที่สุดเมื่อเขียนโค้ด
HTML Attributes คืออะไร?
ทุก element ในภาษามาร์กอัป HTML สามารถมี attribute ได้ ซึ่งใช้กำหนดคุณสมบัติเพิ่มเติมที่ element นั้นครอบครอง
ตัวอย่างเช่น เราอาจต้องการระบุ attribute ที่กำหนดความสูงของรูปภาพ หรือค่าที่จัดเก็บโดย element ฟอร์ม Attributes เหล่านี้เฉพาะเจาะจงต่อ element หมายความว่าสามารถใช้ปรับแต่งวิธีการทำงานของ element บนหน้าเว็บได้
ในบางกรณี attributes จำเป็นสำหรับ element ตัวอย่างเช่น หากคุณทำงานกับแท็ก HTML <a> คุณต้องกำหนด attribute href เพื่อให้แท็กทราบว่าเมื่อคลิกควรชี้ไปที่ URL ไหน
Attribute ใน HTML มี 2 ส่วนประกอบ:
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
- name กำหนดชื่อของ attribute ที่คุณสร้าง
- value กำหนดค่าที่ attribute ครอบครอง
สมมติเราต้องการกำหนดลิงก์ที่ชี้ไปหน้าแรกของเว็บไซต์ Career Karma เพื่อทำเช่นนั้น เราสามารถใช้แท็ก <a> ใน HTML แต่ถ้าเราต้องการให้แท็กลิงก์ไปหน้าแรก Career Karma เราต้องใช้ attribute href ด้วย
นี่คือตัวอย่างแท็ก <a> ที่ลิงก์ไปหน้าแรก Career Karma:
<a href="https://careerkarma.com/">Career Karma</a>
แท็กนี้ใช้ attribute ชื่อ href และกำหนดค่าเป็น "https://careerkarma.com/" ซึ่งเป็น URL ของหน้าแรก Career Karma
Attributes ใน HTML ไม่สนใจตัวพิมพ์เล็กใหญ่ (case insensitive) แต่ attributes มักเขียนเป็นตัวพิมพ์เล็ก
Single and Double Quotes HTML
เมื่อคุณกำหนดค่าให้ attribute คุณสามารถใช้ทั้ง single quotes และ double quotes การใช้ double quotes เป็นวิธีที่พบบ่อยที่สุด (และเป็นวิธีที่เราใช้ในตัวอย่างก่อนหน้า) อย่างไรก็ตาม วิธีที่คุณใช้ขึ้นอยู่กับเนื้อหาของ attribute ของคุณ
สมมติเรากำลังสร้าง element ฟอร์มที่มีค่า John ‘Rocketman’ Smith ในกรณีนี้ เนื่องจากค่าของเรามี single quotes เราควรใช้ double quotes สำหรับชื่อ attribute นี่คือโค้ดที่เราจะใช้ประกาศ attribute นี้:
<input type="text" value="John 'Rocketman' Smith">
ในทางกลับกัน สมมติค่าของเรามี double quotes แทน คือ John “Rocketman” Smith ในกรณีนี้ เราจะต้องการใช้ single quotes เพื่อกำหนด attribute ของเรา นี่คือโค้ดที่เราจะใช้:
<input type="text" value='John "Rocketman" Smith'>
วิธีใช้ HTML Boolean Attributes
บาง attributes ไม่ใช้โครงสร้าง name/value pair เราเรียกพวกมันว่า boolean attributes Attributes นี้สามารถมีค่าได้แค่ true-false และค่าของพวกมันถูกตั้งเป็น true หากถูกระบุ และ false หากไม่ได้ระบุ
Boolean attributes มักใช้ใน HTML forms สมมติเรากำลังสร้างฟิลด์ฟอร์มที่ขอชื่อผู้ใช้ เราต้องการให้ฟิลด์ฟอร์มนี้เป็น mandatory โดยค่าเริ่มต้น เราสามารถใช้ boolean attribute required เพื่อบรรลุเป้าหมายนี้:
<input type="text" value="Name" required>
ในตัวอย่างนี้ เรากำหนด input tag ที่มี 3 attributes สอง attribute แรก type และ value ใช้โครงสร้าง name/value Attribute ที่สาม required เป็น boolean attribute เนื่องจากเราระบุ boolean attribute required ค่าของมันจึงถูกตั้งเป็น true
วิธีใช้ Standard HTML Attributes
มี HTML attributes ไปปะปนซึ่งใช้กับทุก element ใน HTML เรียกว่า global attributes
คุณมีโอกาสเจอพวกมันทั่วทั้งหน้าเว็บ ดังนั้นสำคัญที่คุณรู้ว่าพวกมันคืออะไรและทำงานอย่างไร มาเดินผ่าน 4 standard HTML attributes ที่พบบ่อยที่สุดที่ใช้กับ elements
HTML id Attribute
id attribute ให้ element รหัสตัวตนที่ไม่ซ้ำกัน id attribute เองไม่ส่งผลต่อการปรากฏของ HTML element แต่ช่วยให้คุณเลือก element เฉพาะเพื่อจัดการเมื่อคุณทำงานกับ CSS หรือ JavaScript
id ที่คุณกำหนดให้ element ใดๆ ควรไม่ซ้ำในเอกสาร
นี่คือตัวอย่าง id attribute ที่ใช้ในแท็ก <p>:
<p id="secondParagraph">Hello, there! Welcome to my site.</p>
ในตัวอย่างนี้ เรากำหนดแท็ก <p> ให้มี id attribute ค่าเป็น secondParagraph
HTML title Attribute
HTML title attribute มักใช้เพื่ออธิบาย element หรือเนื้อหาของมัน ค่าที่จัดเก็บใน title attribute จะแสดงเป็น tooltip ที่ปรากฏเมื่อผู้ใช้วางเมาส์เหนือ element
สมมติเรามี input field ที่เก็บชื่อผู้ใช้ เราต้องการแสดง This field is required เมื่อผู้ใช้วางเมาส์เหนือฟิลด์ เราสามารถทำเป้าหมายนี้ได้ด้วยโค้ดต่อไปนี้:
<input type="text" title="This field is required">
เมื่อเราวางเมาส์เหนือ text field tooltip ต่อไปนี้จะปรากฏ:
HTML style Attribute
HTML style attribute ใช้ระบุ CSS styles สำหรับ element เฉพาะ วิธีการจัดสไตล์ element แบบนี้เรียกว่า inline style
สมมติเรากำลังสร้างย่อหน้าข้อความที่ต้องการให้ปรากฏเป็นสีเทา เราสามารถใช้ style attribute ระบุสีของข้อความได้ นี่คือโค้ดที่เราสามารถใช้ทำภารกิจนี้:
<p style="color: gray;">Hello, there! This is my website.</p>
นี่คือผลลัพธ์ของโค้ดของเรา:
ตามที่เห็น สีของข้อความของเราเปลี่ยนเป็นสีเทา เพราะเราระบุ style attribute และเปลี่ยน style color ให้เท่ากับ gray
Element-Specific HTML Attributes
มี attributes อื่นๆ หลายอย่างที่คุณอาจเจอซึ่งเฉพาะเจาะจงต่อ element นี่คือตัวอย่างบางส่วน:
img src
<img src="source.png">
ในตัวอย่างนี้ เราระบุ attribute src Attribute นี้ใช้กับแท็ก img เพื่อชี้ไปที่ไฟล์ที่แท็กควรเรนเดอร์บนหน้าเว็บ
a href
<a href="https://careerkarma.com/">Career Karma homepage</a>
Attribute href ใช้ในตัวอย่างนี้เพื่อบอกแท็ก <a> ว่าเมื่อคลิกลิงก์ ให้ส่งผู้ใช้ไปที่เว็บไซต์ไหน
img alt
<img src="source.png" alt="Image of a book">
ในโค้ดของเรา เราระบุ attribute alt Attribute นี้เฉพาะเจาะจงต่อแท็ก img และระบุ alternative text ที่จะถูกประมวลผลโดยหน้าเว็บหากรูปภาพไม่สามารถแสดงได้
Attribute alt ใน HTML สามารถอ่านได้โดย screen readers ดังนั้นคนที่บกพร่องทางสายตาที่พึ่งพา screen readers ยังเข้าใจหน้าเว็บของเราได้
วิธีใช้ HTML Attributes: สรุป
Attributes เป็นคุณสมบัติเพิ่มเติมที่ใช้กับ element เฉพาะใน HTML Attributes จะถูกระบุเสมอในแท็กเปิดของ element และมักใช้ name/value pairs
บทช่วยสอนนี้เดินผ่าน พร้อมอ้างอิงตัวอย่าง พื้นฐานของ attributes ใน HTML, boolean attributes, standard HTML attributes ไปจนถึง element-specific attributes ตอนนี้คุณรู้วิธีใช้ attributes ใน HTML แล้ว
