選擇同操作

喺選項入面揀嘅控制項，同埋表單最後嗰幾行。每個都擺喺有內距嘅 rst-box 入面，因為呢啲片段就係咁假設。

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

field-select

field 個外殼包住一個原生 select。超過十個選項嗰陣，個 select 就會開 select.js 嘅可篩選組合框；但表單提交嘅仲係嗰個原生 select。

三個選項：原生 select

桌面手機 HTML 模板

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

<div rst-field>
  <label rst-field-label for="sel_few">角色</label>
  <select rst-input id="sel_few" name="sel_few">
    <option value="admin" selected>管理員</option>
    <option value="editor">編輯</option>
    <option value="member">成員</option>
  </select>
</div>

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

{{template "field-select" dict
    "ID" "sel_few"
    "Name" "sel_few"
    "Label" "角色"
    "Options" (list
        (dict "Label" "管理員" "Selected" true "Value" "admin")
        (dict "Label" "編輯" "Value" "editor")
        (dict "Label" "成員" "Value" "member"))}}

十二個選項：可篩選嘅組合框

桌面手機 HTML 模板

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

<div rst-field>
  <label rst-field-label for="sel_many">城市</label>
  <select rst-input id="sel_many" name="sel_many" data-rst-select data-rst-select-filter="輸入嚟篩選" data-rst-select-results="{n} 個結果" data-rst-select-result-one="1 個結果" data-rst-select-no-matches="冇相符嘅結果" aria-describedby="sel_many-help">
    <option value="dublin" selected>都柏林</option>
    <option value="lisbon">里斯本</option>
    <option value="madrid">馬德里</option>
    <option value="berlin">柏林</option>
    <option value="rome">羅馬</option>
    <option value="athens">雅典</option>
    <option value="helsinki">赫爾辛基</option>
    <option value="reykjavík">雷克雅未克</option>
    <option value="warsaw">華沙</option>
    <option value="zagreb">薩格勒布</option>
    <option value="tallinn">塔林</option>
    <option value="valletta">華列他</option>
  </select>
  <p rst-field-help id="sel_many-help">開始打字就可以篩選。</p>
</div>

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

{{template "field-select" dict
    "ID" "sel_many"
    "Name" "sel_many"
    "Label" "城市"
    "Options" (list
        (dict "Label" "都柏林" "Selected" true "Value" "dublin")
        (dict "Label" "里斯本" "Value" "lisbon")
        (dict "Label" "馬德里" "Value" "madrid")
        (dict "Label" "柏林" "Value" "berlin")
        (dict "Label" "羅馬" "Value" "rome")
        (dict "Label" "雅典" "Value" "athens")
        (dict "Label" "赫爾辛基" "Value" "helsinki")
        (dict "Label" "雷克雅未克" "Value" "reykjavík")
        (dict "Label" "華沙" "Value" "warsaw")
        (dict "Label" "薩格勒布" "Value" "zagreb")
        (dict "Label" "塔林" "Value" "tallinn")
        (dict "Label" "華列他" "Value" "valletta"))
    "Help" "開始打字就可以篩選。"}}

超過十個選項，片段就會開 select.js；唔夠十個就唔會：喺得幾項嘢入面搵嘢只係擺設，唔係幫忙。

十二個選項，Plain：明確唔要嗰個加強

桌面手機 HTML 模板

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

<div rst-field>
  <label rst-field-label for="sel_plain">城市</label>
  <select rst-input id="sel_plain" name="sel_plain">
    <option value="dublin" selected>都柏林</option>
    <option value="lisbon">里斯本</option>
    <option value="madrid">馬德里</option>
    <option value="berlin">柏林</option>
    <option value="rome">羅馬</option>
    <option value="athens">雅典</option>
    <option value="helsinki">赫爾辛基</option>
    <option value="reykjavík">雷克雅未克</option>
    <option value="warsaw">華沙</option>
    <option value="zagreb">薩格勒布</option>
    <option value="tallinn">塔林</option>
    <option value="valletta">華列他</option>
  </select>
</div>

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

{{template "field-select" dict
    "ID" "sel_plain"
    "Name" "sel_plain"
    "Label" "城市"
    "Options" (list
        (dict "Label" "都柏林" "Selected" true "Value" "dublin")
        (dict "Label" "里斯本" "Value" "lisbon")
        (dict "Label" "馬德里" "Value" "madrid")
        (dict "Label" "柏林" "Value" "berlin")
        (dict "Label" "羅馬" "Value" "rome")
        (dict "Label" "雅典" "Value" "athens")
        (dict "Label" "赫爾辛基" "Value" "helsinki")
        (dict "Label" "雷克雅未克" "Value" "reykjavík")
        (dict "Label" "華沙" "Value" "warsaw")
        (dict "Label" "薩格勒布" "Value" "zagreb")
        (dict "Label" "塔林" "Value" "tallinn")
        (dict "Label" "華列他" "Value" "valletta"))
    "Plain" true}}

必填，仲有錯誤

桌面手機 HTML 模板

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

<div rst-field>
  <label rst-field-label for="sel_error">角色</label>
  <select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error">
    <option value="admin" selected>管理員</option>
    <option value="editor">編輯</option>
    <option value="member">成員</option>
  </select>
  <p rst-field-error id="sel_error-error" role="alert">幫呢個人揀個角色。</p>
</div>

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

{{template "field-select" dict
    "ID" "sel_error"
    "Name" "sel_error"
    "Label" "角色"
    "Options" (list
        (dict "Label" "管理員" "Selected" true "Value" "admin")
        (dict "Label" "編輯" "Value" "editor")
        (dict "Label" "成員" "Value" "member"))
    "Required" true
    "Error" "幫呢個人揀個角色。"}}

手寫嘅，有 optgroup 分組

桌面手機 HTML

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

<div rst-field>
  <label rst-field-label for="sel_grouped">地區</label>
  <select rst-input id="sel_grouped" name="sel_grouped" data-rst-select data-rst-select-filter="輸入嚟篩選" data-rst-select-results="{n} 個結果" data-rst-select-result-one="1 個結果" data-rst-select-no-matches="冇相符嘅結果">
    <optgroup label="歐洲">
      <option value="dublin" selected>都柏林</option>
      <option value="lisbon">里斯本</option>
      <option value="warsaw">華沙</option>
    </optgroup>
    <optgroup label="美洲">
      <option value="montreal">滿地可</option>
      <option value="lima">利馬</option>
      <option value="austin">奧斯汀</option>
    </optgroup>
    <optgroup label="亞洲">
      <option value="osaka">大阪</option>
      <option value="hanoi">河內</option>
      <option value="dhaka">達卡</option>
    </optgroup>
    <optgroup label="非洲">
      <option value="accra">阿克拉</option>
      <option value="nairobi">奈洛比</option>
      <option value="tunis">突尼斯</option>
    </optgroup>
  </select>
</div>

呢度嘅 Options 係一個平面清單，所以分咗組嘅選項要應用自己寫成標記。select.js 會將啲組畫出嚟而唔係掉咗佢；手寫嘅 select 亦可以用 data-rst-select="false" 徹底唔要呢個加強。

field-check

切換嘅唯一做法：一個真正嘅勾選框，外表整成開關咁，鍵盤同螢幕閱讀器照常用得。

開

桌面手機 HTML 模板

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

<label rst-switch>
  <input type="checkbox" name="notify_on" checked>
  <span rst-switch-track aria-hidden="true"></span>
  有回覆就電郵通知我
</label>

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

{{template "field-check" dict
    "Name" "notify_on"
    "Label" "有回覆就電郵通知我"
    "Checked" true}}

閂

桌面手機 HTML 模板

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

<label rst-switch>
  <input type="checkbox" name="notify_off">
  <span rst-switch-track aria-hidden="true"></span>
  有人提到我就電郵通知我
</label>

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

{{template "field-check" dict "Name" "notify_off" "Label" "有人提到我就電郵通知我"}}

已停用

桌面手機 HTML 模板

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

<label rst-switch>
  <input type="checkbox" name="notify_disabled" disabled>
  <span rst-switch-track aria-hidden="true"></span>
  每個禮拜電郵一份摘要俾我
</label>

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

{{template "field-check" dict
    "Name" "notify_disabled"
    "Label" "每個禮拜電郵一份摘要俾我"
    "Disabled" true}}

choice-field

選項卡片：我哋比較想你用嘅單選或多選組。Title 保持簡短；解釋交畀 Desc。

淨係揀一個

桌面手機 HTML 模板

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

<fieldset rst-choice>
  <legend>方案</legend>
  <div rst-choice-cards>
    <label>
      <input type="radio" name="plan" value="free">
      <span>
        <span rst-choice-title>免費</span>
        <span rst-choice-desc>一個項目，社群支援。</span>
      </span>
    </label>
    <label>
      <input type="radio" name="plan" value="pro" checked>
      <span>
        <span rst-choice-title>專業版</span>
        <span rst-choice-desc>項目無上限，仲有支援郵箱。</span>
      </span>
    </label>
  </div>
</fieldset>

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

{{template "choice-field" dict
    "Legend" "方案"
    "Name" "plan"
    "Options" (list
        (dict "Desc" "一個項目，社群支援。" "Title" "免費" "Value" "free")
        (dict "Checked" true "Desc" "項目無上限，仲有支援郵箱。" "Title" "專業版" "Value" "pro"))}}

可以揀幾多個都得

桌面手機 HTML 模板

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

<fieldset rst-choice>
  <legend>寄俾我</legend>
  <div rst-choice-cards>
    <label>
      <input type="checkbox" name="digest" value="replies" checked>
      <span>
        <span rst-choice-title>回覆</span>
        <span rst-choice-desc>即時。</span>
      </span>
    </label>
    <label>
      <input type="checkbox" name="digest" value="weekly">
      <span>
        <span rst-choice-title>每週摘要</span>
        <span rst-choice-desc>逢禮拜一朝早。</span>
      </span>
    </label>
  </div>
</fieldset>

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

{{template "choice-field" dict
    "Legend" "寄俾我"
    "Name" "digest"
    "Type" "checkbox"
    "Options" (list
        (dict "Checked" true "Desc" "即時。" "Title" "回覆" "Value" "replies")
        (dict "Desc" "逢禮拜一朝早。" "Title" "每週摘要" "Value" "weekly"))}}

form-foot

表單最後嗰行：一個主要提交掣，加一個可有可無嘅取消連結。取消係連結，因為離開表單其實係去另一頁。

儲存同取消

桌面手機 HTML 模板

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

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">儲存文章</button>
  <a rst-btn="lg" href="/posts">返去文章列表</a>
</div>

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

{{template "form-foot" dict
    "Submit" "儲存文章"
    "CancelHref" "/posts"
    "CancelLabel" "返去文章列表"}}

淨係得提交

桌面手機 HTML 模板

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

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">發送邀請</button>
</div>

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

{{template "form-foot" dict "Submit" "發送邀請"}}

閒置：乜都未發生之前嘅掣

桌面手機 HTML 模板

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

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">發佈</button>
  <a rst-btn="lg" href="/posts">返去文章列表</a>
</div>

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

{{template "form-foot" dict
    "Submit" "發佈"
    "CancelHref" "/posts"
    "CancelLabel" "返去文章列表"}}

會改變啲乜嘅按鈕會有載入狀態；淨係展開啲乜嘅按鈕（例如摺疊、下拉、分頁）就冇。rastrillo.js 會將呢條規則套落每個表單嘅每個提交按鈕，唔使開啟任何嘢。

處理緊：表單送出嗰陣 rastrillo.js 寫低嘅嘢

桌面手機 HTML

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

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit" aria-busy="true" disabled>
    <span rst-spin aria-hidden="true"></span>
    發佈
  </button>
  <a rst-btn="lg" href="/posts">返去文章列表</a>
</div>

淨係㩒咗嗰個掣：表單入面其他提交掣都保住自己嘅 name 同 value，表單本身亦都防住第二次提交。data-busy="false" 可以唔要呢條規則，寫喺表單或者某一個掣度；data-busy-label 用嚟換咗啲字。熄咗腳本就乜都唔會發生，表單照舊噉提交，所以冪等仲係伺服器嘅事。

confirm-form

確認版嘅動作行。破壞性動作有自己嘅路由，唔係一個對話框，所以根本冇嘢要寫腳本。

破壞性操作

桌面手機 HTML 模板

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

<form rst-form-actions method="post" action="/posts/1/delete">
  <input type="hidden" name="csrf" value="tok-123">
  <input type="hidden" name="id" value="1">
  <a rst-btn="ghost lg" href="/posts/1">取消</a>
  <button type="submit" rst-btn="danger lg">刪除呢篇文</button>
</form>

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

{{template "confirm-form" dict
    "Action" "/posts/1/delete"
    "Label" "刪除呢篇文"
    "Danger" true
    "Hidden" (list (list "csrf" "tok-123") (list "id" "1"))
    "CancelHref" "/posts/1"}}

普通情況，取消用預設字眼

桌面手機 HTML 模板

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

<form rst-form-actions method="post" action="/posts/1/publish">
  <a rst-btn="ghost lg" href="/posts/1">取消</a>
  <button type="submit" rst-btn="primary lg">發佈</button>
</form>

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

{{template "confirm-form" dict
    "Action" "/posts/1/publish"
    "Label" "發佈"
    "CancelHref" "/posts/1"}}

冇 CancelLabel，所以取消連結嘅字眼嚟自目錄。