บทความ IT เจ๋งๆ

HTML เป็น Markup Language ยอดนิยมสำหรับ Web มันช่วยให้เราสร้างองค์ประกอบสำหรับ Web Pages ได้อย่างง่ายดาย คุณสามารถใช้ Tags, Attributes, เพิ่ม Scripts และอื่น ๆ อีกมากมาย ในบทความนี้ เราจะพูดถึง 4 สิ่งสุดเจ๋ง ที่คุณสามารถสร้างได้เพียงแค่ใช้ HTML เรามาดูกันเลย

1. Color Picker

HTML ช่วยให้คุณสร้างตัว Color Picker ได้อย่างง่ายดายด้วยการใช้ <input> Tag โดยให้ Attribute มี Type เป็น "color" 

มาดูตัวอย่าง Code กัน:

ดังที่คุณเห็นด้านบน เราใช้ label Tag สำหรับการเข้าถึงที่ดีขึ้น นั่นคือวิธีที่คุณสามารถสร้างตัว Color Picker ได้อย่างง่ายดายโดยไม่ต้องใช้ JavaScript

และนี่ก็เป็น ตัวอย่างที่อยู่ใน Codepen:

2. Automatically Refresh a Document

คุณสามารถ Refresh Document ได้โดยอัตโนมัติ หลังจากผ่านไปช่วงเวลาหนึ่ง โดยใช้เพียงแค่ HTML

คุณสามารถทำได้โดยใช้ http-equiv Attribute ใน Meta Tag บน HTML ของคุณ

มาดูตัวอย่าง Code กัน:

เราสามารถระบุระยะเวลาเป็นวินาที หลังจากการ Refresh แต่ละครั้ง ใน content Attribute ดังที่คุณเห็นด้านบน

และนี่ก็เป็น ตัวอย่างที่อยู่ใน Codepen:

3. Show & Hide Text

ใน HTML มีวิธีที่คุณสามารถ แสดงและซ่อน Text บน Web Page ได้โดยที่ไม่ต้องใช้ JavaScript

เราเพียงแค่ใช้ <details> และ <summary> Tag เหมือนที่เราทำด้านล่าง:

ตอนนี้ เมื่อคุณ Click ที่ HTML คุณสามารถแสดงและซ่อน Paragraph Element ได้

และนี่ก็เป็น ตัวอย่างที่อยู่ใน Codepen:

4. Dropdown & Searchable Text

เราสามารถสร้าง Dropdown และ Searchable Text ได้ภายใน Input โดยใช้เพียงแค่ HTML

<datalist>Tag จะช่วยให้เราทำสิ่งนี้ได้ มันช่วยให้เรามีรายการตัวเลือกแบบ Dropdown List สำหรับ Input Element พร้อมกับ Autocomplete Feature เรายังสามารถค้นหา Element ภายใน Input ได้ ทั้งหมดนี้เราเพียงแค่ใช้ Native HTML เท่านั้น ไม่ต้องใช้ JavaScript แต่อย่างใด

นี่ก็คือตัวอย่าง Code:

อย่างที่คุณเห็นด้านบน คุณเพียงแค่ต้องการ Input ภายนอก <datalist> Tag และ List ของ <option> Elements ที่อยู่ภายใน

นอกจากนี้ โปรดทราบไว้ว่า ID ของ <datalist> Tag จะต้องเท่ากับค่าของ List Attribute ใน Input

คุณสามารถดูผลลัพธ์ใน Codepen ตามด้านล่างนี้:

สรุป

นี่คือสิ่งที่ทรงพลังที่เราสามารถทำได้ใน HTML โดยที่ไม่ต้องใช้ JavaScript ด้วย HTML Features ที่มีประโยชน์เหล่านั้น คุณสามารถสร้างสิ่งที่ยอดเยี่ยมได้อย่างง่ายดาย โดยไม่ต้องเขียน Code ใน JavaScript ซึ่งจะทำให้คุณประหยัดเวลามากขึ้น

ที่มา: https://javascript.plainenglish.io/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• 7 Tools ที่ Data Scientists ใช้เพื่อเพิ่มประสิทธิภาพการทำงาน
• 10 Python Programs ที่น่าสนใจพร้อมตัวอย่าง Code
• 5 GitHub .NET Repos ที่ช่วยเพิ่ม Tech Skills ของคุณ ขึ้นไปอีกขั้น