Style Guide

See how elements are styled with mine.css.

Headings

h1 Heading with code and small text

h2 Heading with code and small text

h3 Heading with code and small text

h4 Heading with code and small text

h5 Heading with code and small text

h6 Heading with code and small text

# h1 Heading `with code` <small>and small text</small>
## h2 Heading `with code` <small>and small text</small>
### h3 Heading `with code` <small>and small text</small>
#### h4 Heading `with code` <small>and small text</small>
##### h5 Heading `with code` <small>and small text</small>
###### h6 Heading `with code` <small>and small text</small>

Paragraphs

At the base of the mainmast, full beneath the doubloon and the flame, the Parsee was kneeling in Ahab’s front, but with his head bowed away from him; while near by, from the arched and overhanging rigging, where they had just been engaged securing a spar, a number of the seamen, arrested by the glare, now cohered together, and hung pendulous, like a knot of numbed wasps from a drooping, orchard twig. In various enchanted attitudes, like the standing, or stepping, or running skeletons in Herculaneum, others remained rooted to the deck; but all their eyes upcast.

“There it is again—under the hatches—don’t you hear it—a cough—it sounded like a cough.”

At the base of the mainmast, full beneath the doubloon and the flame, the Parsee was kneeling in Ahab's front, but with his head bowed away from him; while near by, from the arched and overhanging rigging, where they had just been engaged securing a spar, a number of the seamen, arrested by the glare, now cohered together, and hung pendulous, like a knot of numbed wasps from a drooping, orchard twig. In various enchanted attitudes, like the standing, or stepping, or running skeletons in Herculaneum, others remained rooted to the deck; but all their eyes upcast.

"There it is again—under the hatches—don't you hear it—a cough—it sounded like a cough."

Links

link text

[link text](http://dev.nodeca.com)

link with title

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

link with footnote style syntax

[link with footnote style syntax][footnote style]

[footnote style]: https://en.wikipedia.org/wiki/Note_(typography)

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. You can use sequential numbers…

5. …or keep all the numbers as 1.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Offset

57. foo
58. bar

57. foo
1. bar

Blockquotes

This is a paragraph preceding a blockquote.

<blockquote> can also be nested…

…by using additional greater-than ('>') signs right next to each other…

…or with spaces between arrows.

This is a paragraph following a blockquote.

This is a paragraph preceding a blockquote.

> `<blockquote>` can also be nested...
>> ...by using additional greater-than (`'>'`) signs right next to each other...
> > > ...or with spaces between arrows.

This is a paragraph following a blockquote.

Emphasis

• This is bold text
• This is also bold text
• This is italic text
• This is also italic text
• This is deleted text

- **This is bold text**
- __This is also bold text__
- *This is italic text*
- _This is also italic text_
- ~~This is deleted text~~

Code

Inline code

Indented code

line 3 of code
line 4 of code
line 5 of code

line 7 of code

Fenced code blocks

// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

`Inline code`

    Indented code

    line 3 of code
    line 4 of code
    line 5 of code

    line 7 of code

```
Fenced code blocks
```

```js
// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

Code blocks without any highlight.js theme:

// Syntax highlighting
var foo = function (bar) {
  return bar++;
};

console.log(foo(5)); console.log(foo(5)); console.log(foo(5)); console.log(foo(5));

Language Examples

These examples model the same small record in several languages so their syntax colors are easy to compare.

TypeScript

type User = {
  id: number
  name: string
}

const formatUser = ({ id, name }: User): string =>
  `${id}: ${name}`

console.log(formatUser({ id: 7, name: 'Ada' }))

Python

from dataclasses import dataclass

@dataclass(frozen=True)
class User:
    id: int
    name: str

def format_user(user: User) -> str:
    return f"{user.id}: {user.name}"

Go

package main

import "fmt"

type User struct {
    ID   int
    Name string
}

func (user User) String() string {
    return fmt.Sprintf("%d: %s", user.ID, user.Name)
}

Rust

#[derive(Debug)]
struct User {
    id: u32,
    name: &'static str,
}

impl User {
    fn label(&self) -> String {
        format!("{}: {}", self.id, self.name)
    }
}

C

#include <stdio.h>

typedef struct {
    int id;
    const char *name;
} User;

static void print_user(const User *user) {
    printf("%d: %s\n", user->id, user->name);
}

C++

#include <iostream>
#include <string>

struct User {
    int id;
    std::string name;
};

std::ostream& operator<<(std::ostream& out, const User& user) {
    return out << user.id << ": " << user.name;
}

User Input

ctrlaltdelete

⌘⌥⇧

qwerty

azerty

<kbd>ctrl</kbd><kbd>alt</kbd><kbd>delete</kbd>

<kbd title="Command">⌘</kbd><kbd title="Option">⌥</kbd><kbd title="Shift">⇧</kbd>

<kbd>q</kbd><kbd>w</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>

<kbd>a</kbd><kbd>z</kbd><kbd>e</kbd><kbd>r</kbd><kbd>t</kbd><kbd>y</kbd>

Tables

Markdown table

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right-aligned Markdown columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Accessible responsive HTML table

Wrap a table that may overflow in a named, keyboard-focusable region. Reference the table caption from aria-labelledby so the scrolling region has an accessible name.

<div role="region" aria-labelledby="template-options-caption" tabindex="0">
  <table>
    <caption id="template-options-caption">Template engine options</caption>
    <thead>
      <tr>
        <th scope="col">Option</th>
        <th scope="col">Type</th>
        <th scope="col">Default</th>
        <th scope="col">Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">data</th>
        <td>string</td>
        <td>—</td>
        <td>Path to data files supplied to templates.</td>
      </tr>
      <tr>
        <th scope="row">engine</th>
        <td>string</td>
        <td>handlebars</td>
        <td>Rendering engine used to process templates.</td>
      </tr>
      <tr>
        <th scope="row">ext</th>
        <td>string</td>
        <td>.html</td>
        <td>File extension used for generated documents.</td>
      </tr>
    </tbody>
  </table>
</div>

Cells can still opt into alignment without changing the responsive structure:

<div role="region" aria-labelledby="release-metrics-caption" tabindex="0">
  <table>
    <caption id="release-metrics-caption">Release metrics</caption>
    <thead>
      <tr>
        <th scope="col">Version</th>
        <th scope="col" style="text-align: end;">Downloads</th>
        <th scope="col" style="text-align: end;">Bundle size</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">11.0.0</th>
        <td style="text-align: end;">12,480</td>
        <td style="text-align: end;">9.8 kB</td>
      </tr>
      <tr>
        <th scope="row">10.2.0</th>
        <td style="text-align: end;">10,315</td>
        <td style="text-align: end;">9.4 kB</td>
      </tr>
    </tbody>
  </table>
</div>

Horizontal Rules

___

---

***

Images

![Finn and Jake](http://38.media.tumblr.com/tumblr_mdo6z0KBpf1rwy00jo1_400.gif "One style is all that is needed.")

![Captain Story-Martense House](https://upload.wikimedia.org/wikipedia/commons/6/66/1996.164.1-65_IMLS_SL2.jpg "Captain Story-Martense House, Front Door, Church Avenue and East 38th Street, Flatbush, Brooklyn, ca. 1899-1909.")

Like links, images also have a footnote style syntax.

The reference defining the URL location can be later in the document.

Like links, images also have a footnote style syntax.

![Alt text][id]

The reference defining the URL location can be later in the document.

[id]: https://upload.wikimedia.org/wikipedia/commons/1/1f/Ries.PNG  "1550 Woodcut of 58-year-old Adam Ries, inscription: ANNO 1550 ADAM RIES SEINS ALTERS IM LVIII"

Audio

Native audio controls fill the available document measure. Audio without controls remains hidden according to the browser’s rendering rules.

<audio controls aria-label="Audio player without a source"></audio>

Canvas

A wide canvas shrinks with its container while preserving its intrinsic ratio. The gradient below is authored demo content rather than a framework default.

Responsive gradient canvas.

<canvas
  aria-label="Responsive gradient canvas"
  width="1280"
  height="240">
  Responsive gradient canvas.
</canvas>

Video

A video without a source or poster still reserves a visible, theme-aware frame while media is unavailable or loading.

<video
  aria-label="Blank video placeholder"
  width="640"
  height="360"></video>

Iframes

An iframe keeps its authored dimensions while shrinking to fit narrower containers.

<iframe
  title="Embedded document example"
  width="1280"
  height="180"
  srcdoc="<p>Embedded document</p>"></iframe>

Figures

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Helsinki_z00.jpg/1920px-Helsinki_z00.jpg"
    alt="Helsinki">
  <figcaption>
    Panoramic view of
    <a
      href="//commons.wikimedia.org/wiki/Helsinki"
      title="Helsinki">Helsinki</a>,
    Finland from the Ateljee bar of
    <a
      href="https://en.wikipedia.org/wiki/Hotel_Torni"
      title="en:Hotel Torni">Hotel Torni</a>.
  </figcaption>
</figure>

<figure class="borderless">
  <picture>
    <source srcset="/img/fork-dark.png" media="(prefers-color-scheme: dark)">
    <img src="/img/fork-light.png" alt="Screenshot of Fork.app">
  </picture>
  <figcaption>
    Light and dark mode images with the
    <code>&lt;picture&gt;</code>
    tag.
  </figcaption>
</figure>

Extras

The following markup falls outside the CommonMark specification and may require plugins or special options for your markdown parser of choice. We’re using markdown-it and related plugins to show how the following elements look when using style.css.

Abbreviations

via markdown-it-abbr

This is a HTML abbreviation example.

It converts “HTML” but keeps partial entries like “xxxHTMLyyy” intact.

This is a HTML abbreviation example.

It converts "HTML" but keeps partial entries like "xxxHTMLyyy" intact.

*[HTML]: Hyper Text Markup Language

Definitions

via markdown-it-deflist

Term 1

Definition 1 with lazy continuation.

Term 2 with inline markup

Definition 2

  { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1

Definition 1

Term 2

Definition 2a

Definition 2b

Term 1

:   Definition 1
with lazy continuation.

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

_Compact style:_

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b

Footnotes

via markdown-it-footnote

Footnote 1 link^[1].

Footnote 2 link^[2].

Inline footnote^[3] definition.

Duplicated footnote reference^[2:1].

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.

Special Emphasis

• Superscript: 19^th (via markdown-it-sup)
• Subscript: H₂O (via markdown-it-sub)
• Inserted text (via markdown-it-ins)
• Marked text (via markdown-it-mark)

- Superscript: 19^th^ (via [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup))
- Subscript: H~2~O (via [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub))
- ++Inserted text++ (via [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins))
- ==Marked text== (via [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark))

Input Types

Mine.css offers improved default styling of built-in HTML form controls that follows the browser’s light and dark preferences.

• <input> element
• HTML5 input types

Hidden

Hidden inputs submit data without rendering an interactive control.

This example includes a hidden CSRF token; the input itself is not visible.

<input type="hidden" name="csrf-token" value="example-token">

Button

Button Element

<input type="button" value="Input Button">
<button type="button">Button Element</button>
<input disabled type="button" value="Input Button (Disabled)">

Checkbox

<div>
  <input type="checkbox" name="scales" id="scales" checked>
  <label for="scales">Scales</label>
</div>

<div>
  <input type="checkbox" name="horns" id="horns">
  <label for="horns">Horns</label>
</div>

<div>
  <input disabled type="checkbox" name="teeth" id="teeth">
  <label for="teeth">Teeth (Disabled)</label>
</div>

Color

<div>
  <input type="color" name="head" id="color-head" value="#e66465">
  <label for="color-head">Head</label>
</div>

<div>
  <input type="color" name="body" id="color-body" value="#f6b73c">
  <label for="color-body">Body</label>
</div>
<div>
  <input disabled type="color" name="foot" id="color-foot" value="#0083f5">
  <label for="color-foot">Footer (Disabled)</label>
</div>

Date

Date: Date (Empty): Date (Disabled):

<label class="block" for="trip-start">Date:</label>
<input type="date" name="trip-start" id="trip-start" value="2020-08-15">
<label class="block" for="empty-date">Date (Empty):</label>
<input type="date" name="empty-date" id="empty-date">
<label class="block" for="trip-end">Date (Disabled):</label>
<input disabled type="date" name="trip-end" id="trip-end" value="2020-08-25">

Datetime Local

Datetime Local: Datetime Local (Empty): Datetime Local (Disabled):

<label class="block" for="meeting-time">Datetime Local:</label>
<input
  type="datetime-local"
  name="meeting-time"
  id="meeting-time"
  value="2018-06-12T19:30"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00">
<label class="block" for="meeting-time-empty">Datetime Local (Empty):</label>
<input
  type="datetime-local"
  name="meeting-time-empty"
  id="meeting-time-empty"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00">
<label class="block" for="meeting-time-disabled">Datetime Local (Disabled):</label>
<input
  disabled
  type="datetime-local"
  name="meeting-time-disabled"
  id="meeting-time-disabled"
  value="2018-06-13T12:00"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00">

Email

Email: Email (Placeholder): Email (Disabled):

<label class="block" for="email-populated">Email:</label>
<input
  type="email"
  name="email-populated"
  id="email-populated"
  value="bob@example.com">
<label class="block" for="email-placeholder">Email (Placeholder):</label>
<input
  type="email"
  name="email-placeholder"
  id="email-placeholder"
  placeholder="bob@example.com">
<label class="block" for="email-disabled">Email (Disabled):</label>
<input
  disabled
  type="email"
  name="email-disabled"
  id="email-disabled"
  value="bob@example.com">

File

Avatar: Avatar (Disabled):

<label class="block" for="avatar">Avatar:</label>
<input
  type="file"
  name="avatar"
  id="avatar"
  accept="image/png, image/jpeg">
<label class="block" for="avatar-disabled">Avatar (Disabled):</label>
<input
  disabled
  type="file"
  name="avatar-disabled"
  id="avatar-disabled"
  accept="image/png, image/jpeg">

Image

Browsers do not consistently distinguish disabled image inputs visually, so Mine.css reduces their opacity.

<input
  class="dark-icon"
  type="image"
  name="login"
  id="image-login"
  alt="Login"
  src="/light-dark.svg">
<input
  disabled
  class="dark-icon"
  type="image"
  name="login-disabled"
  id="image-login-disabled"
  alt="Login (Disabled)"
  src="/light-dark.svg">

Month

Month: Month (Empty): Month (Disabled):

<label class="block" for="start-month">Month:</label>
<input type="month" name="start-month" id="start-month" value="2020-08" min="2018-03">
<label class="block" for="empty-month">Month (Empty):</label>
<input type="month" name="empty-month" id="empty-month" min="2018-03">
<label class="block" for="end-month">Month (Disabled):</label>
<input disabled type="month" name="end-month" id="end-month" value="2020-09" min="2018-03">

Number

Number (10-100): Number (Placeholder): Number (Disabled):

<label class="block" for="number-populated">Number (10-100):</label>
<input type="number" name="number-populated" id="number-populated" value="42" min="10" max="100">
<label class="block" for="number-placeholder">Number (Placeholder):</label>
<input type="number" name="number-placeholder" id="number-placeholder" placeholder="12" min="10" max="100">
<label class="block" for="number-disabled">Number (Disabled):</label>
<input disabled type="number" name="number-disabled" id="number-disabled" value="50" min="10" max="100">

Password

Password: Password (Placeholder): Password (Disabled):

<label class="block" for="password-populated">Password:</label>
<input
  type="password"
  name="password-populated"
  id="password-populated"
  value="correct-horse"
  minlength="8">
<label class="block" for="password-placeholder">Password (Placeholder):</label>
<input
  type="password"
  name="password-placeholder"
  id="password-placeholder"
  placeholder="8+ characters"
  minlength="8">
<label class="block" for="password-disabled">Password (Disabled):</label>
<input
  disabled
  type="password"
  name="password-disabled"
  id="password-disabled"
  value="correct-horse"
  minlength="8">

Radio

<div>
  <input type="radio" name="drone" value="huey" id="huey" checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" name="drone" value="dewey" id="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input disabled type="radio" name="drone" value="louie" id="louie">
  <label for="louie">Louie (Disabled)</label>
</div>

Range

<div>
  <input type="range" name="volume" id="volume" min="0" max="11">
  <label for="volume">Volume</label>
</div>

<div>
  <input
    disabled
    type="range"
    name="cowbell"
    id="cowbell"
    min="0"
    max="100"
    value="90"
    step="10">
  <label for="cowbell">Cowbell (Disabled)</label>
</div>

Reset

<form>
  <div class="controls">
    <label for="user-id">User ID:</label>
    <input name="user-id" id="user-id">
    <input type="reset" value="Reset">
    <input disabled type="reset" value="Reset (Disabled)">
  </div>
</form>

Search

Search: Search (Placeholder): Search (Disabled):

<label class="block" for="search-populated">Search:</label>
<input type="search" name="search-populated" id="search-populated" value="mine.css">
<label class="block" for="search-placeholder">Search (Placeholder):</label>
<input type="search" name="search-placeholder" id="search-placeholder" placeholder="Search...">
<label class="block" for="search-disabled">Search (Disabled):</label>
<input disabled type="search" name="search-disabled" id="search-disabled" value="mine.css">

Submit

<input type="submit" value="Submit">
<input disabled type="submit" value="Submit (Disabled)">

Tel

Tel: Tel (Placeholder): Format: 123-456-7890 Tel (Disabled):

<label class="block" for="phone-populated">Tel:</label>
<input
  class="block"
  type="tel"
  name="phone-populated"
  id="phone-populated"
  value="123-456-7890"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  required>
<label class="block" for="phone-placeholder">Tel (Placeholder):</label>
<input
  class="block"
  type="tel"
  name="phone-placeholder"
  id="phone-placeholder"
  placeholder="123-456-7890"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  required>
<small>Format: 123-456-7890</small>
<label class="block" for="phone-disabled">Tel (Disabled):</label>
<input
  class="block"
  disabled
  type="tel"
  name="phone-disabled"
  id="phone-disabled"
  value="123-456-7890"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  required>

Text

Name (4 to 8 characters): Name (Auto-growing): Name (Placeholder): Name (Disabled):

<label class="block" for="name-populated">Name (4 to 8 characters):</label>
<input
  class="block"
  type="text"
  name="name-populated"
  id="name-populated"
  value="Jane Doe"
  required
  minlength="4"
  maxlength="8"
  size="10">
<label class="block" for="name-auto">Name (Auto-growing):</label>
<input
  class="block content-sized"
  type="text"
  name="name-auto"
  id="name-auto"
  placeholder="Keep typing to grow this field...">
<label class="block" for="name-placeholder">Name (Placeholder):</label>
<input
  class="block"
  type="text"
  name="name-placeholder"
  id="name-placeholder"
  placeholder="Jane Doe"
  required
  minlength="4"
  maxlength="8"
  size="10">
<label class="block" for="name-disabled">Name (Disabled):</label>
<input
  class="block"
  disabled
  type="text"
  name="name-disabled"
  id="name-disabled"
  value="Jane Doe"
  required
  minlength="4"
  maxlength="8"
  size="10">

Text Area

Tell us your story: It was a dark and stormy night... Tell us your story (Auto-growing): Tell us your story (Placeholder): Tell us your story (Disabled): It wasn't a dark and stormy night...

<label class="block" for="story">Tell us your story:</label>
<textarea
  class="block"
  id="story"
  name="story"
  rows="5"
  cols="33">It was a dark and stormy night...</textarea>
<label class="block" for="story-auto">Tell us your story (Auto-growing):</label>
<textarea
  class="block"
  id="story-auto"
  name="story-auto"
  placeholder="Start typing to grow this field..."></textarea>
<label class="block" for="story-placeholder">Tell us your story (Placeholder):</label>
<textarea
  class="block"
  id="story-placeholder"
  name="story-placeholder"
  rows="5"
  cols="33"
  placeholder="It was a dark and stormy night..."></textarea>
<label class="block" for="story-disabled">Tell us your story (Disabled):</label>
<textarea
  class="block"
  disabled
  id="story-disabled"
  name="story-disabled"
  rows="5"
  cols="33">It wasn't a dark and stormy night...</textarea>

Time

Choose a time for your meeting: Office hours are 9am to 6pm Time (Empty): Time (Disabled):

<label class="block" for="appt">Choose a time for your meeting:</label>
<input type="time" name="appt" id="appt" value="10:30" min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>
<label class="block" for="appt-empty">Time (Empty):</label>
<input type="time" name="appt-empty" id="appt-empty" min="09:00" max="18:00" required>
<label class="block" for="appt-disabled">Time (Disabled):</label>
<input disabled type="time" name="appt-disabled" id="appt-disabled" value="16:00" min="09:00" max="18:00" required>

URL

Enter an https:// URL: URL (Placeholder): URL (Disabled):

<label class="block" for="url-populated">Enter an https:// URL:</label>
<input
  class="block"
  type="url"
  name="url-populated"
  id="url-populated"
  value="https://example.com"
  pattern="https://.*"
  size="30"
  required>
<label class="block" for="url-placeholder">URL (Placeholder):</label>
<input
  class="block"
  type="url"
  name="url-placeholder"
  id="url-placeholder"
  placeholder="https://example.com"
  pattern="https://.*"
  size="30"
  required>
<label class="block" for="url-disabled">URL (Disabled):</label>
<input
  disabled
  class="block"
  type="url"
  name="url-disabled"
  id="url-disabled"
  value="https://example.com"
  pattern="https://.*"
  size="30"
  required>

Week

Week: Week (Empty): Week (Disabled):

<label class="block" for="week-example">Week:</label>
<input
  class="block"
  value="2018-W20"
  type="week"
  name="week-example"
  id="week-example"
  min="2018-W18"
  max="2018-W26"
  required>
<label class="block" for="week-empty">Week (Empty):</label>
<input
  class="block"
  type="week"
  name="week-empty"
  id="week-empty"
  min="2018-W18"
  max="2018-W26"
  required>
<label class="block" for="week-disabled">Week (Disabled):</label>
<input
  class="block"
  disabled
  value="2018-W24"
  type="week"
  name="week-disabled"
  id="week-disabled"
  min="2018-W18"
  max="2018-W26"
  required>

Additional Form Controls

Select, Option, and Optgroup

The select element presents a menu of options. Optgroups add labels to related choices.

<label class="block" for="destination">Destination:</label>
<select class="block" name="destination" id="destination">
  <option value="" selected disabled>Choose a destination</option>
  <optgroup label="North America">
    <option value="vancouver">Vancouver</option>
    <option value="portland">Portland</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="helsinki">Helsinki</option>
    <option value="lisbon">Lisbon</option>
  </optgroup>
</select>
<label class="block" for="destination-disabled">Destination (Disabled):</label>
<select
  class="block"
  disabled
  name="destination-disabled"
  id="destination-disabled">
  <option value="helsinki">Helsinki</option>
</select>

Datalist

A datalist supplies suggestions while preserving free-form text entry.

Browser:

<label class="block" for="browser-choice">Browser:</label>
<input
  class="block"
  list="browser-suggestions"
  name="browser-choice"
  id="browser-choice"
  placeholder="Choose or enter a browser">
<datalist id="browser-suggestions">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

Output

Output associates a calculated result with the controls that produced it.

<form id="quantity-form">
  <label class="block" for="quantity">Quantity:</label>
  <input
    type="range"
    name="quantity"
    id="quantity"
    min="0"
    max="100"
    value="40">
  <label for="quantity-output">Selected quantity:</label>
  <output
    name="quantity-output"
    id="quantity-output"
    for="quantity">40</output>
</form>

const quantity = document.querySelector('#quantity')
const output = document.querySelector('#quantity-output')

quantity.addEventListener('input', () => {
  output.value = quantity.value
})

Meter

Meters show scalar measurements within a known range and can identify low, high, and optimum regions.

<label class="block" for="storage-meter">Storage used:</label>
<meter
  id="storage-meter"
  min="0"
  max="100"
  low="30"
  high="80"
  optimum="20"
  value="65">65 of 100</meter>
<label class="block" for="battery-meter">Battery remaining:</label>
<meter
  id="battery-meter"
  min="0"
  max="100"
  low="20"
  high="80"
  optimum="100"
  value="15">15 of 100</meter>

Progress

Progress elements show determinate work with a value or indeterminate work without one.

<label class="block" for="download-progress">Download:</label>
<progress id="download-progress" max="100" value="65">65%</progress>
<label class="block" for="preparing-progress">Preparing:</label>
<progress id="preparing-progress">Working...</progress>

Fieldset

<form style="display: inline-block;">
  <fieldset>
    <legend>Log into your account:</legend>
    <div>
      <label class="block" for="username">Email:</label>
      <input type="email" name="username" id="username">
    </div>
    <div>
      <label class="block" for="password-fieldset">Password:</label>
      <input type="password" name="password" id="password-fieldset">
    </div>
    <input style="width:100%" type="submit" value="Login">
  </fieldset>
</form>

Input States

Validation

Mine.css leaves the eager :valid and :invalid states unpainted so untouched required fields do not look completed or broken. Constrained text and selection controls receive valid or invalid borders through :user-valid and :user-invalid after the browser records an interaction. Pair the visual state with useful labels, instructions, and error text.

Change either value and leave the field, or submit the form, to see the interaction-gated states.

<form id="validation-form">
  <label class="block" for="validation-email">Contact email:</label>
  <input
    aria-describedby="validation-help"
    class="block"
    required
    type="email"
    name="validation-email"
    id="validation-email"
    value="not-an-email">
  <label class="block" for="validation-url">Website:</label>
  <input
    aria-describedby="validation-help"
    class="block"
    required
    type="url"
    name="validation-url"
    id="validation-url"
    value="https://example.com">
  <small id="validation-help">Use a complete email address and an absolute URL.</small>
  <div><input type="submit" value="Check validity"></div>
</form>

const form = document.querySelector('#validation-form')
form.addEventListener('submit', event => event.preventDefault())

Readonly

Readonly controls remain focusable and submit their values, but users cannot edit them.

Account ID (Readonly): Notes (Readonly): Managed by your organization.

<label class="block" for="account-id">Account ID (Readonly):</label>
<input
  class="block"
  readonly
  type="text"
  name="account-id"
  id="account-id"
  value="acct_12345">
<label class="block" for="readonly-notes">Notes (Readonly):</label>
<textarea
  class="block"
  readonly
  name="readonly-notes"
  id="readonly-notes"
  rows="3"
  cols="33">Managed by your organization.</textarea>

Multiple

The multiple attribute applies to email, file, and select controls.

<label class="block" for="multiple-email">Email recipients (Multiple):</label>
<input
  class="block"
  multiple
  type="email"
  name="multiple-email"
  id="multiple-email"
  value="alice@example.com, bob@example.com">
<label class="block" for="multiple-file">Attachments (Multiple):</label>
<input multiple type="file" name="multiple-file" id="multiple-file">
<label class="block" for="multiple-select">Tags (Multiple):</label>
<select
  class="block"
  multiple
  size="3"
  name="multiple-select"
  id="multiple-select">
  <option value="css" selected>CSS</option>
  <option value="html">HTML</option>
  <option value="javascript" selected>JavaScript</option>
</select>

Indeterminate

Checkbox indeterminacy is a DOM property rather than an HTML attribute. It affects presentation, not the submitted checked value.

<input type="checkbox" name="selected-items" id="indeterminate-checkbox">
<label for="indeterminate-checkbox">Some items selected (Indeterminate)</label>

const checkbox = document.querySelector('#indeterminate-checkbox')
checkbox.indeterminate = true