Bootstrap เพื่อจัด input group ให้ดูเป็นระเบียบและใช้งานง่าย

Bootstrap เพื่อจัด input group ให้ดูเป็นระเบียบและใช้งานง่าย โดยใช้ input-group-text สำหรับ prefix/suffix และ form-control สำหรับช่องกรอกข้อมูลหลัก เหมาะกับฟอร์มที่ต้องการ UI ที่ชัดเจน เช่น login, email, URL, เงิน, หรือข้อความ ถ้าคุณอยากให้ผมช่วย แปลงโค้ดนี้เป็นภาษาไทย หรือเพิ่ม validation/error message ก็ทำได้ทันทีครับ

การใช้ Bootstrap Input Group เพื่อจัดรูปแบบฟอร์มให้ดูสวยงามและใช้งานง่าย โดยรวมแล้วมันคือการนำข้อความหรือสัญลักษณ์ต่าง ๆ มาวางไว้ด้านหน้า ด้านหลัง หรือข้าง ๆ ช่องกรอกข้อมูล เพื่อช่วยให้ผู้ใช้เข้าใจว่าต้องกรอกอะไร เช่น การใส่ @ ด้านหน้าช่องกรอกชื่อผู้ใช้, การใส่ @example.com ด้านหลังช่องกรอกอีเมล, การใส่ URL prefix ก่อนช่องกรอก vanity URL, การใส่ $ และ .00 รอบช่องกรอกจำนวนเงิน, หรือการใช้ textarea พร้อม label ด้านซ้าย เป็นต้น

ทั้งหมดนี้ใช้โครงสร้าง <div class="input-group"> เป็นตัวครอบ และใช้ <span class="input-group-text"> สำหรับข้อความประกอบ ส่วน <input> หรือ <textarea> ใช้คลาส form-control เพื่อให้ได้สไตล์มาตรฐานของ Bootstrap ฟอร์มที่ได้จึงมีความเป็นระเบียบ อ่านง่าย และสื่อความหมายชัดเจนว่าช่องกรอกแต่ละช่องมีไว้ทำอะไร โดยไม่ต้องพึ่งข้อความอธิบายยาว

<div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient’s username" aria-label="Recipient’s username" aria-describedby="basic-addon2">
      <span class="input-group-text" id="basic-addon2">@example.com</span>
    </div>

    <div class="mb-3">
      <label for="basic-url" class="form-label">Your vanity URL</label>
      <div class="input-group">
        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
        <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
      </div>
      <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div>
    </div>

    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-text">.00</span>
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Username" aria-label="Username">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="Server" aria-label="Server">
    </div>

    <div class="input-group">
      <span class="input-group-text">With textarea</span>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>