Showing content in a separate, highlighted window is a
popular pattern on the web. These are commonly
known as ‘modals’, but the <dialog> element covers more
use-cases such as alerts.
On its own, a <dialog> element will not be visible. It
will only show up with the open attribute applied, when it is
displayed above the rest of the page content automatically.
Its accompanying JavaScript API enables dialogs to be opened
with the showModal method, which then gives it a ::backdrop
pseudo-element. This can then be styled to dim the content
behind it.
Currently only Chrome, Edge and Samsung Internet browsers
are supported. For those that lack support, dialogs will render
like any other container and can be polyfilled to act the same.<dialog open>
<p>This is a HTML-powered dialog box.</p>
</dialog>When providing keyboard instructions,
such as shortcuts or search inputs, we
need to differentiate the key names with
the rest of the surrounding text. The <kbd>
element is specifically applied for this
purpose.
<kbd> elements can be nested where necessary,
such as a combination shortcut.Close this window by pressing <kbd>Esc</kbd>While the <input> element may be
one of the oldest elements around, it
has a lot of tricks up its sleeve. Even
today, many websites still do not use
them to their fullest potential.
The type attribute on an input can change
its behaviour dramatically. For instance,
color will display a colour picker to the user
without the need for any extra JavaScript. A
range will render a slider to pick between two
values instead of requiring a specific value
to be entered. A date input shows a localised
date picker without any extra overhead.
While these have wide browser support,
those that don’t will show a regular text
input and can then be provided with a fall-
back experience.
These all automatically validate their
content in a way that makes sense for that
particular input. For extra checks, the pattern
attribute can accept a regular expression that
the entered value needs to pass in order
to submit.<input type=”color” value=”#FF0657” />
<input name=”username” pattern=”[a-z]{5,10}”
title=”Between 5 and 10 lowercase characters”>The color input
on iOS presents
a more touch-
friendly interface
with limited
optionsSmashing
Magazine styles
the <kbd>
element to look
like a small
computer keyFEATURES
Hot new HTML tags