Native HTML Elements - Accordions, Media Players etc.

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>