5 ms·
Other delightfully interactive HTML elements include… File pickers: <input type="file"> Color pickers: <input type="color"> Date/time pickers: <inpu
by divbzero 2y ago
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><details></code> elements share the same name.
</details>
Media players with controls:
<audio controls src="example.mp3"></audio>
<video controls src="example.mp4"></video>
- vintermann 2y agoAll 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.
- esrauch 2y agoExcept file, no one is giving the browser full access to their files so that it can render a shitty file picker
- pests 2y agoThe browser already has full access to their files.
- lobsterthief 2y agoBut websites don’t
- pests 2y agoThey only get access to what your browser gives them, through a file picker.
- esrauch 2y agoIt 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.
- nikodotio 2y agoI 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 2y agoHow do you use audio/video consistently across browsers? It looks quite different across the browser/platform combination matrix.
- nikodotio 2y agoI 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 2y agoYou put one on the screen and the user controls it with the controls they are used to.
- jazzypants 2y agoNo one cares about this except marketing people.
- goatlover 2y agoWhy does it matter if it looks different? Those who use Safari will be used to how it looks there, same with Firefox, Chrome, etc
- dv_dt 2y agoDepends 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 2y ago> 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 2y agoSo it's industry's management problem, not a tech problem.
- eek2121 2y agoI use them! I just add CSS to pretty them up.
- eek2121 2y ago(not everyone is into using some hot new framework, some of use stick with HTML/CSS/JavaScript)
- mikae1 2y ago> 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 2y agoI wish more websites left things with default styling.
- wwweston 2y agoAs 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 2y agod<atalist> is a gem. Love it.