Roghanna agus gníomhartha

Na rialtáin lena roghnaítear as roghanna, agus na rónna a chuireann deireadh le foirm. Suíonn gach ceann i rst-box stuáilte, mar sin é an riail a ghlacann na páirteanna seo leis.

Tá gach sampla beo, ach ní théann a naisc áit ar bith. Taispeánann HTML an marcáil le cóipeáil.

field-select

Clúdach field timpeall ar rogha dhúchasach. Thar deich rogha cuireann an select an bosca teaglama inscagtha in select.js i bhfeidhm; is í an rogha dhúchasach fós a sheolann an fhoirm.

Trí rogha: select dúchasach

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_few">Ról</label>
  <select rst-input id="sel_few" name="sel_few">
    <option value="admin" selected>Riarthóir</option>
    <option value="editor">Eagarthóir</option>
    <option value="member">Ball</option>
  </select>
</div>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "field-select" dict
    "ID" "sel_few"
    "Name" "sel_few"
    "Label" "Ról"
    "Options" (list
        (dict "Label" "Riarthóir" "Selected" true "Value" "admin")
        (dict "Label" "Eagarthóir" "Value" "editor")
        (dict "Label" "Ball" "Value" "member"))}}

Dhá rogha dhéag: an bosca teaglama inscagtha

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_many">Cathair</label>
  <select rst-input id="sel_many" name="sel_many" data-rst-select data-rst-select-filter="Clóscríobh chun scagadh" data-rst-select-results="{n} toradh" data-rst-select-result-one="1 toradh" data-rst-select-no-matches="Níl aon toradh" aria-describedby="sel_many-help">
    <option value="dublin" selected>Baile Átha Cliath</option>
    <option value="lisbon">Liospóin</option>
    <option value="madrid">Maidrid</option>
    <option value="berlin">Beirlín</option>
    <option value="rome">an Róimh</option>
    <option value="athens">an Aithin</option>
    <option value="helsinki">Heilsincí</option>
    <option value="reykjavík">Réicivíc</option>
    <option value="warsaw">Vársá</option>
    <option value="zagreb">Ságrab</option>
    <option value="tallinn">Taillinn</option>
    <option value="valletta">Vaileite</option>
  </select>
  <p rst-field-help id="sel_many-help">Tosaigh ag clóscríobh chun scagadh.</p>
</div>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "field-select" dict
    "ID" "sel_many"
    "Name" "sel_many"
    "Label" "Cathair"
    "Options" (list
        (dict "Label" "Baile Átha Cliath" "Selected" true "Value" "dublin")
        (dict "Label" "Liospóin" "Value" "lisbon")
        (dict "Label" "Maidrid" "Value" "madrid")
        (dict "Label" "Beirlín" "Value" "berlin")
        (dict "Label" "an Róimh" "Value" "rome")
        (dict "Label" "an Aithin" "Value" "athens")
        (dict "Label" "Heilsincí" "Value" "helsinki")
        (dict "Label" "Réicivíc" "Value" "reykjavík")
        (dict "Label" "Vársá" "Value" "warsaw")
        (dict "Label" "Ságrab" "Value" "zagreb")
        (dict "Label" "Taillinn" "Value" "tallinn")
        (dict "Label" "Vaileite" "Value" "valletta"))
    "Help" "Tosaigh ag clóscríobh chun scagadh."}}

Thar deich rogha, cuireann an pháirt select.js i bhfeidhm. Faoi bhun deich gcinn ní chuireann: níl i gcuardach ar dhornán rudaí ach troscán, ní cabhair.

Dhá rogha dhéag, Plain: diúltaíodh don fheabhsú

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_plain">Cathair</label>
  <select rst-input id="sel_plain" name="sel_plain">
    <option value="dublin" selected>Baile Átha Cliath</option>
    <option value="lisbon">Liospóin</option>
    <option value="madrid">Maidrid</option>
    <option value="berlin">Beirlín</option>
    <option value="rome">an Róimh</option>
    <option value="athens">an Aithin</option>
    <option value="helsinki">Heilsincí</option>
    <option value="reykjavík">Réicivíc</option>
    <option value="warsaw">Vársá</option>
    <option value="zagreb">Ságrab</option>
    <option value="tallinn">Taillinn</option>
    <option value="valletta">Vaileite</option>
  </select>
</div>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "field-select" dict
    "ID" "sel_plain"
    "Name" "sel_plain"
    "Label" "Cathair"
    "Options" (list
        (dict "Label" "Baile Átha Cliath" "Selected" true "Value" "dublin")
        (dict "Label" "Liospóin" "Value" "lisbon")
        (dict "Label" "Maidrid" "Value" "madrid")
        (dict "Label" "Beirlín" "Value" "berlin")
        (dict "Label" "an Róimh" "Value" "rome")
        (dict "Label" "an Aithin" "Value" "athens")
        (dict "Label" "Heilsincí" "Value" "helsinki")
        (dict "Label" "Réicivíc" "Value" "reykjavík")
        (dict "Label" "Vársá" "Value" "warsaw")
        (dict "Label" "Ságrab" "Value" "zagreb")
        (dict "Label" "Taillinn" "Value" "tallinn")
        (dict "Label" "Vaileite" "Value" "valletta"))
    "Plain" true}}

Riachtanach, le hearráid

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_error">Ról</label>
  <select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error">
    <option value="admin" selected>Riarthóir</option>
    <option value="editor">Eagarthóir</option>
    <option value="member">Ball</option>
  </select>
  <p rst-field-error id="sel_error-error" role="alert">Roghnaigh ról don duine seo.</p>
</div>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "field-select" dict
    "ID" "sel_error"
    "Name" "sel_error"
    "Label" "Ról"
    "Options" (list
        (dict "Label" "Riarthóir" "Selected" true "Value" "admin")
        (dict "Label" "Eagarthóir" "Value" "editor")
        (dict "Label" "Ball" "Value" "member"))
    "Required" true
    "Error" "Roghnaigh ról don duine seo."}}

Scríofa de láimh, le optgroups

Deasc Fón HTML

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_grouped">Réigiún</label>
  <select rst-input id="sel_grouped" name="sel_grouped" data-rst-select data-rst-select-filter="Clóscríobh chun scagadh" data-rst-select-results="{n} toradh" data-rst-select-result-one="1 toradh" data-rst-select-no-matches="Níl aon toradh">
    <optgroup label="an Eoraip">
      <option value="dublin" selected>Baile Átha Cliath</option>
      <option value="lisbon">Liospóin</option>
      <option value="warsaw">Vársá</option>
    </optgroup>
    <optgroup label="Meiriceá">
      <option value="montreal">Montréal</option>
      <option value="lima">Líoma</option>
      <option value="austin">Austin</option>
    </optgroup>
    <optgroup label="an Áise">
      <option value="osaka">Ósaca</option>
      <option value="hanoi">Hanoi</option>
      <option value="dhaka">Dacca</option>
    </optgroup>
    <optgroup label="an Afraic">
      <option value="accra">Accra</option>
      <option value="nairobi">Nairobi</option>
      <option value="tunis">Túinis</option>
    </optgroup>
  </select>
</div>

Is liosta cothrom é Options anseo, mar sin is marcáil a scríobhann an feidhmchlár féin iad na roghanna grúpáilte. Léiríonn select.js na grúpaí seachas iad a chaitheamh amach; is féidir le rogha scríofa de láimh an feabhsú a dhiúltú ar fad le data-rst-select="false".

field-check

An t-aon mheicníocht scoránaithe: fíorthicbhosca a bhfuil cuma laisce air, an méarchlár agus an léitheoir scáileáin slán.

Air

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_on" checked>
  <span rst-switch-track aria-hidden="true"></span>
  Seol ríomhphost chugam faoi fhreagraí
</label>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "field-check" dict
    "Name" "notify_on"
    "Label" "Seol ríomhphost chugam faoi fhreagraí"
    "Checked" true}}

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_off">
  <span rst-switch-track aria-hidden="true"></span>
  Seol ríomhphost chugam nuair a luaitear mé
</label>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "field-check" dict
    "Name" "notify_off"
    "Label" "Seol ríomhphost chugam nuair a luaitear mé"}}

Díchumasaithe

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_disabled" disabled>
  <span rst-switch-track aria-hidden="true"></span>
  Seol achoimre sheachtainiúil chugam
</label>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "field-check" dict
    "Name" "notify_disabled"
    "Label" "Seol achoimre sheachtainiúil chugam"
    "Disabled" true}}

choice-field

Cártaí roghanna: an grúpa raidió nó ticbhosca is fearr linn. Fanann Title gearr; míníonn Desc.

Roghnaigh ceann amháin

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<fieldset rst-choice>
  <legend>Plean</legend>
  <div rst-choice-cards>
    <label>
      <input type="radio" name="plan" value="free">
      <span>
        <span rst-choice-title>Saor in aisce</span>
        <span rst-choice-desc>Tionscadal amháin, tacaíocht phobail.</span>
      </span>
    </label>
    <label>
      <input type="radio" name="plan" value="pro" checked>
      <span>
        <span rst-choice-title>Pro</span>
        <span rst-choice-desc>Tionscadail gan teorainn agus bosca isteach tacaíochta.</span>
      </span>
    </label>
  </div>
</fieldset>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "choice-field" dict
    "Legend" "Plean"
    "Name" "plan"
    "Options" (list
        (dict "Desc" "Tionscadal amháin, tacaíocht phobail." "Title" "Saor in aisce" "Value" "free")
        (dict "Checked" true "Desc" "Tionscadail gan teorainn agus bosca isteach tacaíochta." "Title" "Pro" "Value" "pro"))}}

Roghnaigh cibé cinn

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<fieldset rst-choice>
  <legend>Seol chugam</legend>
  <div rst-choice-cards>
    <label>
      <input type="checkbox" name="digest" value="replies" checked>
      <span>
        <span rst-choice-title>Freagraí</span>
        <span rst-choice-desc>Láithreach.</span>
      </span>
    </label>
    <label>
      <input type="checkbox" name="digest" value="weekly">
      <span>
        <span rst-choice-title>Achoimre sheachtainiúil</span>
        <span rst-choice-desc>Maidin Dé Luain.</span>
      </span>
    </label>
  </div>
</fieldset>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "choice-field" dict
    "Legend" "Seol chugam"
    "Name" "digest"
    "Type" "checkbox"
    "Options" (list
        (dict "Checked" true "Desc" "Láithreach." "Title" "Freagraí" "Value" "replies")
        (dict "Desc" "Maidin Dé Luain." "Title" "Achoimre sheachtainiúil" "Value" "weekly"))}}

form-foot

Ró deiridh foirme: aon chnaipe seolta príomha agus nasc cealaithe roghnach. Is ancaire é Cealaigh, mar is nascleanúint é foirm a fhágáil.

Sábháil agus cealaigh

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">Sábháil an phostáil</button>
  <a rst-btn="lg" href="/posts">Ar ais chuig na postálacha</a>
</div>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "form-foot" dict
    "Submit" "Sábháil an phostáil"
    "CancelHref" "/posts"
    "CancelLabel" "Ar ais chuig na postálacha"}}

Cnaipe seolta amháin

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">Seol cuireadh</button>
</div>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "form-foot" dict "Submit" "Seol cuireadh"}}

Díomhaoin: an cnaipe sula dtarlaíonn aon rud

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">Foilsigh</button>
  <a rst-btn="lg" href="/posts">Ar ais chuig na postálacha</a>
</div>

Cuir é seo taobh istigh de <section rst-box><form rst-form>.

{{template "form-foot" dict
    "Submit" "Foilsigh"
    "CancelHref" "/posts"
    "CancelLabel" "Ar ais chuig na postálacha"}}

Faigheann cnaipe a ATHRAÍONN rud éigin staid luchtaithe; ní fhaigheann cnaipe nach nochtann ach rud éigin — nochtadh, anuas-roghchlár, cluaisín, mar shampla — a leithéid. Cuireann rastrillo.js an riail sin i bhfeidhm ar gach cnaipe seolta i ngach foirm, gan aon rud le rogha isteach ann.

Ag obair: an rud a scríobhann rastrillo.js agus an fhoirm ag imeacht

Deasc Fón HTML

Cuir é seo taobh istigh de <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>
    Foilsigh
  </button>
  <a rst-btn="lg" href="/posts">Ar ais chuig na postálacha</a>
</div>

An cnaipe ar cliceáladh air amháin: coinníonn gach cnaipe seolta eile san fhoirm a ainm agus a luach, agus tá an fhoirm féin cosanta ar dhara seoladh. Diúltaíonn data-busy="false" don riail, ar an bhfoirm nó ar chnaipe amháin; cuireann data-busy-label téacs eile ina áit. Gan scripteanna, ní tharlaíonn aon cheann díobh seo agus seoltar an fhoirm díreach mar a seoladh riamh, agus mar sin fanann an idempotence faoi chúram an fhreastalaí.

confirm-form

Ró gnímh an leathanaigh deimhnithe. Faigheann gníomhartha millteacha a mbealach féin seachas dialóg, mar sin níl aon rud le scriptiú.

Millteach

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <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">Cealaigh</a>
  <button type="submit" rst-btn="danger lg">Scrios an phostáil seo</button>
</form>

Cuir é seo taobh istigh de <section rst-box>.

{{template "confirm-form" dict
    "Action" "/posts/1/delete"
    "Label" "Scrios an phostáil seo"
    "Danger" true
    "Hidden" (list (list "csrf" "tok-123") (list "id" "1"))
    "CancelHref" "/posts/1"}}

Gnáthchás, foclaíocht chealaithe réamhshocraithe

Deasc Fón HTML Teimpléad

Cuir é seo taobh istigh de <section rst-box>.

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

Cuir é seo taobh istigh de <section rst-box>.

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

Gan CancelLabel, mar sin cuirtear an nasc cealaithe i bhfocail ón gcatalóg.