สร้างช่องค้นหา Bootstrap พร้อม Icons ค้นหา และปุ่ม

สร้างช่องค้นหา Bootstrap พร้อม Icons ค้นหา และปุ่ม บทความนี้สอนการสร้างช่องค้นหาประกอบด้วย ช่อง TextBox, Icons รูปค้นหา และปุ่มสำหรับกดเพื่อค้นหาข้อมูล โดยใช้ Bootstrap Framework สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง สร้างช่องค้นหา Bootstrap พร้อม Icons ค้นหา และปุ่ม

<div class="input-group mb-3">
    <span class="input-group-text">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>
    </span>
    <input type="text" class="form-control" placeholder="กรุณากรอกคำค้นหา">
    <button class="btn btn-primary" type="button">ค้นหา</button>
</div>

สร้างช่องค้นหา Bootstrap พร้อม Icons ค้นหา และปุ่ม มีรายละเอียดดังนี้

1. ใช้ class input-group คลุม elements ทั้งหมดของการสร้างช่องค้นหา ด้วย Bootstrap

2. ใช้ class input-group-text และ svg สำหรับสร้าง Icons ด้านซ้ายของช่องค้นหา

3. ใช้ input type text และ class form-control สำหรับสร้างช่องค้นหา หรือ TextBox

4. ใช้ button สร้างปุ่ม พร้อมลงสี และ style ผ่าน class btn และ btn-primary