แบบฟอร์ม

ภาพรวม

การควบคุมแบบฟอร์มของ Bootstrap ขยายรูปแบบฟอร์มที่รีบูตพร้อมคลาส ใช้คลาสเหล่านี้เพื่อเลือกจอแสดงผลที่ปรับแต่งเองเพื่อการเรนเดอร์ที่สอดคล้องกันมากขึ้นในเบราว์เซอร์และอุปกรณ์

อย่าลืมใช้typeแอตทริบิวต์ที่เหมาะสมกับอินพุตทั้งหมด (เช่นemailสำหรับที่อยู่อีเมลหรือnumberข้อมูลตัวเลข) เพื่อใช้ประโยชน์จากการควบคุมการป้อนข้อมูลที่ใหม่กว่า เช่น การยืนยันอีเมล การเลือกหมายเลข และอื่นๆ

ต่อไปนี้คือตัวอย่างสั้นๆ ในการสาธิตรูปแบบฟอร์มของ Bootstrap โปรดอ่านเอกสารเกี่ยวกับชั้นเรียนที่จำเป็น เค้าโครงแบบฟอร์ม และอื่นๆ

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

ข้อความแบบฟอร์ม

สามารถสร้างข้อความฟอร์มระดับบล็อกหรือระดับอินไลน์ได้โดยใช้.form-text.

ข้อความแบบฟอร์มด้านล่างอินพุตสามารถจัดรูปแบบ.form-textด้วย หากจะใช้องค์ประกอบระดับบล็อก ระยะขอบด้านบนจะถูกเพิ่มเพื่อให้เว้นระยะห่างได้ง่ายจากอินพุตด้านบน

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

ข้อความแบบอินไลน์สามารถใช้องค์ประกอบ HTML แบบอินไลน์ทั่วไป (ไม่ว่าจะเป็น<span>, <small>หรืออย่างอื่น) โดยไม่มีอะไรมากไปกว่า.form-textคลาส

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

แบบฟอร์มคนพิการ

เพิ่มdisabledแอตทริบิวต์บูลีนบนอินพุตเพื่อป้องกันการโต้ตอบของผู้ใช้และทำให้ดูจางลง

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

เพิ่มdisabledแอตทริบิวต์เพื่อ<fieldset>ปิดใช้งานการควบคุมทั้งหมดภายใน เบราว์เซอร์จะถือว่าตัวควบคุมฟอร์มดั้งเดิมทั้งหมด ( <input>, <select>และ<button>องค์ประกอบ) ภายใน a <fieldset disabled>ถูกปิดใช้งาน โดยจะป้องกันไม่ให้แป้นพิมพ์และเมาส์โต้ตอบกัน

อย่างไรก็ตาม หากแบบฟอร์มของคุณมีองค์ประกอบที่เหมือนปุ่มแบบกำหนดเอง เช่น<a class="btn btn-*">...</a>สิ่งเหล่านี้จะได้รับสไตล์ของpointer-events: noneเท่านั้น ซึ่งหมายความว่ายังคงโฟกัสได้และใช้งานได้โดยใช้แป้นพิมพ์ ในกรณีนี้ คุณต้องปรับเปลี่ยนการควบคุมเหล่านี้ด้วยตนเองโดยเพิ่มtabindex="-1"เพื่อป้องกันไม่ให้ได้รับโฟกัสและaria-disabled="disabled"ส่งสัญญาณสถานะไปยังเทคโนโลยีอำนวยความสะดวก

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

การเข้าถึง

ตรวจสอบให้แน่ใจว่าการควบคุมแบบฟอร์มทั้งหมดมีชื่อที่สามารถเข้าถึงได้อย่างเหมาะสม เพื่อให้สามารถสื่อถึงวัตถุประสงค์ไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก วิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนี้คือการใช้<label>องค์ประกอบ หรือ—ในกรณีของปุ่ม—เพื่อรวมข้อความอธิบายที่เพียงพอเป็นส่วนหนึ่งของ<button>...</button>เนื้อหา

สำหรับสถานการณ์ที่ไม่สามารถรวม<label>เนื้อหาข้อความที่มองเห็นได้หรือเหมาะสม มีวิธีอื่นในการระบุชื่อที่สามารถเข้าถึงได้ เช่น:

• <label>องค์ประกอบที่ซ่อนอยู่โดยใช้.visually-hiddenคลาส
• ชี้ไปที่องค์ประกอบที่มีอยู่ซึ่งสามารถทำหน้าที่เป็นป้ายกำกับโดยใช้aria-labelledby
• ให้titleแอตทริบิวต์
• การตั้งชื่อที่สามารถเข้าถึงได้อย่างชัดเจนบนองค์ประกอบโดยใช้aria-label

หากไม่มีสิ่งเหล่านี้ เทคโนโลยีอำนวยความสะดวกอาจหันไปใช้placeholderแอตทริบิวต์เป็นทางเลือกสำหรับชื่อ<input>และ<textarea>องค์ประกอบ ที่สามารถเข้าถึงได้ ตัวอย่างในส่วนนี้จะนำเสนอแนวทางเฉพาะบางกรณีที่แนะนำ

ในขณะที่ใช้เนื้อหาที่มองเห็นได้ ( .visually-hidden, aria-labelและแม้แต่placeholderเนื้อหาที่หายไปเมื่อฟิลด์แบบฟอร์มมีเนื้อหา) จะเป็นประโยชน์ต่อผู้ใช้เทคโนโลยีอำนวยความสะดวก การไม่มีข้อความป้ายกำกับที่มองเห็นได้อาจเป็นปัญหาสำหรับผู้ใช้บางคน ฉลากที่มองเห็นได้บางรูปแบบโดยทั่วไปเป็นแนวทางที่ดีที่สุด ทั้งสำหรับการช่วยสำหรับการเข้าถึงและการใช้งาน

ซาส

ตัวแปรแบบฟอร์มจำนวนมากถูกกำหนดไว้ที่ระดับทั่วไปเพื่อนำกลับมาใช้ใหม่และขยายโดยแต่ละองค์ประกอบของแบบฟอร์ม คุณจะเห็นสิ่งเหล่านี้เป็น$input-btn-*และ$input-*ตัวแปร บ่อยที่สุด

ตัวแปร

$input-btn-*ตัวแปรเป็นตัวแปรส่วนกลางที่ใช้ร่วมกันระหว่างปุ่มและส่วนประกอบแบบฟอร์มของเรา คุณจะพบว่าค่าเหล่านี้มักถูกกำหนดค่าใหม่ให้กับตัวแปรเฉพาะส่วนประกอบอื่นๆ

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;