Lựa chọn và thao tác

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_few">Vai trò</label>
  <select rst-input id="sel_few" name="sel_few">
    <option value="admin" selected>Quản trị viên</option>
    <option value="editor">Biên tập viên</option>
    <option value="member">Thành viên</option>
  </select>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_many">Thành phố</label>
  <select rst-input id="sel_many" name="sel_many" data-rst-select data-rst-select-filter="Nhập để lọc" data-rst-select-results="{n} kết quả" data-rst-select-result-one="1 kết quả" data-rst-select-no-matches="Không có kết quả phù hợp" aria-describedby="sel_many-help">
    <option value="dublin" selected>Dublin</option>
    <option value="lisbon">Lisbon</option>
    <option value="madrid">Madrid</option>
    <option value="berlin">Berlin</option>
    <option value="rome">Roma</option>
    <option value="athens">Athens</option>
    <option value="helsinki">Helsinki</option>
    <option value="reykjavík">Reykjavík</option>
    <option value="warsaw">Warszawa</option>
    <option value="zagreb">Zagreb</option>
    <option value="tallinn">Tallinn</option>
    <option value="valletta">Valletta</option>
  </select>
  <p rst-field-help id="sel_many-help">Bắt đầu gõ để lọc.</p>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_plain">Thành phố</label>
  <select rst-input id="sel_plain" name="sel_plain">
    <option value="dublin" selected>Dublin</option>
    <option value="lisbon">Lisbon</option>
    <option value="madrid">Madrid</option>
    <option value="berlin">Berlin</option>
    <option value="rome">Roma</option>
    <option value="athens">Athens</option>
    <option value="helsinki">Helsinki</option>
    <option value="reykjavík">Reykjavík</option>
    <option value="warsaw">Warszawa</option>
    <option value="zagreb">Zagreb</option>
    <option value="tallinn">Tallinn</option>
    <option value="valletta">Valletta</option>
  </select>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_error">Vai trò</label>
  <select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error">
    <option value="admin" selected>Quản trị viên</option>
    <option value="editor">Biên tập viên</option>
    <option value="member">Thành viên</option>
  </select>
  <p rst-field-error id="sel_error-error" role="alert">Chọn một vai trò cho người này.</p>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="sel_grouped">Khu vực</label>
  <select rst-input id="sel_grouped" name="sel_grouped" data-rst-select data-rst-select-filter="Nhập để lọc" data-rst-select-results="{n} kết quả" data-rst-select-result-one="1 kết quả" data-rst-select-no-matches="Không có kết quả phù hợp">
    <optgroup label="Châu Âu">
      <option value="dublin" selected>Dublin</option>
      <option value="lisbon">Lisbon</option>
      <option value="warsaw">Warszawa</option>
    </optgroup>
    <optgroup label="Châu Mỹ">
      <option value="montreal">Montréal</option>
      <option value="lima">Lima</option>
      <option value="austin">Austin</option>
    </optgroup>
    <optgroup label="Châu Á">
      <option value="osaka">Osaka</option>
      <option value="hanoi">Hà Nội</option>
      <option value="dhaka">Dhaka</option>
    </optgroup>
    <optgroup label="Châu Phi">
      <option value="accra">Accra</option>
      <option value="nairobi">Nairobi</option>
      <option value="tunis">Tunis</option>
    </optgroup>
  </select>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_on" checked>
  <span rst-switch-track aria-hidden="true"></span>
  Gửi email cho tôi khi có trả lời
</label>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_off">
  <span rst-switch-track aria-hidden="true"></span>
  Gửi email cho tôi khi được nhắc đến
</label>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<label rst-switch>
  <input type="checkbox" name="notify_disabled" disabled>
  <span rst-switch-track aria-hidden="true"></span>
  Gửi email tóm tắt hằng tuần cho tôi
</label>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<fieldset rst-choice>
  <legend>Gói</legend>
  <div rst-choice-cards>
    <label>
      <input type="radio" name="plan" value="free">
      <span>
        <span rst-choice-title>Miễn phí</span>
        <span rst-choice-desc>Một dự án, hỗ trợ từ cộng đồng.</span>
      </span>
    </label>
    <label>
      <input type="radio" name="plan" value="pro" checked>
      <span>
        <span rst-choice-title>Chuyên nghiệp</span>
        <span rst-choice-desc>Không giới hạn dự án và một hộp thư hỗ trợ.</span>
      </span>
    </label>
  </div>
</fieldset>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<fieldset rst-choice>
  <legend>Gửi cho tôi</legend>
  <div rst-choice-cards>
    <label>
      <input type="checkbox" name="digest" value="replies" checked>
      <span>
        <span rst-choice-title>Trả lời</span>
        <span rst-choice-desc>Ngay khi có.</span>
      </span>
    </label>
    <label>
      <input type="checkbox" name="digest" value="weekly">
      <span>
        <span rst-choice-title>Bản tóm tắt hằng tuần</span>
        <span rst-choice-desc>Sáng thứ Hai.</span>
      </span>
    </label>
  </div>
</fieldset>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">Lưu bài viết</button>
  <a rst-btn="lg" href="/posts">Quay lại bài viết</a>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">Gửi lời mời</button>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">Xuất bản</button>
  <a rst-btn="lg" href="/posts">Quay lại bài viết</a>
</div>

Đặt đoạn này bên trong <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>
    Xuất bản
  </button>
  <a rst-btn="lg" href="/posts">Quay lại bài viết</a>
</div>

Đặt đoạn này bên trong <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">Hủy</a>
  <button type="submit" rst-btn="danger lg">Xóa bài viết này</button>
</form>

Đặt đoạn này bên trong <section rst-box>.

<form rst-form-actions method="post" action="/posts/1/publish">
  <a rst-btn="ghost lg" href="/posts/1">Hủy</a>
  <button type="submit" rst-btn="primary lg">Xuất bản</button>
</form>