表单

供人输入文字的字段，处在真实表单会让它们处于的状态里。每个都放在有内边距的 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}}