Bootstrap 4 แบบฟอร์ม ที่กำหนดเอง
Bootstrap 4 แบบฟอร์มที่กำหนดเอง
Bootstrap 4 มาพร้อมกับองค์ประกอบแบบฟอร์มที่กำหนดเองซึ่งมีไว้เพื่อแทนที่ค่าเริ่มต้นของเบราว์เซอร์:
ช่วงที่กำหนดเอง:
ช่วงเริ่มต้น:
กล่องกาเครื่องหมายกำหนดเอง
ในการสร้างช่องทำเครื่องหมายที่กำหนดเอง ให้ใส่องค์ประกอบคอนเทนเนอร์ เช่น <div> โดยมีคลาสเป็น.custom-controlและ.custom-checkboxรอบๆ ช่องทำเครื่องหมาย จากนั้นเพิ่มลง.custom-control-inputในอินพุตด้วย type="checkbox"
เคล็ดลับ:หากคุณใช้ป้ายกำกับสำหรับข้อความประกอบ ให้เพิ่ม.custom-control-labelชั้นเรียนเข้าไป โปรดทราบว่าค่าของแอตทริบิวต์ for ควรตรงกับ id ของช่องทำเครื่องหมาย:
ตัวอย่าง
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck"
name="example1">
<label class="custom-control-label" for="customCheck">Check this custom
checkbox</label>
</div>
</form>
สวิตช์แบบกำหนดเอง
ในการสร้าง "สวิตช์สลับ" ที่กำหนดเอง ให้ห่อองค์ประกอบคอนเทนเนอร์ เช่น <div> ด้วยคลาสของ.custom-controlและ.custom-switchรอบๆ ช่องทำเครื่องหมาย จากนั้นเพิ่ม.custom-control-inputชั้นเรียนลงในช่องทำเครื่องหมาย:
ตัวอย่าง
<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>
ปุ่มตัวเลือกแบบกำหนดเอง
ในการสร้างปุ่มตัวเลือกที่กำหนดเอง ให้ห่อองค์ประกอบคอนเทนเนอร์ เช่น <div> ด้วยคลาสของ.custom-controlและ.custom-radioรอบๆ ปุ่มตัวเลือก จากนั้นเพิ่ม.custom-control-inputอินพุตด้วย type="radio"
เคล็ดลับ:หากคุณใช้ป้ายกำกับสำหรับข้อความประกอบ ให้เพิ่ม.custom-control-labelชั้นเรียนเข้าไป โปรดทราบว่าค่าของแอตทริบิวต์ for ควรตรงกับ id ของวิทยุ:
ตัวอย่าง
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio"
name="example1" value="customEx">
<label
class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>
การควบคุมแบบฟอร์มแบบกำหนดเองแบบอินไลน์
หากคุณต้องการให้ตัวควบคุมฟอร์มแบบกำหนดเองอยู่เคียงข้างกัน (ในบรรทัด) ให้เพิ่ม.custom-control-inlineไปยัง wrapper/container:
ตัวอย่าง
<form>
<div class="custom-control custom-radio
custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio"
name="example" value="customEx">
<label
class="custom-control-label" for="customRadio">Custom radio
1</label>
</div>
<div class="custom-control custom-radio
custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio2"
name="example" value="customEx">
<label
class="custom-control-label" for="customRadio2">Custom radio
2</label>
</div>
</form>
เมนูเลือกเอง
ในการสร้างเมนูการเลือกที่กำหนดเอง ให้เพิ่ม.custom-selectคลาสไปยังองค์ประกอบ <select>:
ตัวอย่าง
<form>
<select name="cars" class="custom-select">
<option selected>Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
กำหนดเองเลือกขนาดเมนู
ใช้.custom-select-smคลาสเพื่อสร้างเมนู Select ขนาดเล็กและ.custom-select-lgคลาสสำหรับเมนูขนาดใหญ่:
ตัวอย่าง
<form>
<!-- Small -->
<select name="cars" class="custom-select-sm">
<option selected>Small Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- Large -->
<select name="cars" class="custom-select-lg">
<option selected>Large Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
ช่วงกำหนดเอง
หากต้องการสร้างเมนูช่วงที่กำหนดเอง ให้เพิ่ม.custom-rangeคลาสลงในอินพุตด้วย type="<range>":
ตัวอย่าง
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
อัปโหลดไฟล์แบบกำหนดเอง
ในการสร้างการอัปโหลดไฟล์แบบกำหนดเอง ให้ห่อองค์ประกอบคอนเทนเนอร์ด้วยคลาส.custom-fileรอบอินพุตด้วย type="file" จากนั้นเพิ่ม.custom-file-inputเข้าไป
เคล็ดลับ:หากคุณใช้ป้ายกำกับสำหรับข้อความประกอบ ให้เพิ่ม.custom-file-labelชั้นเรียนเข้าไป โปรดทราบว่าค่าของแอตทริบิวต์ for ควรตรงกับ id ของช่องทำเครื่องหมาย:
โปรดทราบว่าคุณต้องใส่โค้ด jQuery ด้วย หากคุณต้องการให้ชื่อไฟล์ปรากฏเมื่อคุณเลือกไฟล์เฉพาะ:
ตัวอย่าง
<form>
<div class="custom-file">
<input
type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
<script>
// Add the following code if
you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName =
$(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>