Source

แบบฟอร์ม

ตัวอย่างและแนวทางการใช้งานสำหรับรูปแบบการควบคุมแบบฟอร์ม ตัวเลือกเค้าโครง และส่วนประกอบแบบกำหนดเองสำหรับการสร้างแบบฟอร์มที่หลากหลาย

ภาพรวม

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

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

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

เราจะไม่เปิดเผยอีเมลของคุณกับคนอื่น
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="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>

การควบคุมแบบฟอร์ม

ตัวควบคุมรูปแบบข้อความ เช่น<input>s, <select>s และ<textarea>s ถูกจัดสไตล์ด้วย.form-controlคลาส รวมถึงสไตล์สำหรับลักษณะทั่วไป สถานะโฟกัส ขนาด และอื่นๆ

อย่าลืมสำรวจแบบฟอร์มที่กำหนดเอง ของเรา เพื่อให้มีสไตล์<select>เพิ่มเติม

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

สำหรับอินพุตไฟล์ ให้สลับ.form-controlสำหรับ.form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

ขนาด

กำหนดความสูงโดยใช้คลาสเช่น.form-control-lgและ.form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

อ่านเท่านั้น

เพิ่มreadonlyแอตทริบิวต์บูลีนบนอินพุตเพื่อป้องกันการแก้ไขค่าของอินพุต อินพุตแบบอ่านอย่างเดียวจะสว่างกว่า (เช่นเดียวกับอินพุตที่ปิดใช้งาน) แต่ยังคงเคอร์เซอร์มาตรฐานไว้

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

ข้อความธรรมดาแบบอ่านอย่างเดียว

หากคุณต้องการให้<input readonly>องค์ประกอบในแบบฟอร์มของคุณจัดรูปแบบเป็นข้อความธรรมดา ให้ใช้.form-control-plaintextคลาสเพื่อลบการจัดรูปแบบฟิลด์เริ่มต้นของฟอร์ม และรักษาระยะขอบและช่องว่างภายในที่ถูกต้อง

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

ช่องทำเครื่องหมายและวิทยุ

ช่องทำเครื่องหมายเริ่มต้นและตัวเลือกวิทยุได้รับการปรับปรุงด้วยความช่วยเหลือของ.form-checkคลาสเดียวสำหรับอินพุตทั้งสองประเภทที่ปรับปรุงการจัดวางและการทำงานขององค์ประกอบ HTML ช่องทำเครื่องหมายมีไว้สำหรับเลือกหนึ่งตัวเลือกหรือหลายตัวเลือกในรายการ ในขณะที่วิทยุมีไว้สำหรับเลือกตัวเลือกหนึ่งตัวเลือกจากหลายตัวเลือก

รองรับช่องทำเครื่องหมายและวิทยุที่ปิดใช้งาน แต่เพื่อให้not-allowedเคอร์เซอร์วางเมาส์เหนือ<label>พาเรนต์ คุณจะต้องเพิ่มdisabledแอตทริบิวต์ลงในไฟล์.form-check-input. แอตทริบิวต์ที่ปิดใช้งานจะใช้สีที่อ่อนกว่าเพื่อช่วยระบุสถานะของอินพุต

ช่องทำเครื่องหมายและการใช้วิทยุสร้างขึ้นเพื่อรองรับการตรวจสอบความถูกต้องของแบบฟอร์มแบบ HTML และมีป้ายกำกับที่กระชับและเข้าถึงได้ ดังนั้น<input>s และ<label>s ของเราจึงเป็นองค์ประกอบพี่น้องเมื่อเทียบกับ<input>ภายใน a <label>. นี่เป็นรายละเอียดที่ละเอียดกว่าเล็กน้อย เนื่องจากคุณต้องระบุidและ แอตทริบิวต์เพื่อ เชื่อมforโยง<input>และ<label>

ค่าเริ่มต้น (ซ้อน)

โดยค่าเริ่มต้น ช่องกาเครื่องหมายและรายการวิทยุจำนวนเท่าใดก็ได้ที่เป็นพี่น้องกันในทันที จะถูกเรียงซ้อนในแนวตั้งและเว้นระยะห่างอย่างเหมาะสม.form-checkด้วย

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

อินไลน์

จัดกลุ่มกล่องกาเครื่องหมายหรือวิทยุในแถวแนวนอนเดียวกันโดยเพิ่ม.form-check-inlineลงใน.form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

ไม่มีฉลาก

เพิ่ม.position-staticลงในอินพุต.form-checkที่ไม่มีข้อความป้ายกำกับ อย่าลืมจัดเตรียมฉลากบางรูปแบบสำหรับเทคโนโลยีอำนวยความสะดวก (เช่น การใช้aria-label)

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

เค้าโครง

เนื่องจาก Bootstrap นำไปใช้display: blockและwidth: 100%กับการควบคุมแบบฟอร์มเกือบทั้งหมดของเรา แบบฟอร์มจะเรียงตามค่าเริ่มต้นในแนวตั้งตามค่าเริ่มต้น สามารถใช้คลาสเพิ่มเติมเพื่อเปลี่ยนเลย์เอาต์นี้ตามฟอร์มได้

แบบฟอร์มกลุ่ม

คลาส.form-groupเป็นวิธีที่ง่ายที่สุดในการเพิ่มโครงสร้างลงในแบบฟอร์ม มีคลาสที่ยืดหยุ่นซึ่งสนับสนุนการจัดกลุ่มป้ายกำกับ การควบคุม ข้อความช่วยเหลือเพิ่มเติม และข้อความตรวจสอบแบบฟอร์มอย่างเหมาะสม โดยค่าเริ่มต้นจะใช้ได้เท่านั้นmargin-bottomแต่จะเลือกสไตล์เพิ่มเติม.form-inlineตามต้องการ ใช้กับ<fieldset>s, <div>s หรือองค์ประกอบอื่นๆ เกือบทั้งหมด

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

แบบฟอร์มตาราง

แบบฟอร์มที่ซับซ้อนมากขึ้นสามารถสร้างได้โดยใช้คลาสกริดของเรา ใช้สิ่งเหล่านี้สำหรับเค้าโครงแบบฟอร์มที่ต้องใช้หลายคอลัมน์ ความกว้างที่แตกต่างกัน และตัวเลือกการจัดตำแหน่งเพิ่มเติม

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

แบบฟอร์มแถว

คุณยังสามารถสลับ.rowเป็น.form-rowรูปแบบของแถวกริดมาตรฐานของเราที่แทนที่รางน้ำคอลัมน์เริ่มต้นสำหรับรูปแบบที่แคบและกะทัดรัดยิ่งขึ้น

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

เลย์เอาต์ที่ซับซ้อนมากขึ้นสามารถสร้างได้ด้วยระบบกริด

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

รูปแบบแนวนอน

สร้างฟอร์มแนวนอนด้วยกริดโดยเพิ่ม.rowคลาสลงในฟอร์มกลุ่ม และใช้.col-*-*คลาสเพื่อระบุความกว้างของป้ายกำกับและตัวควบคุมของคุณ อย่าลืมเพิ่มลง ใน s .col-form-labelของคุณ<label>ด้วย เพื่อให้มีศูนย์กลางในแนวตั้งด้วยการควบคุมแบบฟอร์มที่เกี่ยวข้อง

ในบางครั้ง คุณอาจต้องใช้ยูทิลิตี้ระยะขอบหรือช่องว่างภายในเพื่อสร้างการจัดตำแหน่งที่สมบูรณ์แบบที่คุณต้องการ ตัวอย่างเช่น เราได้ลบpadding-topบนป้ายกำกับอินพุตวิทยุแบบเรียงซ้อนเพื่อให้จัดแนวข้อความพื้นฐานได้ดีขึ้น

วิทยุ
ช่องทำเครื่องหมาย
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
ขนาดฉลากแบบฟอร์มแนวนอน

ให้แน่ใจว่าได้ใช้.col-form-label-smหรือ.col-form-label-lgกับ<label>s หรือ<legend>ของคุณ ให้ถูกต้องตามขนาดของ.form-control-lgและ.form-control-sm

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

ขนาดคอลัมน์

ดังที่แสดงในตัวอย่างก่อนหน้านี้ ระบบกริดของเราอนุญาตให้คุณใส่ s จำนวนเท่าใดก็ได้ภายใน.cola .rowหรือ .form-rowพวกเขาจะแบ่งความกว้างที่ใช้ได้เท่า ๆ กัน คุณยังสามารถเลือกชุดย่อยของคอลัมน์ของคุณเพื่อใช้พื้นที่มากหรือน้อย ในขณะที่ส่วนที่เหลือ.colจะแบ่งส่วนที่เหลือเท่าๆ กัน โดยมีคลาสคอลัมน์เฉพาะ.col-7เช่น

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

ปรับขนาดอัตโนมัติ

ตัวอย่างด้านล่างใช้ยูทิลิตี flexbox เพื่อจัดกึ่งกลางเนื้อหาในแนวตั้งและเปลี่ยนแปลง.colเพื่อ.col-autoให้คอลัมน์ของคุณใช้พื้นที่เพียงเท่าที่จำเป็น กล่าวอีกนัยหนึ่งคือคอลัมน์จะปรับขนาดตามเนื้อหา

@
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

จากนั้นคุณสามารถรีมิกซ์อีกครั้งด้วยคลาสคอลัมน์เฉพาะขนาด

@
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

และแน่นอนว่ารองรับการควบคุมแบบฟอร์มแบบกำหนดเอง

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

แบบฟอร์มอินไลน์

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

  • การควบคุมคือการdisplay: flexยุบช่องว่าง HTML ใดๆ และช่วยให้คุณสามารถจัดเตรียมการควบคุมการจัดตำแหน่งด้วยยูทิลิตี้ การ เว้นวรรคและflexbox
  • การควบคุมและกลุ่มอินพุตได้รับเพื่อwidth: autoแทนที่ Bootstrap defaultwidth: 100%
  • การควบคุมจะปรากฏแบบอินไลน์ในวิวพอร์ตที่มีความกว้างอย่างน้อย 576pxเพื่อพิจารณาวิวพอร์ตแบบแคบบนอุปกรณ์มือถือ

คุณอาจต้องระบุความกว้างและการจัดตำแหน่งของตัวควบคุมฟอร์มแต่ละรายการด้วยยูทิลิตี้การเว้นวรรค (ดังที่แสดงด้านล่าง) สุดท้าย อย่าลืมรวม a <label>ไว้กับตัวควบคุมฟอร์มแต่ละแบบ แม้ว่าคุณจำเป็นต้องซ่อนจากผู้เยี่ยมชมที่ไม่ใช่โปรแกรมอ่านหน้าจอ.sr-onlyด้วย

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

รองรับการควบคุมและการเลือกแบบฟอร์มแบบกำหนดเอง

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
ทางเลือกอื่นสำหรับป้ายกำกับที่ซ่อนอยู่

เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ จะมีปัญหากับแบบฟอร์มของคุณ หากคุณไม่ได้ใส่ป้ายกำกับสำหรับทุกอินพุต สำหรับแบบฟอร์มอินไลน์เหล่านี้ คุณสามารถซ่อนป้ายกำกับโดยใช้.sr-onlyชั้นเรียน aria-labelมีวิธีการอื่นในการจัดเตรียมฉลากสำหรับเทคโนโลยีอำนวย ความสะดวก เช่นแอตทริบิวต์aria-labelledbyหรือ titleหากไม่มีสิ่งเหล่านี้อยู่ เทคโนโลยีอำนวยความสะดวกอาจหันไปใช้placeholderแอตทริบิวต์ หากมี แต่โปรดทราบว่าplaceholderไม่แนะนำให้ใช้แทนวิธีการอื่นในการติดฉลาก

ข้อความช่วยเหลือ

สามารถสร้างข้อความช่วยเหลือระดับบล็อกในแบบฟอร์มได้โดยใช้.form-text(ก่อนหน้านี้เรียกว่า.help-blockใน v3) ข้อความช่วยเหลือแบบอินไลน์สามารถนำไปใช้ได้อย่างยืดหยุ่นโดยใช้องค์ประกอบ HTML แบบอินไลน์และคลาสยูทิลิตี้ เช่น.text-muted.

การเชื่อมโยงข้อความช่วยเหลือกับการควบคุมแบบฟอร์ม

ข้อความช่วยเหลือควรเชื่อมโยงอย่างชัดเจนกับตัวควบคุมแบบฟอร์มที่เกี่ยวข้องกับการใช้aria-describedbyแอตทริบิวต์ เพื่อให้แน่ใจว่าเทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ จะประกาศข้อความช่วยเหลือนี้เมื่อผู้ใช้โฟกัสหรือเข้าสู่การควบคุม

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

รหัสผ่านของคุณต้องมีความยาว 8-20 อักขระ ประกอบด้วยตัวอักษรและตัวเลข และต้องไม่มีการเว้นวรรค อักขระพิเศษ หรืออีโมจิ
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

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

ต้องมีความยาว 8-20 อักขระ
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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

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

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

เพิ่มdisabledแอตทริบิวต์เพื่อ<fieldset>ปิดใช้งานการควบคุมทั้งหมดภายใน

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
คำเตือนกับสมอ

ตามค่าเริ่มต้น เบราว์เซอร์จะถือว่าตัวควบคุมฟอร์มดั้งเดิมทั้งหมด ( <input>, <select>และ<button>องค์ประกอบ) ภายใน a <fieldset disabled>ถูกปิดใช้งาน ป้องกันไม่ให้มีการโต้ตอบระหว่างแป้นพิมพ์และเมาส์ อย่างไรก็ตาม หากแบบฟอร์มของคุณมี<a ... class="btn btn-*">องค์ประกอบด้วย สิ่งเหล่านี้จะได้รับสไตล์เป็นpointer-events: noneเท่านั้น ตามที่ระบุไว้ในส่วนเกี่ยวกับสถานะปิดใช้งานสำหรับปุ่ม (และโดยเฉพาะในส่วนย่อยสำหรับองค์ประกอบจุดยึด) คุณสมบัติ CSS นี้ยังไม่ได้รับมาตรฐานและไม่ได้รับการสนับสนุนอย่างเต็มที่ใน Opera 18 และต่ำกว่า หรือใน Internet Explorer 10 และได้รับรางวัล ไม่ได้ป้องกันไม่ให้ผู้ใช้แป้นพิมพ์สามารถโฟกัสหรือเปิดใช้งานลิงก์เหล่านี้ได้ เพื่อความปลอดภัย ให้ใช้ JavaScript ที่กำหนดเองเพื่อปิดใช้งานลิงก์ดังกล่าว

ความเข้ากันได้ข้ามเบราว์เซอร์

แม้ว่า Bootstrap จะใช้สไตล์เหล่านี้กับทุกเบราว์เซอร์ แต่ Internet Explorer 11 และต่ำกว่านั้นไม่รองรับdisabledแอตทริบิวต์ในไฟล์<fieldset>. ใช้ JavaScript ที่กำหนดเองเพื่อปิดใช้งาน fieldset ในเบราว์เซอร์เหล่านี้

การตรวจสอบความถูกต้อง

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

เราขอแนะนำรูปแบบการตรวจสอบความถูกต้องที่กำหนดเองเป็นอย่างยิ่ง เนื่องจากค่าเริ่มต้นของเบราว์เซอร์ดั้งเดิมจะไม่ประกาศให้โปรแกรมอ่านหน้าจอทราบ

มันทำงานอย่างไร

นี่คือวิธีการทำงานของการตรวจสอบแบบฟอร์มกับ Bootstrap:

  • การตรวจสอบความถูกต้องของแบบฟอร์ม HTML นั้นใช้ผ่านคลาสหลอกสองคลาสของ CSS :invalidและ:valid. ใช้กับ<input>, <select>, และ<textarea>องค์ประกอบ
  • Bootstrap กำหนดขอบเขต:invalidและ:validสไตล์ให้กับ.was-validatedคลาสพาเรนต์ซึ่งมักจะใช้กับไฟล์<form>. มิฉะนั้น ฟิลด์บังคับที่ไม่มีค่าจะแสดงขึ้นว่าไม่ถูกต้องในการโหลดหน้าเว็บ ด้วยวิธีนี้ คุณสามารถเลือกได้ว่าจะเปิดใช้งานเมื่อใด (โดยทั่วไปหลังจากพยายามส่งแบบฟอร์มแล้ว)
  • เป็นทางเลือก.is-invalidและ.is-validอาจใช้คลาสแทนคลาสหลอกสำหรับ การตรวจ สอบฝั่งเซิร์ฟเวอร์ พวกเขาไม่ต้องการ.was-validatedคลาสผู้ปกครอง
  • เนื่องจากข้อจำกัดในการทำงานของ CSS เราจึงไม่สามารถ (ในปัจจุบัน) นำสไตล์ไปใช้กับ<label>ตัวควบคุมฟอร์มใน DOM ได้หากไม่ได้รับความช่วยเหลือจาก JavaScript ที่กำหนดเอง
  • เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับAPI การตรวจสอบข้อจำกัดซึ่งเป็นชุดของเมธอด JavaScript สำหรับตรวจสอบการควบคุมฟอร์ม
  • ข้อความคำติชมอาจใช้ค่าเริ่มต้นของเบราว์เซอร์ (แตกต่างกันไปสำหรับแต่ละเบราว์เซอร์ และไม่สามารถกำหนดสไตล์ผ่าน CSS) หรือรูปแบบคำติชมที่กำหนดเองของเราด้วย HTML และ CSS เพิ่มเติม
  • คุณอาจระบุข้อความความถูกต้องที่กำหนดเองด้วยsetCustomValidityใน JavaScript

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

สไตล์ที่กำหนดเอง

สำหรับข้อความตรวจสอบความถูกต้องของฟอร์ม Bootstrap คุณจะต้องเพิ่มnovalidateแอตทริบิวต์บูลีนใน<form>. การดำเนินการนี้จะปิดใช้งานคำแนะนำเครื่องมือข้อเสนอแนะเริ่มต้นของเบราว์เซอร์ แต่ยังคงให้การเข้าถึง API การตรวจสอบแบบฟอร์มใน JavaScript ลองส่งแบบฟอร์มด้านล่าง JavaScript ของเราจะสกัดกั้นปุ่มส่งและส่งต่อความคิดเห็นถึงคุณ

เมื่อพยายามส่ง คุณจะเห็น สไตล์ :invalidและ:validนำไปใช้กับตัวควบคุมฟอร์มของคุณ

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

ค่าเริ่มต้นของเบราว์เซอร์

ไม่สนใจข้อความตอบกลับสำหรับการตรวจสอบความถูกต้องที่กำหนดเองหรือเขียน JavaScript เพื่อเปลี่ยนพฤติกรรมของฟอร์มใช่หรือไม่ ดี คุณสามารถใช้ค่าเริ่มต้นของเบราว์เซอร์ได้ ลองส่งแบบฟอร์มด้านล่าง คุณจะเห็นความคิดเห็นในรูปแบบที่แตกต่างกันเล็กน้อย ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์และระบบปฏิบัติการของคุณ

แม้ว่าสไตล์คำติชมเหล่านี้จะกำหนดสไตล์ด้วย CSS ไม่ได้ แต่คุณยังคงปรับแต่งข้อความตอบรับผ่าน JavaScript ได้

@
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

ฝั่งเซิร์ฟเวอร์

เราแนะนำให้ใช้การตรวจสอบฝั่งไคลเอ็นต์ แต่ในกรณีที่คุณต้องการฝั่งเซิร์ฟเวอร์ คุณสามารถระบุช่องแบบฟอร์มที่ไม่ถูกต้องและถูกต้องด้วย.is-invalidและ .is-validโปรดทราบว่า.invalid-feedbackรองรับคลาสเหล่านี้ด้วย

ดูดี!
ดูดี!
@
โปรดเลือกชื่อผู้ใช้
โปรดระบุเมืองที่ถูกต้อง
โปรดระบุสถานะที่ถูกต้อง
โปรดระบุรหัสไปรษณีย์ที่ถูกต้อง
คุณต้องตกลงก่อนส่ง
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

องค์ประกอบที่รองรับ

แบบฟอร์มตัวอย่างของเราแสดงข้อความดั้งเดิม<input>ด้านบน แต่รูปแบบการตรวจสอบความถูกต้องของแบบฟอร์มก็พร้อมใช้งานสำหรับตัวควบคุมฟอร์มแบบกำหนดเองของเราเช่นกัน

ตัวอย่างข้อความตอบกลับที่ไม่ถูกต้อง
ตัวอย่างเพิ่มเติมข้อความความคิดเห็นที่ไม่ถูกต้อง
ตัวอย่างคำติชมการเลือกแบบกำหนดเองที่ไม่ถูกต้อง
ตัวอย่างความคิดเห็นเกี่ยวกับไฟล์ที่กำหนดเองที่ไม่ถูกต้อง
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

เคล็ดลับเครื่องมือ

ถ้าเค้าโครงแบบฟอร์มของคุณอนุญาต คุณสามารถสลับ.{valid|invalid}-feedbackชั้นเรียนสำหรับ.{valid|invalid}-tooltipชั้นเรียนเพื่อแสดงคำติชมการตรวจสอบความถูกต้องในคำแนะนำเครื่องมือที่มีสไตล์ ต้องแน่ใจว่ามีพาเรนต์ด้วยposition: relativeสำหรับการวางตำแหน่งคำแนะนำเครื่องมือ ในตัวอย่างด้านล่าง คลาสคอลัมน์ของเรามีอยู่แล้ว แต่โปรเจ็กต์ของคุณอาจต้องมีการตั้งค่าอื่น

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

แบบฟอร์มที่กำหนดเอง

สำหรับการปรับแต่งเพิ่มเติมและความสอดคล้องข้ามเบราว์เซอร์ ให้ใช้องค์ประกอบแบบฟอร์มที่กำหนดเองทั้งหมดของเราเพื่อแทนที่ค่าเริ่มต้นของเบราว์เซอร์ สร้างขึ้นจากความหมายและมาร์กอัปที่เข้าถึงได้ ดังนั้นจึงเป็นการแทนที่ที่แข็งแกร่งสำหรับการควบคุมฟอร์มเริ่มต้นใดๆ

ช่องทำเครื่องหมายและวิทยุ

กล่องกาเครื่องหมายและวิทยุแต่ละช่องถูกห่อด้วย a <div>กับพี่น้อง<span>เพื่อสร้างการควบคุมแบบกำหนดเองของเราและ a <label>สำหรับข้อความประกอบ โครงสร้างนี้เป็นแนวทางเดียวกับ default ของ.form-checkเรา

เราใช้ตัวเลือกพี่น้อง ( ~) สำหรับ<input>สถานะทั้งหมดของเรา—เช่น:checked—เพื่อจัดรูปแบบตัวบ่งชี้แบบฟอร์มที่กำหนดเองของเราอย่างเหมาะสม เมื่อรวมกับ.custom-control-labelคลาส เรายังสามารถจัดรูปแบบข้อความสำหรับแต่ละรายการตามสถานะ<input>ของ 's

เราซ่อนค่าเริ่มต้น<input>ด้วยopacityและใช้ the .custom-control-labelเพื่อสร้างตัวบ่งชี้รูปแบบที่กำหนดเองใหม่แทนที่ด้วย::beforeและ::after. น่าเสียดายที่เราไม่สามารถสร้างแบบกำหนดเองจากเพียง<input>เพราะว่า CSS contentใช้งานไม่ได้กับองค์ประกอบนั้น

ในสถานะที่ตรวจสอบ เราใช้ ไอคอน SVG แบบฝัง base64จากOpen Iconic วิธีนี้ช่วยให้เราควบคุมการจัดรูปแบบและการวางตำแหน่งในเบราว์เซอร์และอุปกรณ์ได้ดีที่สุด

ช่องทำเครื่องหมาย

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

ช่องทำเครื่องหมายที่กำหนดเองยังสามารถใช้:indeterminateคลาสหลอกเมื่อตั้งค่าด้วยตนเองผ่าน JavaScript (ไม่มีแอตทริบิวต์ HTML ที่พร้อมใช้งานสำหรับการระบุ)

หากคุณกำลังใช้ jQuery สิ่งนี้น่าจะพอเพียง:

$('.your-checkbox').prop('indeterminate', true)

วิทยุ

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

อินไลน์

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

พิการ

ช่องทำเครื่องหมายและวิทยุที่กำหนดเองสามารถปิดใช้งานได้ เพิ่มdisabledแอตทริบิวต์บูลีนให้กับ<input>และตัวบ่งชี้ที่กำหนดเองและคำอธิบายป้ายกำกับจะได้รับการกำหนดสไตล์โดยอัตโนมัติ

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

เลือกเมนู

<select>เมนูแบบกำหนดเอง ต้องการเฉพาะคลาสแบบกำหนดเอง .custom-selectเพื่อทริกเกอร์สไตล์แบบกำหนดเอง

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

คุณยังสามารถเลือกจากการเลือกแบบกำหนดเองขนาดเล็กและขนาดใหญ่เพื่อให้ตรงกับการป้อนข้อความที่มีขนาดใกล้เคียงกันของเรา

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

แอตทริบิวต์multipleยังได้รับการสนับสนุน:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

เป็นsizeแอตทริบิวต์:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

ไฟล์เบราว์เซอร์

อินพุตไฟล์เป็นส่วนที่น่ากลัวที่สุดของพวงและต้องใช้ JavaScript เพิ่มเติมหากคุณต้องการเชื่อมต่อกับไฟล์ Select ที่ใช้งาน ได้ และข้อความชื่อไฟล์ที่เลือก

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

เราซ่อนไฟล์เริ่มต้น<input>ผ่านopacityและแทนที่รูปแบบไฟล์<label>. ปุ่มถูกสร้างขึ้นและวางตำแหน่งด้วย::after. สุดท้ายนี้ เราประกาศ a widthและheighton the <input>สำหรับการเว้นวรรคที่เหมาะสมสำหรับเนื้อหาโดยรอบ

การแปลหรือปรับแต่งสตริง

คลาส:lang()หลอกใช้เพื่อให้สามารถแปลข้อความ "เรียกดู" เป็นภาษาอื่นได้ แทนที่หรือเพิ่มรายการลงใน$custom-file-textตัวแปร Sass ด้วยแท็กภาษา ที่เกี่ยวข้อง และสตริงที่แปลแล้ว สตริงภาษาอังกฤษสามารถปรับแต่งได้ในลักษณะเดียวกัน ตัวอย่างเช่น วิธีอาจเพิ่มการแปลภาษาสเปน (รหัสภาษาสเปนคือes):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

การlang(es)ดำเนินการกับไฟล์อินพุตแบบกำหนดเองสำหรับการแปลภาษาสเปนมีดังนี้:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

คุณจะต้องตั้งค่าภาษาของเอกสารของคุณ (หรือแผนผังย่อยของภาษานั้น) ให้ถูกต้อง เพื่อแสดงข้อความที่ถูกต้อง ซึ่งสามารถทำได้โดยใช้แอตทริบิวต์langบนองค์ประกอบ<html>หรือContent-Languageส่วนหัว HTTPรวมถึงวิธีการอื่นๆ