Interesting HTML5 tags

Here is the list of interesting HTML5 tags to save time and not implementing them unnecessarily in JavaScript.

dialog

<button class="open">Open</button>

<dialog id="modal" class="dialogWindow">
  <h2>Dialog Box</h2>
  <p>To close you can also use <strong>escape key</strong>.</p>
  <form method="dialog">
    <label>
    Field Input: <input type="text" placeholder="nexss.com" /></label>
    <button>Done</button>
  </form>
  <button class="close">Close</button>
</dialog>
<style>
  .dialogWindow {
    background: linear-gradient(150deg, #135123, #18181c 64.06%);
    color:white;
  }
  .dialogWindow::backdrop{
    background: linear-gradient(150deg, #135123, rgba(12,0,0,0.1) 88.06%);
  }
  .dialogWindow :is(h2,p) {
    color:white;
  }
  .dialogWindow input {
    background-color:white !important;
    padding: .2em;
  }

</style>
<script type="text/javascript">
document.querySelector(".open").addEventListener("click",() => {
  modal.showModal();
})
document.querySelector(".close").addEventListener("click",() => {
  modal.close();
})
</script>

color

<input type="color" />

range

<input type="range" value="2" min="10" max="200" />

datetime-local

<input type="datetime-local" />

time

<input type="time" />

week

<input type="week" />

month

<input type="month" />

number

<input type="number" />

search

<input type="search" />

have extra button to clear the input

tel

<input type="tel" />

url

<input type="url" />

email

<input type="email" />

Other Tags

datalist

<input type="text" list="suggestions" size="50px" placeholder="search" />
<datalist id="suggestions">

<option value="myValue">Details: some extra details</option>
<option>Some other info</option>
</datalist>

details/summary

<details>
  <summary>Something here</summary>
  <p>Some info after click on the title</p>
</details>

Something here

Some info after click on the title

select/opt-group

<select>
    <optgroup label="important">
      <option>x</option>
      <option>y</option>
    </optgroup>
    <option>z</option>
  </select>

If you found it valuable, please join to the nexss.com supporters at: Support Nexss.com