Form

The fields a person types into, in the states a real form puts them in. Each one sits in a padded rst-box, because that is the rule these partials assume.

Each example is live, but its links go nowhere. HTML shows the markup to copy.

field

Label, input, optional hint, help and error. The general text-like control, with an explicit ID.

Bare

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_bare">Title</label>
  <input rst-input type="text" id="f_bare" name="f_bare">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field" dict "ID" "f_bare" "Name" "f_bare" "Label" "Title"}}

With a hint

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_hint">Slug <span rst-field-hint>(lowercase, no spaces)</span></label>
  <input rst-input type="text" id="f_hint" name="f_hint">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_hint"
    "Name" "f_hint"
    "Label" "Slug"
    "Hint" "lowercase, no spaces"}}

With help under the control

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_help">Email</label>
  <input rst-input type="email" id="f_help" name="f_help" autocomplete="email" aria-describedby="f_help-help">
  <p rst-field-help id="f_help-help">We only use this to send you replies.</p>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_help"
    "Name" "f_help"
    "Label" "Email"
    "Type" "email"
    "Help" "We only use this to send you replies."
    "Autocomplete" "email"}}

Required

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_required">Full name</label>
  <input rst-input type="text" id="f_required" name="f_required" required>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_required"
    "Name" "f_required"
    "Label" "Full name"
    "Required" true}}

With an error

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_error">Email</label>
  <input rst-input type="email" id="f_error" name="f_error" value="grace@" aria-invalid="true" aria-describedby="f_error-error">
  <p rst-field-error id="f_error-error" role="alert">That does not look like an email address.</p>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_error"
    "Name" "f_error"
    "Label" "Email"
    "Type" "email"
    "Error" "That does not look like an email address."
    "Value" "grace@"}}

Short

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_short">Postcode</label>
  <input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_short"
    "Name" "f_short"
    "Label" "Postcode"
    "Short" true
    "Value" "D02 XY45"}}

The headline field

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_primary">Title</label>
  <input rst-input="primary" type="text" id="f_primary" name="f_primary" value="Quarterly board meeting">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_primary"
    "Name" "f_primary"
    "Label" "Title"
    "Primary" true
    "Value" "Quarterly board meeting"}}

field-text

One labelled text input, ids derived from Name. The required marker's star is aria-hidden. The input's required attribute is the programmatic signal.

Bare

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_bare">Title</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-text" dict "Name" "ft_bare" "Label" "Title"}}

With a hint

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_hint">Headline</label>
  <input rst-input id="ft_hint" name="ft_hint" type="text" aria-describedby="ft_hint-hint">
  <small rst-field-hint id="ft_hint-hint">Shown in the list.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_hint"
    "Label" "Headline"
    "Hint" "Shown in the list."}}

Required

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_required">Display name <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_required"
    "Label" "Display name"
    "Required" true
    "Autocomplete" "nickname"}}

With an error

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_error">Title</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="Release notes" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">A post with that title already exists.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_error"
    "Label" "Title"
    "Value" "Release notes"
    "Error" "A post with that title already exists."}}

The headline field

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_primary">What is it?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="Quarterly board meeting">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_primary"
    "Label" "What is it?"
    "Value" "Quarterly board meeting"
    "Primary" true}}

Add Primary to the main form field, e.g. a title or a name to get a more visually prominent input.

field-url

A web address field that accepts example.com with or without https://. Pair it with form.URL on the server.

Bare

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_bare">Website</label>
  <input rst-input id="fu_bare" name="fu_bare" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-url" dict "Name" "fu_bare" "Label" "Website"}}

With a hint

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_hint">Company website</label>
  <input rst-input id="fu_hint" name="fu_hint" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" aria-describedby="fu_hint-hint">
  <small rst-field-hint id="fu_hint-hint">You can leave off the https.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-url" dict
    "Name" "fu_hint"
    "Label" "Company website"
    "Hint" "You can leave off the https."}}

With an error

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_error">Website</label>
  <input rst-input id="fu_error" name="fu_error" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" value="brightwater" aria-invalid="true" aria-describedby="fu_error-error">
  <small rst-field-error id="fu_error-error">Enter a web address, like example.com.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-url" dict
    "Name" "fu_error"
    "Label" "Website"
    "Value" "brightwater"
    "Error" "Enter a web address, like example.com."}}

field-money

A money amount in one currency. The currency code shows beside the label and is sent with the form, so a currency that changed while someone was typing is caught on save. Pair it with form.Field's Currency on the server.

Bare

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_bare">Ticket price <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_bare" name="fm_bare" type="text" inputmode="decimal">
  <input type="hidden" name="fm_bare.locale" value="en">
  <input type="hidden" name="fm_bare.currency" value="EUR">
  <input type="hidden" name="fm_bare.seed" value="">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_bare"
    "Label" "Ticket price"
    "Locale" "en"
    "Currency" "EUR"}}

With a hint

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_hint">Ticket price <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_hint" name="fm_hint" type="text" inputmode="decimal" aria-describedby="fm_hint-hint">
  <input type="hidden" name="fm_hint.locale" value="en">
  <input type="hidden" name="fm_hint.currency" value="EUR">
  <input type="hidden" name="fm_hint.seed" value="">
  <small rst-field-hint id="fm_hint-hint">For example, 12.50 or €12.50.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_hint"
    "Label" "Ticket price"
    "Locale" "en"
    "Currency" "EUR"
    "Hint" "For example, 12.50 or €12.50."}}

With an error

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_error">Ticket price <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_error" name="fm_error" type="text" inputmode="decimal" value="12,.50" aria-invalid="true" aria-describedby="fm_error-error">
  <input type="hidden" name="fm_error.locale" value="en">
  <input type="hidden" name="fm_error.currency" value="EUR">
  <input type="hidden" name="fm_error.seed" value="">
  <small rst-field-error id="fm_error-error">Use a point for decimals, like 12.50.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_error"
    "Label" "Ticket price"
    "Value" "12,.50"
    "Locale" "en"
    "Currency" "EUR"
    "Error" "Use a point for decimals, like 12.50."}}

field-textarea

field-text's wrapper around a textarea.

Bare

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_bare">Notes</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-textarea" dict "Name" "ta_bare" "Label" "Notes" "Rows" 3}}

With a hint

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_hint">Bio</label>
  <textarea rst-textarea id="ta_hint" name="ta_hint" rows="3" aria-describedby="ta_hint-hint"></textarea>
  <small rst-field-hint id="ta_hint-hint">Shown on your profile.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_hint"
    "Label" "Bio"
    "Rows" 3
    "Hint" "Shown on your profile."}}

With an error

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_error">Summary</label>
  <textarea rst-textarea id="ta_error" name="ta_error" rows="3" aria-invalid="true" aria-describedby="ta_error-error">…</textarea>
  <small rst-field-error id="ta_error-error">A summary needs at least twenty characters.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_error"
    "Label" "Summary"
    "Value" "…"
    "Rows" 3
    "Error" "A summary needs at least twenty characters."}}

Required

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_required">Reason for refund <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_required"
    "Label" "Reason for refund"
    "Rows" 3
    "Required" true}}