Input Elements

Overview

Buttons can be used in many ways, the button.html include is a good way to get the correct HTML for a button. It has many variants for styling:

This will be replaced by an automatically generated TOC when using Markdown formatting.

Default text field

Code

{% include input.html type="text" label="Text" name="name" %}

Rendered output

Text:

HTML output (DO NOT USE)

<label for="text">Text:</label>
<input type="text" name="name" id="text">

Disabled default text field

Code

{% include input.html type="text" label="Not active" name="name" disabled="true" %}

Rendered output

Not active:

HTML output (DO NOT USE)

<label for="not-active">Not active:</label>
<input type="text" name="name" disabled id="not-active">

Search

Code

{% include input.html type="search" label="Search" name="q" %}

Rendered output

Search:

HTML output (DO NOT USE)

<label for="search">Search:</label>
<input type="search" name="q" id="search">

Email

Code

{% include input.html type="email" label="Email" name="client_mail" %}

Rendered output

Email:

HTML output (DO NOT USE)

<label for="email">Email:</label>
<input type="email" name="client_mail" id="email">

URL

Code

{% include input.html type="url" label="URL" name="website" %}

Rendered output

URL:

HTML output (DO NOT USE)

<label for="url">URL:</label>
<input type="url" name="website" id="url">