[divbzero]

Other delightfully interactive HTML elements include…

File pickers:

  <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 for text fields:

  <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>

Summaries with expandable details:

  <h2>FAQs</h2>
  <details name="faq">
    <summary>Why are interactive HTML elements cool?</summary>
    They’re lightweight and semantic!
  </details>
  <details name="faq">
    <summary>Will the previous answer close when I open this one?</summary>
    Yes, because the <code>&lt;details&gt;</code> elements share the same name.
  </details>

Media players with controls:

  <audio controls src="example.mp3"></audio>
  <video controls src="example.mp4"></video>

[vintermann]

All of which these days are going to be unused in favor of some toolkit, because they don't behave predictably enough across browsers / browser versions.

[nikodotio]

I use all of them pretty consistently! I try not to have them do magic, but using native date pickers and dropdowns and selects saves so much time and headache - and they work consistently.

[porridgeraisin]

How do you use audio/video consistently across browsers? It looks quite different across the browser/platform combination matrix.

[nikodotio]

I accept that they will look different but function consistently and in line with the client device - when that can be made as a design decision.

[saagarjha]

You put one on the screen and the user controls it with the controls they are used to.

[goatlover]

Why does it matter if it looks different? Those who use Safari will be used to how it looks there, same with Firefox, Chrome, etc

[jazzypants]

No one cares about this except marketing people.

[eek2121]

I use them! I just add CSS to pretty them up.

[eek2121]

(not everyone is into using some hot new framework, some of use stick with HTML/CSS/JavaScript)

[esrauch]

Except file, no one is giving the browser full access to their files so that it can render a shitty file picker

[pests]

The browser already has full access to their files.

[lobsterthief]

But websites don’t

[pests]

They only get access to what your browser gives them, through a file picker.

[esrauch]

It can actually be both.

At least on Android the browser itself can lack the rights to listdir and only gets access to file you picked via the system picker, rather than the browser having unlimited access and only delegating only some of that access to the Web app.

[dv_dt]

Depends if you mean consistent to the os or browser or consistent to the js framework - I would suggest that most casual users don't notice and actually do better if its consistent to the os or browser they use

Well some other comment mentioned audio/video and those are seemingly aways different

[wongarsu]

> Well some other comment mentioned audio/video and those are seemingly aways different

Which is probably fine for your users. In every browser it plays video and has basic controls like a start/pause button, a timeline and a volume control. While the video is playing they even look identical: it's the video, playing; with controls only visible on hover.

The differences aren't an issue for the actual user, they are an issue for the designer that tries to have the website look and feel the same everywhere. Preferably look the same as it does on their MacBook.

[ilius2]

So it's industry's management problem, not a tech problem.

[mikae1]

> Media players with controls:

> <audio controls src="example.mp3"></audio>

> <video controls src="example.mp4"></video>

Which look different in every single browser and can't be styled without JavaScript. Wish these were implemented better.

[BeFlatXIII]

I wish more websites left things with default styling.

[wwweston]

As long as the essential controls are there (play/pause, volume, transport) and don't have serious UX sins (tiny or otherwise lacking touch targets) restyling them is overrated.

And an unfortunate number of recreated controls seem to have the serious UX sins.

"looks different in every single browser" is a minor issue. Might be nice if they were restylable via CSS, though.

[gonzo41]

d<atalist> is a gem. Love it.