表單

人會打字入去嘅欄位，喺真實表單會令佢哋入到嘅狀態度。每個都擺喺有內距嘅 rst-box 入面，因為呢啲片段就係咁假設。

每個例子都真係用得，不過入面啲連結唔會帶你去邊度。 HTML 顯示可以複製嘅標記。

field

標籤、輸入框、可選提示、說明同錯誤。一般嘅文字類控件，有明確 ID。

最簡單

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

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

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field" dict "ID" "f_bare" "Name" "f_bare" "Label" "標題"}}

帶一句提示

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="f_hint">網址代號 <span rst-field-hint>(細楷，唔好有空格)</span></label>
  <input rst-input type="text" id="f_hint" name="f_hint">
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field" dict
    "ID" "f_hint"
    "Name" "f_hint"
    "Label" "網址代號"
    "Hint" "細楷，唔好有空格"}}

控制項下面有一行說明

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="f_help">電郵</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">我哋只會用佢嚟寄回覆俾你。</p>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field" dict
    "ID" "f_help"
    "Name" "f_help"
    "Label" "電郵"
    "Type" "email"
    "Help" "我哋只會用佢嚟寄回覆俾你。"
    "Autocomplete" "email"}}

必填

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

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

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field" dict
    "ID" "f_required"
    "Name" "f_required"
    "Label" "全名"
    "Required" true}}

帶一個錯誤

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="f_error">電郵</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">呢個唔似係電郵地址。</p>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field" dict
    "ID" "f_error"
    "Name" "f_error"
    "Label" "電郵"
    "Type" "email"
    "Error" "呢個唔似係電郵地址。"
    "Value" "grace@"}}

窄

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

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

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field" dict
    "ID" "f_short"
    "Name" "f_short"
    "Label" "郵遞區號"
    "Short" true
    "Value" "D02 XY45"}}

主要欄位

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="f_primary">標題</label>
  <input rst-input="primary" type="text" id="f_primary" name="f_primary" value="季度董事會會議">
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field" dict
    "ID" "f_primary"
    "Name" "f_primary"
    "Label" "標題"
    "Primary" true
    "Value" "季度董事會會議"}}

field-text

一個有標籤嘅文字輸入框，id 由 Name 推導出嚟。必填標記嘅星係 aria-hidden，輸入框嘅 required 屬性先係程式讀到嘅訊號。

最簡單

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

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

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-text" dict "Name" "ft_bare" "Label" "標題"}}

帶一句提示

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="ft_hint">大標題</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">會喺列表度顯示。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-text" dict "Name" "ft_hint" "Label" "大標題" "Hint" "會喺列表度顯示。"}}

必填

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

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

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-text" dict
    "Name" "ft_required"
    "Label" "顯示名稱"
    "Required" true
    "Autocomplete" "nickname"}}

帶一個錯誤

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="ft_error">標題</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="發佈說明" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">已經有篇文用咗呢個標題。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-text" dict
    "Name" "ft_error"
    "Label" "標題"
    "Value" "發佈說明"
    "Error" "已經有篇文用咗呢個標題。"}}

主要欄位

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="ft_primary">係咩嚟？</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="季度董事會會議">
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-text" dict
    "Name" "ft_primary"
    "Label" "係咩嚟？"
    "Value" "季度董事會會議"
    "Primary" true}}

喺表單嘅主要欄位（例如標題或者名）加 Primary，輸入框就會更加顯眼。

field-url

網址輸入欄，example.com 有冇 https:// 都得。喺伺服器度配合 form.URL 用。

最簡單

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

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

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-url" dict "Name" "fu_bare" "Label" "網站"}}

帶一句提示

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="fu_hint">公司網站</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">唔使打 https。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-url" dict
    "Name" "fu_hint"
    "Label" "公司網站"
    "Hint" "唔使打 https。"}}

帶一個錯誤

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="fu_error">網站</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">請輸入網址，例如 example.com。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-url" dict
    "Name" "fu_error"
    "Label" "網站"
    "Value" "brightwater"
    "Error" "請輸入網址，例如 example.com。"}}

field-money

單一貨幣嘅金額。貨幣代碼會喺標籤旁邊顯示，並且同表單一齊提交，所以有人打緊字嗰陣貨幣改咗，儲存時就會捉到。喺伺服器度配合 form.Field 嘅 Currency 用。

最簡單

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="fm_bare">飛價 <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>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-money" dict
    "Name" "fm_bare"
    "Label" "飛價"
    "Locale" "en"
    "Currency" "EUR"}}

帶一句提示

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="fm_hint">飛價 <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">例如 12.50 或者 €12.50。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-money" dict
    "Name" "fm_hint"
    "Label" "飛價"
    "Locale" "en"
    "Currency" "EUR"
    "Hint" "例如 12.50 或者 €12.50。"}}

帶一個錯誤

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="fm_error">飛價 <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">小數請用小數點，例如 12.50。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-money" dict
    "Name" "fm_error"
    "Label" "飛價"
    "Value" "12,.50"
    "Locale" "en"
    "Currency" "EUR"
    "Error" "小數請用小數點，例如 12.50。"}}

field-textarea

field-text 個外殼，包住一個 textarea。

最簡單

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

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

將呢段放入 <section rst-box><form rst-form> 入面。

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

帶一句提示

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="ta_hint">個人簡介</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">會喺你嘅個人檔案度顯示。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-textarea" dict
    "Name" "ta_hint"
    "Label" "個人簡介"
    "Rows" 3
    "Hint" "會喺你嘅個人檔案度顯示。"}}

帶一個錯誤

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="ta_error">摘要</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">摘要最少要有二十個字。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-textarea" dict
    "Name" "ta_error"
    "Label" "摘要"
    "Value" "…"
    "Rows" 3
    "Error" "摘要最少要有二十個字。"}}

必填

桌面手機 HTML 模板

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="ta_required">退款原因 <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-textarea" dict
    "Name" "ta_required"
    "Label" "退款原因"
    "Rows" 3
    "Required" true}}