Differential D12879 Diff 35047 source/style/writing/placeholder.rst

Changeset View

Standalone View

View Options

source/style/writing/placeholder.rst

  • This file was added.
1​Placeholder
2​===========
3​
4​Purpose
5​-------
6​
7​A placeholder can be shown on an input element that expects text input.
8​It can either contain an example of the expected format, or a hint about
ngrahamUnsubmitted
Done

"exspects" -> "expects"

ngraham: "exspects" -> "expects"
9​the action that will be triggered when the user types in the input element.
10​
11​Guidelines
12​----------
13​
14​Example
15​~~~~~~~
16​
17​- A placeholder with an example is not a replacement for a label, but should give
18​ the user only an additional hint about what kind of data is expected.
ngrahamUnsubmitted
Done

"no replacement" -> "not a replacement"

ngraham: "no replacement" -> "not a replacement"
19​
ngrahamUnsubmitted
Done

"hint what" -> "hint about what"

ngraham: "hint what" -> "hint about what"
20​.. image:: /img/Placeholder-1.png
21​ :alt: Placeholders showing an example of what to enter in fields
22​
ngrahamUnsubmitted
Done

"what to input" -> "what to enter"

ngraham: "what to input" -> "what to enter"
23​Actions
24​~~~~~~~
25​
26​- A placeholder with an action replaces the label.
27​- Use an ellipsis (...) after the text.
28​- Show visiual feedback as soon as the user types, e.g. trigger the
29​ action or show a menu with autocompletion suggestions.
ngrahamUnsubmitted
Done

"types, don't expect" -> "types. Don't require"

ngraham: "types, don't expect" -> "types. Don't require"
30​- Keep the text as short as possible.
31​- Since the placeholder won't be visible anymore as soon as the user types,
32​ you should only use it on standalone input elements, not in groups of
ngrahamUnsubmitted
Done

"wont" -> "won't"

ngraham: "wont" -> "won't"
33​ input elements such as forms.
ngrahamUnsubmitted
Done

"use that" -> "use it"

ngraham: "use that" -> "use it"
ngrahamUnsubmitted
Done

Missed this one last time: "stand alone" -> "standalone"

ngraham: Missed this one last time: "stand alone" -> "standalone"
34​- Use :doc:`sentence style capitalization </style/writing/capitalization>`.
35​
36​.. figure:: /img/Krunner-1.png
37​ :alt: Krunner showing a placeholder instead of a label with an action.
38​
39​ .. Krunner showing a placeholder instead of a label with an action.