CSS: form-field

.instui-form-field — Một khung trường biểu mẫu: nhãn, các điều khiển của nó, và bố cục dòng nội tuyến, bắt buộc, hoặc chỉ đọc.

Một thông báo lỗi sẽ ẩn cho đến khi điều khiển của trường được :user-invalid (sau khi người dùng tương tác) hoặc bạn thêm lớp -invalid. Dùng -layout-inline để đặt nhãn bên cạnh các điều khiển và -layout-stacked để đặt nó phía trên. Cũng thiết lập gap riêng giữa nhãn, điều khiển và thông báo; xâu chuỗi một bộ tiện ích khoảng cách -gap-* sẽ ghi đè giá trị tích hợp đó.

Source: form-field.css

Khả năng truy cập

Phần tử <label> bao bọc điều khiển, nên văn bản nhãn sẽ đặt tên cho nó một cách nguyên thủy; dấu hoa thị biểu thị bắt buộc là trang trí và nên ẩn với công nghệ trợ giúp (aria-hidden), và thông báo lỗi sẽ hiện lên khi điều khiển được :user-invalid hoặc bạn thêm lớp -invalid.

Sử dụng

@import "@pantoken/components/components.css";
@import "@pantoken/components/form-field.css";

Các ví dụ

<label class="instui-form-field">
  <span class="label">Email address</span>
  <span class="controls"><input class="instui-text-input" type="email" placeholder="[email protected]"></span>
  <div class="instui-form-field-messages">
    <span class="instui-form-field-message -type-hint">We'll never share it.</span>
    <span class="instui-form-field-message -type-error">Enter a valid email address.</span>
  </div>
</label>

Cấu trúc

.instui-form-field
  .label
  .controls
    text-input (component)
  form-field-messages (component)

flowchart TD n0[".instui-form-field"]:::cssdoc-root n1(".label"):::cssdoc-part n2(".controls"):::cssdoc-part n3(["text-input"]):::cssdoc-component n4(["form-field-messages"]):::cssdoc-component n0 --> n1 n2 --> n3 n0 --> n2 n0 --> n4 click n3 "/api/css/text-input.md" click n4 "/api/css/form-field-messages.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Bộ sửa

Bộ sửa	Mô tả
.-inline	Bố cục nội tuyến (viết tắt cho -layout-inline).
.-invalid	Trạng thái không hợp lệ (lỗi).
.-label-align-end	Căn chéo văn bản nhãn về cuối.
.-label-align-start	Căn chéo văn bản nhãn về đầu.
.-layout-inline	Bố cục nội tuyến: nhãn bên cạnh các điều khiển.
.-layout-stacked	Bố cục xếp chồng: nhãn phía trên các điều khiển.
.-readonly	Trạng thái chỉ đọc.
.-v-align-bottom	Căn đáy nhãn với các điều khiển.
.-v-align-top	Căn đỉnh nhãn với các điều khiển.

Phần

Phần	Mô tả
.controls	Khu vực điều khiển bên cạnh hoặc bên dưới nhãn.
.label	Nhãn của trường.

Phần tử giả

Phần tử giả	Mô tả
::after	Hiển thị dấu hoa thị trang trí biểu thị trường bắt buộc sau văn bản nhãn khi trường là bắt buộc.

Trạng thái

Trạng thái	Mô tả
:required	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-form-field-layout-asterisk-color	<color>	LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-form-field-layout-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-form-field-layout-font-size	<length>	1rem
--instui-component-form-field-layout-font-weight	<integer>	400
--instui-component-form-field-layout-gap-inputs	<length>	0.75rem
--instui-component-form-field-layout-gap-primitives	<length>	0.5rem
--instui-component-form-field-layout-line-height	<length>	1.125rem
--instui-component-form-field-layout-readonly-text-color	<color>	LightDarklight-dark(#576773, #AAB0B5)
--instui-component-form-field-layout-text-color	<color>	LightDarklight-dark(#273540, #ffffff)

Hỗ trợ trình duyệt

• Chứa kiểu phần tử của chính nó bằng at-rule CSS @scope; cần Chromium, Firefox hoặc Safari phiên bản gần đây.

Các thành phần phụ

• form-field-messages
• text-input

Liên quan

• form-field-messages — Hiển thị gợi ý, thông báo lỗi và thông báo thành công của trường.
• form-field-group — Gom các trường liên quan dưới một legend chung.