Strategies, standards, resources to make the Web accessible to people with disabilities

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:

Page Contents

Default text field

Code

{% include_cached 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">

Code

{% include_cached 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">

Code

{% include_cached 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">

Code

{% include_cached 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">

Code

{% include_cached 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">

Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list wai@w3.org or via GitHub.

Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.