Native HTML Elements - Accordions, Media Players etc.
2024-12-07 16:16
Below are a few native HTML elements and attributes that enhance functionality without additional scripts or libraries.
Dialogs
Native modals:
<dialog open>
<p>Example dialog content</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
Input elements
File picker
<input type="file">
Color Pickers
<input type="color">
Date Time Pickers
<input type="month">
<input type="date">
<input type="time">
<input type="datetime-local">
Numeric Sliders
<input type="range" min="0" max="5">
Suggested options
<input list="fonts">
<datalist id="fonts">
<option value="Courier New"></option>
<option value="Garamond"></option>
<option value="Georgia"></option>
<option value="Tahoma"></option>
<option value="Times New Roman"></option>
</datalist>
Specialized Inputs
<input type="email">
<input type="url">
<input type="search">
<input type="tel">
Accordion / Expendable Details
<h2>FAQs</h2>
<details name="faq">
<summary>Question 1</summary>
Answer 1
</details>
<details name="faq">
<summary>Question 2</summary>
Answer 2
</details>
Media players
<audio controls src="example.mp3"></audio>
<video controls src="example.mp4"></video>
Progress indicator / Loading bar
- Progress
<progress value="50" max="100">50%</progress>
- Meter
<meter value="0.7" min="0" max="1">70%</meter>