Biểu mẫu

Các trường mà một người gõ vào, ở những trạng thái mà một biểu mẫu thật đặt chúng vào. Mỗi cái nằm trong một rst-box có đệm, vì đó là quy tắc mà các mảnh này mặc định.

Mỗi ví dụ đều hoạt động thật, nhưng các liên kết trong đó không dẫn đến đâu. HTML hiển thị mã đánh dấu để sao chép.

field

Nhãn, ô nhập, gợi ý tuỳ chọn, trợ giúp và lỗi. Điều khiển dạng chữ thông thường, có ID rõ ràng.

Trơn

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="f_bare">Tiêu đề</label>
  <input rst-input type="text" id="f_bare" name="f_bare">
</div>

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

{{template "field" dict "ID" "f_bare" "Name" "f_bare" "Label" "Tiêu đề"}}

Kèm một gợi ý

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="f_hint">Đường dẫn rút gọn <span rst-field-hint>(chữ thường, không có dấu cách)</span></label>
  <input rst-input type="text" id="f_hint" name="f_hint">
</div>

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

{{template "field" dict
    "ID" "f_hint"
    "Name" "f_hint"
    "Label" "Đường dẫn rút gọn"
    "Hint" "chữ thường, không có dấu cách"}}

Kèm trợ giúp bên dưới điều khiển

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="f_help">Email</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">Chúng tôi chỉ dùng nó để gửi phản hồi cho bạn.</p>
</div>

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

{{template "field" dict
    "ID" "f_help"
    "Name" "f_help"
    "Label" "Email"
    "Type" "email"
    "Help" "Chúng tôi chỉ dùng nó để gửi phản hồi cho bạn."
    "Autocomplete" "email"}}

Bắt buộc

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="f_required">Họ và tên</label>
  <input rst-input type="text" id="f_required" name="f_required" required>
</div>

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

{{template "field" dict
    "ID" "f_required"
    "Name" "f_required"
    "Label" "Họ và tên"
    "Required" true}}

Kèm một lỗi

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="f_error">Email</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">Đó có vẻ không phải là địa chỉ email.</p>
</div>

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

{{template "field" dict
    "ID" "f_error"
    "Name" "f_error"
    "Label" "Email"
    "Type" "email"
    "Error" "Đó có vẻ không phải là địa chỉ email."
    "Value" "grace@"}}

Ngắn

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="f_short">Mã bưu chính</label>
  <input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div>

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

{{template "field" dict
    "ID" "f_short"
    "Name" "f_short"
    "Label" "Mã bưu chính"
    "Short" true
    "Value" "D02 XY45"}}

Trường chính

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="f_primary">Tiêu đề</label>
  <input rst-input="primary" type="text" id="f_primary" name="f_primary" value="Cuộc họp hội đồng quý">
</div>

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

{{template "field" dict
    "ID" "f_primary"
    "Name" "f_primary"
    "Label" "Tiêu đề"
    "Primary" true
    "Value" "Cuộc họp hội đồng quý"}}

field-text

Một ô nhập chữ có nhãn, id suy ra từ Name. Dấu sao của chỉ báo bắt buộc là aria-hidden; tín hiệu cho máy đọc là thuộc tính required của ô nhập.

Trơn

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ft_bare">Tiêu đề</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div>

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

{{template "field-text" dict "Name" "ft_bare" "Label" "Tiêu đề"}}

Kèm một gợi ý

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ft_hint">Dòng tiêu đề</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">Hiển thị trong danh sách.</small>
</div>

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

{{template "field-text" dict
    "Name" "ft_hint"
    "Label" "Dòng tiêu đề"
    "Hint" "Hiển thị trong danh sách."}}

Bắt buộc

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ft_required">Tên hiển thị <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div>

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

{{template "field-text" dict
    "Name" "ft_required"
    "Label" "Tên hiển thị"
    "Required" true
    "Autocomplete" "nickname"}}

Kèm một lỗi

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ft_error">Tiêu đề</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="Ghi chú phát hành" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">Đã có bài viết với tiêu đề đó.</small>
</div>

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

{{template "field-text" dict
    "Name" "ft_error"
    "Label" "Tiêu đề"
    "Value" "Ghi chú phát hành"
    "Error" "Đã có bài viết với tiêu đề đó."}}

Trường chính

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ft_primary">Đó là gì?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="Cuộc họp hội đồng quý">
</div>

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

{{template "field-text" dict
    "Name" "ft_primary"
    "Label" "Đó là gì?"
    "Value" "Cuộc họp hội đồng quý"
    "Primary" true}}

Thêm Primary vào trường chính của biểu mẫu, ví dụ tiêu đề hoặc tên, để ô nhập trông nổi bật hơn.

field-url

Trường địa chỉ web chấp nhận example.com có hoặc không có https://. Dùng kèm form.URL ở phía máy chủ.

Trơn

Máy tính Điện thoại HTML Template

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

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

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

{{template "field-url" dict "Name" "fu_bare" "Label" "Trang web"}}

Kèm một gợi ý

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="fu_hint">Trang web công ty</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">Bạn có thể bỏ phần https.</small>
</div>

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

{{template "field-url" dict
    "Name" "fu_hint"
    "Label" "Trang web công ty"
    "Hint" "Bạn có thể bỏ phần https."}}

Kèm một lỗi

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="fu_error">Trang web</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">Hãy nhập một địa chỉ web, ví dụ example.com.</small>
</div>

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

{{template "field-url" dict
    "Name" "fu_error"
    "Label" "Trang web"
    "Value" "brightwater"
    "Error" "Hãy nhập một địa chỉ web, ví dụ example.com."}}

field-money

Một số tiền bằng một loại tiền tệ. Mã tiền tệ hiện cạnh nhãn và được gửi cùng biểu mẫu, nên nếu tiền tệ thay đổi trong lúc ai đó đang gõ thì sẽ bị phát hiện khi lưu. Dùng kèm Currency của form.Field ở phía máy chủ.

Trơn

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="fm_bare">Giá vé <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>

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

{{template "field-money" dict
    "Name" "fm_bare"
    "Label" "Giá vé"
    "Locale" "en"
    "Currency" "EUR"}}

Kèm một gợi ý

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="fm_hint">Giá vé <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">Ví dụ: 12.50 hoặc €12.50.</small>
</div>

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

{{template "field-money" dict
    "Name" "fm_hint"
    "Label" "Giá vé"
    "Locale" "en"
    "Currency" "EUR"
    "Hint" "Ví dụ: 12.50 hoặc €12.50."}}

Kèm một lỗi

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="fm_error">Giá vé <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">Hãy dùng dấu chấm cho phần thập phân, ví dụ 12.50.</small>
</div>

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

{{template "field-money" dict
    "Name" "fm_error"
    "Label" "Giá vé"
    "Value" "12,.50"
    "Locale" "en"
    "Currency" "EUR"
    "Error" "Hãy dùng dấu chấm cho phần thập phân, ví dụ 12.50."}}

field-textarea

Lớp vỏ của field-text bọc quanh một textarea.

Trơn

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ta_bare">Ghi chú</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div>

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

{{template "field-textarea" dict "Name" "ta_bare" "Label" "Ghi chú" "Rows" 3}}

Kèm một gợi ý

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ta_hint">Tiểu sử</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">Hiển thị trên hồ sơ của bạn.</small>
</div>

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

{{template "field-textarea" dict
    "Name" "ta_hint"
    "Label" "Tiểu sử"
    "Rows" 3
    "Hint" "Hiển thị trên hồ sơ của bạn."}}

Kèm một lỗi

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ta_error">Tóm tắt</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">Phần tóm tắt cần ít nhất hai mươi ký tự.</small>
</div>

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

{{template "field-textarea" dict
    "Name" "ta_error"
    "Label" "Tóm tắt"
    "Value" "…"
    "Rows" 3
    "Error" "Phần tóm tắt cần ít nhất hai mươi ký tự."}}

Bắt buộc

Máy tính Điện thoại HTML Template

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

<div rst-field>
  <label rst-field-label for="ta_required">Lý do hoàn tiền <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div>

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

{{template "field-textarea" dict
    "Name" "ta_required"
    "Label" "Lý do hoàn tiền"
    "Rows" 3
    "Required" true}}