CSS: form-field ​

.instui-form-field — ตัวห่อฟิลด์ฟอร์ม: ป้ายชื่อ คอนโทรลของมัน และเลย์เอาต์แบบวางเรียงในบรรทัด จำเป็น หรืออ่านอย่างเดียว

ข้อความแสดงข้อผิดพลาดจะถูกซ่อนจนกว่าคอนโทรลของฟิลด์จะเป็น :user-invalid (หลังผู้ใช้โต้ตอบ) หรือเมื่อเพิ่มคลาส -invalid ใช้ -layout-inline เพื่อวางป้ายชื่อข้างคอนโทรล และ -layout-stacked เพื่อวางไว้ด้านบน นอกจากนี้ยังตั้งค่า gap ของตัวเองระหว่างป้ายชื่อ คอนโทรล และข้อความ; การเชนตัวแก้ไขระยะห่าง -gap-* จะเขียนทับค่าที่ฝังมา

Source: form-field.css

การเข้าถึง ​

องค์ประกอบ <label> ห่อคอนโทรลไว้ ทำให้ข้อความป้ายชื่อเรียกชื่อโดยเนทีฟ; เครื่องหมายดอกจันสำหรับฟิลด์ที่จำเป็นเป็นการตกแต่งและควรถูกซ่อนจากเทคโนโลยีช่วยเหลือ (aria-hidden) และข้อความข้อผิดพลาดจะแสดงเมื่อคอนโทรลเป็น :user-invalid หรือเมื่อเพิ่มคลาส -invalid

การใช้งาน ​

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

ตัวอย่าง ​

html
<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>

โครงสร้าง ​

text
.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;

ตัวปรับแต่ง ​

ตัวปรับแต่งคำอธิบาย
.-inlineเลย์เอาต์แบบอินไลน์ (คำย่อสำหรับ -layout-inline)
.-invalidสถานะไม่ถูกต้อง (ข้อผิดพลาด).
.-label-align-endจัดแนวข้อความป้ายชื่อชิดจบ
.-label-align-startจัดแนวข้อความป้ายชื่อชิดเริ่ม
.-layout-inlineเลย์เอาต์อินไลน์: ป้ายชื่อวางข้างคอนโทรล
.-layout-stackedเลย์เอาต์แบบซ้อน: ป้ายชื่อวางอยู่เหนือคอนโทรล
.-readonlyสถานะอ่านอย่างเดียว.
.-v-align-bottomจัดแนวป้ายชื่อชิดด้านล่างกับคอนโทรล
.-v-align-topจัดแนวป้ายชื่อชิดด้านบนกับคอนโทรล

ส่วนประกอบ ​

ส่วนคำอธิบาย
.controlsพื้นที่คอนโทรลที่อยู่ข้างหรือใต้ป้ายชื่อ
.labelป้ายชื่อของฟิลด์

องค์ประกอบเทียม ​

องค์ประกอบเทียมคำอธิบาย
::afterเรนเดอร์ดอกจันตกแต่งสำหรับฟิลด์ที่จำเป็นหลังข้อความป้ายชื่อเมื่อฟิลด์นั้นจำเป็น

สถานะ ​

สถานะคำอธิบาย
:required—

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--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)

รองรับเบราว์เซอร์ ​

  • มีสไตล์ขององค์ประกอบอยู่ภายในด้วยกฎ CSS @scope; ต้องการ Chromium, Firefox, หรือ Safari เวอร์ชันใหม่.

ส่วนประกอบย่อย ​

ที่เกี่ยวข้อง ​

  • form-field-messages — เรนเดอร์ข้อความคำแนะนำ ข้อผิดพลาด และความสำเร็จของฟิลด์
  • form-field-group — จัดกลุ่มฟิลด์ที่เกี่ยวข้องภายใต้ legend ร่วม