Bootstrap 5 ฟอร์ม

ฟอร์มเก็บต่อเนื่อง

ทั้งหมด <input> และ <textarea> ที่ตั้งค่าคลาส .form-control สามารถได้รับรูปแบบฟอร์มที่ถูกต้องได้:

ตัวอย่าง

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">อีเมล：</label>
    <input type="email" class="form-control" id="email" placeholder="กรุณาใส่ที่อยู่อีเมล" name="email">
  </div>
  

    
    
  </div>
  

    
  </div>
  
</form>

ทดลองด้วยตัวเอง

另外请您注意，我们为每个 label 元素添加了 .form-label เพื่อที่จะทำให้เติมเต็มได้ถูกต้อง

ตัวเลือกหลายชุดมีสัญลักษณ์ต่างกัน .form-check คลาสขององค์ประกอบลำดับแทน label คือ .form-check-label คลาส และตัวเลือกชุดหรือปุ่มเลือกเดียวใช้ .form-check-input。

Textarea

ตัวอย่าง

<label for="comment">ความคิดเห็น：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

ทดลองด้วยตัวเอง

แบบฟอร์มแถว / กริด (แบบฟอร์มในแถว)

หากคุณต้องการให้ช่องรายการที่มีการแสดงแบบนอร์มแบบธรรมดา ใช้ .row และ .col：

ตัวอย่าง

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="โปรดป้อนที่อยู่อีเมล" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="โปรดป้อนรหัสผ่าน" name="pswd">
    </div>
  </div>
</form>

ทดลองด้วยตัวเอง

คุณจะมี Bootstrap กริด หลังจากนั้นคุณจะได้เรียนรู้เกี่ยวกับคอลัมน์และบรรทัดมากยิ่งขึ้นในหน้าต่อไป

ขนาดควบคุมฟอร์ม

คุณสามารถใช้ .form-control-lg หรือ .form-control-sm เปลี่ยน .form-control ขนาดของควบคุมการฉบับยื่น

ตัวอย่าง

<input type="text" class="form-control form-control-lg" placeholder="ควบคุมการฉบับยื่นขนาดใหญ่">
<input type="text" class="form-control" placeholder="ควบคุมการฉบับยื่นปกติ">
<input type="text" class="form-control form-control-sm" placeholder="ควบคุมการฉบับยื่นขนาดเล็ก">

ทดลองด้วยตัวเอง

ปิดการใช้งานและแบบอ่านเพียงตัวอ่าน

ใช้คุณสมบัติ disabled และ/หรือ readonly ที่จะปิดการใช้งานฟิールドการฉบับยื่น

ตัวอย่าง

<input type="text" class="form-control" placeholder="ควบคุมการฉบับยื่นปกติ">
<input type="text" class="form-control" placeholder="ควบคุมการฉบับยื่นที่มีความผิดพลาด" disabled>
<input type="text" class="form-control" placeholder="ควบคุมการฉบับยื่นที่เป็นไปตามความต้องการ" readonly>

ทดลองด้วยตัวเอง

ควบคุมการฉบับยื่นของข้อความเพียงตัวอ่าน

ใช้ .form-control-plaintext ใช้คลาสเพื่อตั้งค่ารูปแบบของฟิールドการฉบับยื่นที่ไม่มีขอบเขต แต่สงวนเชิงหลังของขอบและขอบในด้านข้าง：

ตัวอย่าง

<input type="text" class="form-control-plaintext" placeholder="ควบคุมการฉบับยื่นของข้อความเพียงตัวอ่าน">
<input type="text" class="form-control" placeholder="ควบคุมการฉบับยื่นปกติ">

ทดลองด้วยตัวเอง

เลือกสี

เพื่อการตั้งค่ารูปแบบของ type="color" ที่ถูกต้อง ใช้ .form-control-color คลาส：

ตัวอย่าง

<input type="color" class="form-control form-control-color" value="#CCCCCC">

ทดลองด้วยตัวเอง