บทความ IT เจ๋งๆ
6 HTML Features น่าสนใจ ที่ไม่ค่อยถูกพูดถึงมากนัก
27-ต.ค.-21
คัมภีร์เทพ IT
HTML เป็น Markup Language ที่จำเป็นสำหรับ Web หากคุณเป็น Web Developer คุณจะละเลยความรู้พื้นฐานเกี่ยวกับ HTML ไม่ได้ ข้อดีของ HTML ก็คือมี Tags, Attributes และ Features มากมายที่เราสามารถใช้ประโยชน์ได้ มีหลายสิ่งที่คุณทำได้ด้วย HTML โดยไม่ต้องใช้ CSS หรือ JavaScript และนี่ก็เป็น 6 HTML Features น่าสนใจ ที่ไม่ค่อยถูกพูดถึง
1. The Color Picker Feature
ด้วยพื้นฐานของ HTML เราสามารถสร้าง Color Picker บน Web Page ได้อย่างง่ายดาย โดยที่คุณไม่จำเป็นต้องใช้ JavaScript และ CSS แต่อย่างใด
คุณเพียงแค่ต้องใช้ <input> Tag และให้ค่าของ color ใน attribute Type
และนี่ก็คือตัวอย่าง:
อย่างที่คุณเห็น เราได้เพิ่ม Label Tag เข้าไป เพื่อวัตถุประสงค์ในการเข้าถึง
คุณสามารถลองใช้งานได้จากด้านล่างนี้:
2. The Tag Datalist
Tag <datalist> เป็นหนึ่งใน HTML Tag ที่ทำให้หลายคนรู้สึกทึ่ง เพราะมันช่วยให้คุณสร้าง Search Bar ได้อย่างง่ายดาย ซึ่ง User สามารถค้นหา Elements ด้วย Autocomplete Feature
เพื่อให้บรรลุเป้าหมายนั้น คุณจะต้องมี Input Element ที่มี Attribute List จากนั้นก็สร้าง Datalist Tag ด้วย List ของ Option Tags ที่อยู่ภายในนั้น
และนี่ก็คือตัวอย่าง:
นอกจากนี้ โปรดจำไว้ว่า ID ที่คุณส่งไปยัง Tag <datalist> ควรจะเหมือนกับค่าที่คุณส่งไปยัง List Attribute ใน Input Tag
คุณสามารถลองใช้งานได้จากด้านล่างนี้:
3. The Accordion Feature
คุณรู้หรือไม่ว่า คุณสามารถสร้าง Accordion ด้วย HTML ล้วน ๆ โดยที่ไม่ต้องใช้ JavaScript?
เพื่อที่จะทำแบบนั้น คุณเพียงแค่ต้องใช้ <details> และ <summary> Tags พวกมันจะช่วยให้คุณสร้าง Element ที่คุณสามารถ View และ Hide ได้ด้วยการคลิก (Accordion)
นี่ก็คือตัวอย่าง
เพื่อที่คุณสามารถเข้าใจได้ดีขึ้น สามารถลองใช้งานได้จากด้านล่างนี้:
4. The Hidden Attribute
อีก Feature ที่น่าสนใจ ก็คือ Attribute hidden เพราะมันช่วยให้คุณสามารถซ่อน HTML Element บน Web Page อีกทั้งคุณสามารถเพิ่ม Attribute นี้ลงใน HTML Element ใดก็ได้ที่คุณต้องการ
นี่คือตัวอย่าง:
5. The Abbr Tag
Tag <abbr> ใน HTML จะช่วยให้คุณสามารถแสดง “ตัวย่อ” ของ Text เมื่อ User วาง Mouse ไว้วางไว้เหนือ Tag
และนี่ก็คือตัวอย่าง:
คุณสามารถลองใช้งานได้จากด้านล่างนี้:
6. The Attribute Required
อีก Feature ที่มีประโยชน์มาก ๆ ใน HTML ก็คือ Attribute required มันช่วยให้คุณสามารถตรวจสอบความถูกต้องของ HTML ในแบบ Form Inputs ได้ ไม่ว่าจะเป็น Email Validation, Username Validation และ Password Validation ได้อย่างง่ายดาย
คุณเพียงแค่ต้องเพิ่ม Attribute required ลงใน Input Element อีกทั้งคุณยังสามารถใช้ Attribute ที่เรียกว่า pattern ได้หากคุณต้องการเพิ่ม Regular Expression ของคุณเอง
และนี่ก็คือตัวอย่าง Code:
ตอนนี้ หากคุณกำลังพยายาม Submit แบบ Form โดยไม่ได้กรอก Data ที่ถูกต้อง ก็จะมีการแจ้งเตือนปรากฏขึ้นเพื่อแจ้งให้คุณกรอก Data ให้ถูกต้อง ดังนั้นการตรวจสอบทั้งหมดจึงเสร็จสิ้นในเบื้องหลัง คุณเพียงแค่ต้องเพิ่ม Attribute required เข้าไป
คุณสามารถลองใช้งานได้จากด้านล่างนี้:
สรุป
นี่คือ Features บางส่วนที่น่าสนใจใน HTML เพราะมันมีประโยชน์มาก อีกทั้งมันช่วยให้คุณสามารถทำสิ่งต่าง ๆ ได้ โดยที่ไม่ต้องเขียน JavaScript หรือ CSS Code
ที่มา: https://blog.devgenius.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด