4 Awesome Things You Can Do Using Only HTML
25-Aug-21
คัมภีร์เทพ IT
See the original english version Click here!
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 เป็นเพื่อนนะคะ
บทความล่าสุด