พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน kbd Tag

แท็ก <kbd> ใน HTML5 ใช้เพื่อระบุข้อความที่แสดงถึงการกดแป้นพิมพ์ (keyboard input) ซึ่งเป็นวิธีหนึ่งที่นักพัฒนาเว็บไซต์ใช้เพื่อเน้นข้อความที่เกี่ยวข้องกับการกดปุ่มคีย์บอร์ด โดยทั่วไปจะใช้ในการแสดงคู่มือการใช้งานหรือขั้นตอนที่ต้องการการกดแป้นพิมพ์ เช่น การแสดงปุ่มลัด (shortcuts) หรือคำสั่งที่ผู้ใช้ต้องกดบนคีย์บอร์ด

รูปแบบการใช้งาน <kbd>

การใช้แท็ก <kbd> แบบพื้นฐาน ตัวอย่างนี้จะแสดงปุ่มคีย์บอร์ดที่ต้องกดในเนื้อหาของเว็บ

HTML
<p>To save a file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

การใช้งานร่วมกับแท็กอื่นๆ แท็ก <kbd> สามารถใช้งานร่วมกับแท็กอื่น ๆ เพื่อสร้างรูปแบบที่ซับซ้อนมากขึ้น เช่น การใช้ร่วมกับแท็ก <samp> เพื่อแสดงผลลัพธ์ของการกดแป้นพิมพ์ หรือแท็ก <code> เพื่อแสดงรหัสโปรแกรม

HTML
<p>To open the terminal, press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd>, and then type the command <code>ls</code>.</p>

การแสดงการกดหลายปุ่มพร้อมกัน หากต้องการแสดงว่าผู้ใช้ต้องกดหลายปุ่มพร้อมกัน เช่น ปุ่มคีย์ลัดที่มีการกดมากกว่า 1 ปุ่ม แท็ก <kbd> สามารถนำมาเรียงต่อกันได้

HTML
<p>Press <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>Esc</kbd> to open Task Manager.</p>

การใช้งานในฟอร์ม แท็ก <kbd> สามารถใช้ร่วมกับฟอร์มในการอธิบายว่าผู้ใช้ควรป้อนข้อมูลอย่างไร เช่น การใช้ปุ่มคีย์บอร์ดในช่องอินพุต

HTML
<label for="username">Enter your username and press <kbd>Enter</kbd>:</label>
<input type="text" id="username" name="username">

การใช้งานเพื่อแสดงคำสั่งโปรแกรม นอกจากนี้ยังสามารถใช้แท็ก <kbd> ในเอกสารเพื่ออธิบายการกดแป้นพิมพ์สำหรับโปรแกรมเมอร์ โดยแสดงถึงคำสั่งที่ต้องพิมพ์ในโปรแกรมต่าง ๆ เช่น Terminal หรือ Command Prompt

HTML
<p>Type <kbd>sudo apt-get update</kbd> to update your system.</p>

การจัดสไตล์แท็ก <kbd> ด้วย CSS เราสามารถปรับแต่งลักษณะการแสดงผลของแท็ก <kbd> ได้โดยใช้ CSS เช่น การเปลี่ยนสีพื้นหลังหรือการเปลี่ยนฟอนต์

HTML
<style>
  kbd {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: "Courier New", Courier, monospace;
  }
</style>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>

การประยุกต์ใช้งาน <kbd>

  • การแสดงทางลัดคีย์บอร์ด (Keyboard Shortcuts): ใช้แสดงขั้นตอนการกดปุ่มลัดในโปรแกรมหรือบนเว็บไซต์
  • การอธิบายการใช้งานซอฟต์แวร์ (Software Instructions): ใช้อธิบายวิธีการกดปุ่มหรือคำสั่งในซอฟต์แวร์
  • การเขียนเอกสารอธิบายการใช้งานโปรแกรม (Documentation): ใช้ในเอกสารที่ต้องการแสดงคำสั่งโปรแกรมหรือการกดแป้นพิมพ์สำหรับผู้ใช้

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ