Bootstrap 4 แบบฟอร์ม
การตั้งค่าเริ่มต้นของ Bootstrap 4
ตัวควบคุมฟอร์มจะได้รับสไตล์โกลบอลบางส่วนโดยอัตโนมัติด้วย Bootstrap:
ข้อความทั้งหมด<input>, <textarea>, และ
<select>องค์ประกอบที่มีคลาส.form-controlมีความกว้าง 100%
Bootstrap 4 เค้าโครงแบบฟอร์ม
Bootstrap มีเค้าโครงแบบฟอร์มสองประเภท:
- แบบซ้อน (เต็มความกว้าง)
- แบบฟอร์มอินไลน์
Bootstrap 4 แบบฟอร์มซ้อน
ตัวอย่างต่อไปนี้จะสร้างแบบฟอร์มแบบเรียงซ้อนที่มีช่องใส่ข้อมูลสองช่อง ช่องทำเครื่องหมายหนึ่งช่อง และปุ่มส่ง
เพิ่มองค์ประกอบ wrapper ด้วย.form-group, รอบๆ ส่วนควบคุมแต่ละแบบฟอร์ม เพื่อให้แน่ใจว่ามีระยะขอบที่เหมาะสม:
ตัวอย่าง
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap แบบฟอร์มอินไลน์
ในรูปแบบอินไลน์ องค์ประกอบทั้งหมดเป็นแบบอินไลน์และชิดซ้าย
หมายเหตุ: ใช้ได้เฉพาะกับฟอร์มภายในวิวพอร์ตที่มีความกว้างอย่างน้อย 576px บนหน้าจอที่มีขนาดเล็กกว่า 576px จะวางซ้อนกันในแนวนอน
กฎเพิ่มเติมสำหรับแบบฟอร์มอินไลน์:
- เพิ่มคลาส
.form-inlineให้กับ<form>องค์ประกอบ
ตัวอย่างต่อไปนี้จะสร้างแบบฟอร์มอินไลน์ที่มีช่องใส่สองช่อง ช่องทำเครื่องหมายหนึ่งช่อง และปุ่มส่งหนึ่งปุ่ม:
ตัวอย่าง
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
แบบฟอร์มอินไลน์พร้อมยูทิลิตี้
แบบฟอร์มอินไลน์ด้านบนให้ความรู้สึก "บีบอัด" และจะดูดีขึ้นมากเมื่อใช้ยูทิลิตี้การเว้นวรรคของ Bootstrap ตัวอย่างต่อไปนี้จะเพิ่มระยะขอบด้านขวา ( .mr-sm-2) ให้กับอินพุตแต่ละรายการบนอุปกรณ์ทั้งหมด (ขนาดเล็กขึ้นไป) และระดับล่างสุดของระยะขอบ ( .mb-2) ใช้เพื่อจัดรูปแบบฟิลด์อินพุตเมื่อแตก (เปลี่ยนจากแนวนอนเป็นแนวตั้งเนื่องจากพื้นที่/ความกว้างไม่เพียงพอ):
ตัวอย่าง
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการเว้นวรรคและคลาส "ตัวช่วย" อื่นๆ ในบท Bootstrap 4 Utilitiesของเรา
แบบฟอร์มแถว/ตาราง
คุณยังสามารถใช้คอลัมน์ ( .col) เพื่อควบคุมความกว้างและการจัดตำแหน่งของอินพุตแบบฟอร์มโดยไม่ต้องใช้ยูทิลิตี้การเว้นวรรค อย่าลืมใส่ไว้ใน.rowภาชนะ
ในตัวอย่างด้านล่าง เราใช้สองคอลัมน์ที่จะปรากฏเคียงข้างกัน คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับคอลัมน์และแถวในบทBootstrap Grids
ตัวอย่าง
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
หากคุณต้องการระยะขอบกริดน้อยลง (แทนที่รางน้ำคอลัมน์เริ่มต้น) ให้ใช้.form-rowแทน.row:
ตัวอย่าง
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
การตรวจสอบแบบฟอร์ม
คุณสามารถใช้คลาสการตรวจสอบที่แตกต่างกันเพื่อให้ข้อเสนอแนะอันมีค่าแก่ผู้ใช้ เพิ่มอย่างใดอย่างหนึ่ง.was-validatedหรือ.needs-validationไปยัง<form>องค์ประกอบ ขึ้นอยู่กับว่าคุณต้องการให้คำติชมการตรวจสอบความถูกต้องก่อนหรือหลังการส่งแบบฟอร์ม ช่องป้อนข้อมูลจะมีเส้นขอบสีเขียว (ถูกต้อง) หรือสีแดง (ไม่ถูกต้อง) เพื่อระบุสิ่งที่ขาดหายไปในแบบฟอร์ม คุณยังสามารถเพิ่ม a
.valid-feedbackหรือ.invalid-feedbackข้อความเพื่อแจ้งให้ผู้ใช้ทราบอย่างชัดเจนถึงสิ่งที่ขาดหายไป หรือจำเป็นต้องดำเนินการก่อนที่จะส่งแบบฟอร์ม
ตัวอย่าง
ในตัวอย่างนี้ เราใช้.was-validatedเพื่อระบุสิ่งที่ขาดหายไปก่อนส่งแบบฟอร์ม:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
ตัวอย่าง
ในตัวอย่างนี้ เราใช้.needs-validationซึ่งจะเพิ่มผลการตรวจสอบหลังจากส่งแบบฟอร์มแล้ว (หากมีสิ่งใดขาดหายไป) โปรดทราบว่าคุณจะต้องเพิ่มโค้ด jQuery เพื่อให้ตัวอย่างนี้ทำงานได้อย่างถูกต้อง:
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add 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>