แบบฟอร์ม Bootstrap
การตั้งค่าเริ่มต้นของ Bootstrap
ตัวควบคุมฟอร์มจะได้รับสไตล์โกลบอลบางส่วนโดยอัตโนมัติด้วย Bootstrap:
ข้อความทั้งหมด<input>, <textarea>, และ
<select>องค์ประกอบที่มีคลาส.form-controlมีความกว้าง 100%
เค้าโครงแบบฟอร์ม Bootstrap
Bootstrap มีเค้าโครงแบบฟอร์มสามประเภท:
- แบบฟอร์มแนวตั้ง (ซึ่งเป็นค่าเริ่มต้น)
- รูปแบบแนวนอน
- แบบฟอร์มอินไลน์
กฎมาตรฐานสำหรับเค้าโครงแบบฟอร์มทั้งสาม:
- ห่อฉลากและตัวควบคุมแบบฟอร์มใน
<div class="form-group">(จำเป็นสำหรับระยะห่างที่เหมาะสม) - เพิ่มคลาส
.form-controlให้กับ text<input>,<textarea>, และ<select>elements . ทั้งหมด
Bootstrap แบบฟอร์มแนวตั้ง (ค่าเริ่มต้น)
ตัวอย่างต่อไปนี้สร้างแบบฟอร์มแนวตั้งที่มีช่องใส่สองช่อง ช่องทำเครื่องหมายหนึ่งช่อง และปุ่มส่ง:
ตัวอย่าง
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap แบบฟอร์มอินไลน์
ในรูปแบบอินไลน์ องค์ประกอบทั้งหมดเป็นแบบอินไลน์ จัดชิดซ้าย และป้ายกำกับอยู่ด้านข้าง
หมายเหตุ: ใช้ได้เฉพาะกับฟอร์มภายในวิวพอร์ตที่มีความกว้างอย่างน้อย 768px!
กฎเพิ่มเติมสำหรับแบบฟอร์มอินไลน์:
- เพิ่มคลาส
.form-inlineให้กับ<form>องค์ประกอบ
ตัวอย่างต่อไปนี้จะสร้างแบบฟอร์มอินไลน์ที่มีช่องใส่สองช่อง ช่องทำเครื่องหมายหนึ่งช่อง และปุ่มส่งหนึ่งปุ่ม:
ตัวอย่าง
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
เคล็ดลับ:หากคุณไม่ได้ใส่ป้ายกำกับสำหรับทุกอินพุต โปรแกรมอ่านหน้าจอจะมีปัญหากับฟอร์มของคุณ คุณสามารถซ่อนป้ายกำกับสำหรับอุปกรณ์ทั้งหมด ยกเว้นโปรแกรมอ่านหน้าจอ โดยใช้
.sr-onlyชั้นเรียน:
ตัวอย่าง
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap รูปแบบแนวนอน
แบบฟอร์มแนวนอนหมายความว่าป้ายชื่ออยู่ในแนวถัดจากช่องใส่ (แนวนอน) บนหน้าจอขนาดใหญ่และขนาดกลาง บนหน้าจอขนาดเล็ก (767px หรือต่ำกว่า) จะเปลี่ยนเป็นรูปแบบแนวตั้ง (ป้ายกำกับจะวางไว้ที่ด้านบนของอินพุตแต่ละรายการ)
กฎเพิ่มเติมสำหรับรูปแบบแนวนอน:
- เพิ่มคลาส
.form-horizontalให้กับ<form>องค์ประกอบ - เพิ่มคลาส ให้กับ องค์ประกอบ
.control-labelทั้งหมด<label>
เคล็ดลับ:ใช้คลาสกริดที่กำหนดไว้ล่วงหน้าของ Bootstrap เพื่อจัดแนวป้ายชื่อและกลุ่มของตัวควบคุมฟอร์มในเค้าโครงแนวนอน
ตัวอย่างต่อไปนี้สร้างแบบฟอร์มแนวนอนที่มีช่องใส่สองช่อง ช่องทำเครื่องหมายหนึ่งช่อง และปุ่มส่งหนึ่งปุ่ม
ตัวอย่าง
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>