สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน Form

Form (ฟอร์ม) ในบริบทของการพัฒนาเว็บ คือองค์ประกอบ (element) ของหน้าเว็บที่ใช้ในการรับข้อมูลจากผู้ใช้งาน โดยข้อมูลที่ผู้ใช้กรอกหรือเลือกในฟอร์มจะถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล ฟอร์มมักจะประกอบด้วยองค์ประกอบหลายประเภท เช่น ช่องกรอกข้อความ (input field), ปุ่มกด (button), กล่องเลือก (checkbox, radio button), และรายการเลือก (dropdown list) เพื่อให้ผู้ใช้กรอกหรือเลือกข้อมูลตามความต้องการ

การสร้าง Form พื้นฐาน

Bootstrap 4 มีคลาสที่ช่วยในการจัดการกับ Form ได้ง่าย โดยการใช้คลาส form-group, form-control, และ form-check สำหรับการสร้างฟอร์มแบบพื้นฐาน ตัวอย่างเช่น

HTML
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">อีเมล</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="กรุณาใส่อีเมล">
    <small id="emailHelp" class="form-text text-muted">เราจะไม่แชร์อีเมลของคุณกับใคร</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">รหัสผ่าน</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="รหัสผ่าน">
  </div>
  <button type="submit" class="btn btn-primary">ส่ง</button>
</form>

Stacked Form

Stacked Form คือฟอร์มที่เรียงองค์ประกอบต่างๆ (เช่น ช่องกรอกข้อมูล, ปุ่มกด) ลงมาในแนวตั้ง (stacked) โดยแต่ละองค์ประกอบจะถูกจัดให้อยู่ในบรรทัดของตัวเอง และช่องข้อมูลจะมีความกว้างเต็มพื้นที่ของฟอร์มนั้นๆ การจัดรูปแบบฟอร์มแบบ stacked เหมาะสำหรับการออกแบบที่ต้องการให้ผู้ใช้งานกรอกข้อมูลอย่างสะดวกสบายบนอุปกรณ์ที่มีหน้าจอขนาดเล็ก เช่น สมาร์ทโฟนหรือแท็บเล็ต

ใน Bootstrap 4 สามารถสร้าง stacked form ได้โดยใช้คลาส form-group และ form-control สำหรับการจัดระเบียบฟอร์ม ช่องกรอกข้อมูลแต่ละช่องจะถูกแสดงผลในบรรทัดใหม่โดยอัตโนมัติ

HTML
<form>
  <div class="form-group">
    <label for="inputEmail">อีเมล</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="กรอกอีเมล">
  </div>
  
  <div class="form-group">
    <label for="inputPassword">รหัสผ่าน</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="กรอกรหัสผ่าน">
  </div>
  
  <div class="form-group">
    <label for="inputPhone">เบอร์โทรศัพท์</label>
    <input type="tel" class="form-control" id="inputPhone" placeholder="กรอกเบอร์โทรศัพท์">
  </div>
  
  <button type="submit" class="btn btn-primary">ส่งข้อมูล</button>
</form>
  • ทุกช่องกรอกข้อมูล (input) จะถูกวางเรียงในแนวตั้ง โดยใช้คลาส form-group เพื่อจัดองค์ประกอบให้แยกออกจากกันอย่างชัดเจน
  • คลาส form-control ถูกใช้เพื่อกำหนดให้ช่องกรอกข้อมูลมีความกว้างเต็มที่และจัดรูปแบบให้ดูสวยงาม

ข้อดีของ Stacked Form

  1. ใช้งานง่ายบนอุปกรณ์พกพา: เนื่องจากฟอร์มเรียงข้อมูลในแนวตั้ง จึงทำให้ใช้งานง่ายบนหน้าจอขนาดเล็ก
  2. เข้าใจง่าย: การเรียงฟอร์มแบบ stacked ทำให้ผู้ใช้งานมองเห็นข้อมูลแต่ละส่วนอย่างชัดเจน
  3. การจัดระเบียบดี: การแสดงฟอร์มในแนวตั้งช่วยลดความสับสนและทำให้การกรอกข้อมูลในฟอร์มเป็นไปอย่างเป็นระเบียบ

การใช้ Form สำหรับการลงทะเบียน

การสร้างฟอร์มลงทะเบียนด้วย Bootstrap 4 สามารถทำได้ง่าย โดยการเพิ่มฟิลด์ที่จำเป็นสำหรับการลงทะเบียน เช่น ชื่อ, นามสกุล, และเบอร์โทรศัพท์

HTML
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputFirstName">ชื่อ</label>
      <input type="text" class="form-control" id="inputFirstName" placeholder="ชื่อ">
    </div>
    <div class="form-group col-md-6">
      <label for="inputLastName">นามสกุล</label>
      <input type="text" class="form-control" id="inputLastName" placeholder="นามสกุล">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPhone">เบอร์โทรศัพท์</label>
    <input type="tel" class="form-control" id="inputPhone" placeholder="เบอร์โทรศัพท์">
  </div>
  <button type="submit" class="btn btn-success">ลงทะเบียน</button>
</form>

การสร้าง Form แบบเลือก (Dropdown)

การสร้างฟอร์มที่มี Dropdown ให้เลือกค่าต่าง ๆ เช่น การเลือกจังหวัดหรือประเภทสมาชิก

HTML
<form>
  <div class="form-group">
    <label for="inputState">จังหวัด</label>
    <select id="inputState" class="form-control">
      <option selected>เลือกจังหวัด...</option>
      <option>กรุงเทพมหานคร</option>
      <option>เชียงใหม่</option>
      <option>ภูเก็ต</option>
    </select>
  </div>
  <button type="submit" class="btn btn-info">ส่ง</button>
</form>

การสร้าง Form แบบ Checkbox และ Radio

สำหรับการเลือกหลายตัวเลือกหรือการเลือกเพียงหนึ่งตัวเลือก สามารถใช้ Checkbox และ Radio ได้

HTML
<form>
  <fieldset class="form-group">
    <legend>คุณสนใจสินค้าไหนบ้าง?</legend>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck1">
      <label class="form-check-label" for="gridCheck1">
        สินค้า A
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck2">
      <label class="form-check-label" for="gridCheck2">
        สินค้า B
      </label>
    </div>
  </fieldset>
  <fieldset class="form-group">
    <legend>เลือกประเภทสมาชิก</legend>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="memberType" id="memberType1" value="normal" checked>
      <label class="form-check-label" for="memberType1">
        สมาชิกธรรมดา
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="memberType" id="memberType2" value="premium">
      <label class="form-check-label" for="memberType2">
        สมาชิกพรีเมียม
      </label>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-warning">ยืนยัน</button>
</form>

การใช้งาน Form สำหรับการค้นหา

ฟอร์มสำหรับการค้นหาสามารถสร้างได้ง่ายเช่นกัน โดยใช้ input ประเภท search

HTML
<form class="form-inline">
  <label class="sr-only" for="searchInput">ค้นหา</label>
  <input class="form-control mb-2 mr-sm-2" type="search" id="searchInput" placeholder="ค้นหาสิ่งที่คุณต้องการ" aria-label="ค้นหา">
  <button type="submit" class="btn btn-outline-success mb-2">ค้นหา</button>
</form>

Inline Form

Inline Form คือฟอร์มที่จัดเรียงองค์ประกอบต่างๆ (เช่น ช่องกรอกข้อมูล, ปุ่มกด) ให้อยู่ในบรรทัดเดียวกัน (inline) ซึ่งต่างจาก Stacked Form ที่จัดองค์ประกอบในแนวตั้ง การใช้ Inline Form มักจะทำให้ฟอร์มดูเรียบง่ายและเหมาะสำหรับฟอร์มที่มีข้อมูลไม่มาก เช่น ฟอร์มค้นหา ฟอร์มลงทะเบียนสั้นๆ หรือตัวกรองข้อมูล

ใน Bootstrap 4 การสร้าง Inline Form ทำได้ง่ายๆ โดยใช้คลาส form-inline ซึ่งจะช่วยจัดระเบียบองค์ประกอบต่างๆ ของฟอร์มให้อยู่ในบรรทัดเดียวกัน

HTML
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail" class="sr-only">อีเมล</label>
    <input type="email" class="form-control" id="staticEmail" placeholder="อีเมล">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword" class="sr-only">รหัสผ่าน</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="รหัสผ่าน">
  </div>
  <button type="submit" class="btn btn-primary mb-2">ยืนยัน</button>
</form>
  • form-inline ถูกใช้เพื่อจัดให้ฟอร์มเป็นแบบ inline
  • คลาส form-group ช่วยจัดการองค์ประกอบต่างๆ ของฟอร์มให้อยู่ในกลุ่มที่เหมาะสม
  • คลาส sr-only ถูกใช้เพื่อซ่อน label สำหรับผู้ใช้งาน แต่ยังคงให้การเข้าถึงข้อมูลโดยผู้ที่ใช้ screen reader ได้

ข้อดีของ Inline Form

  1. ใช้พื้นที่น้อย: เนื่องจากองค์ประกอบของฟอร์มถูกจัดให้อยู่ในบรรทัดเดียวกัน ทำให้ประหยัดพื้นที่บนหน้าเว็บ
  2. เหมาะสำหรับฟอร์มขนาดเล็ก: เหมาะกับฟอร์มที่ต้องการให้กรอกข้อมูลอย่างรวดเร็ว เช่น ฟอร์มค้นหาหรือฟอร์มสมัครสมาชิกสั้นๆ
  3. เข้ากับดีไซน์ที่เรียบง่าย: Inline Form ช่วยให้ฟอร์มมีลักษณะกะทัดรัดและเรียบง่าย ทำให้ดูไม่รก

Inline Form with Utilities

Inline Form with Utilities ใน Bootstrap 4 คือการใช้ฟอร์มแบบ Inline ที่เสริมการจัดการองค์ประกอบภายในฟอร์มด้วย Utility Classes หรือคลาสเสริมที่ Bootstrap มีให้เพื่อปรับแต่งเพิ่มเติม เช่น การจัดการระยะห่าง (margin, padding), การจัดการขนาด (width, height), การจัดเรียง (alignment) และอื่นๆ ทำให้สามารถควบคุมการแสดงผลของฟอร์มให้เหมาะสมกับดีไซน์ที่ต้องการ

Utility Classes ที่นิยมใช้กับ Inline Form

  1. Spacing Utilities: ใช้สำหรับปรับแต่งระยะห่าง เช่น mb-2 (margin-bottom), mx-sm-3 (margin-horizontal)
  2. Sizing Utilities: ใช้เพื่อควบคุมขนาดของ input หรือปุ่ม เช่น w-25 (กว้าง 25%), w-auto (ความกว้างอัตโนมัติ)
  3. Alignment Utilities: ใช้เพื่อจัดเรียงและจัดตำแหน่ง เช่น text-center, align-items-center (จัดเรียงตรงกลางแนวตั้ง)

ตัวอย่างของ Inline Form with Utilities

HTML
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="inputEmail" class="sr-only">อีเมล</label>
    <input type="email" class="form-control w-50" id="inputEmail" placeholder="กรอกอีเมล">
  </div>
  
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword" class="sr-only">รหัสผ่าน</label>
    <input type="password" class="form-control w-25" id="inputPassword" placeholder="รหัสผ่าน">
  </div>
  
  <button type="submit" class="btn btn-primary mb-2">ยืนยัน</button>
</form>
  • mb-2: ช่วยกำหนดระยะห่างด้านล่างของแต่ละองค์ประกอบ (margin-bottom 2 หน่วย)
  • mx-sm-3: กำหนดระยะห่างแนวนอน (margin-horizontal) ระหว่าง input field และปุ่มสำหรับขนาดหน้าจอขนาดเล็กขึ้นไป
  • w-50 และ w-25: กำหนดความกว้างของช่องกรอกข้อมูลให้กว้าง 50% และ 25% ของความกว้างบรรทัด เพื่อให้ช่องกรอกข้อมูลมีขนาดที่เหมาะสม

ประโยชน์ของการใช้ Utility Classes กับ Inline Form

  1. ควบคุมระยะห่างและตำแหน่ง: Utility Classes ช่วยให้สามารถควบคุมระยะห่างระหว่างองค์ประกอบต่างๆ ของฟอร์มได้อย่างง่ายดาย
  2. ความยืดหยุ่นในการออกแบบ: สามารถปรับแต่งขนาดฟอร์มให้เข้ากับดีไซน์ของเว็บไซต์ได้อย่างรวดเร็ว
  3. ปรับแต่งตามขนาดหน้าจอ: Utility Classes ช่วยให้สามารถกำหนดการแสดงผลที่แตกต่างกันตามขนาดหน้าจอได้ง่าย เช่นการใช้ mx-sm-3 ซึ่งจะทำงานบนหน้าจอขนาดเล็กขึ้นไป

Form Row/Grid

Form Row/Grid ใน Bootstrap 4 เป็นวิธีการจัดวางองค์ประกอบของฟอร์มโดยใช้ระบบตาราง (grid system) ซึ่งเป็นหนึ่งในคุณสมบัติสำคัญของ Bootstrap ช่วยให้สามารถจัดเรียงช่องกรอกข้อมูลหรือฟอร์มอื่นๆ ได้อย่างเป็นระเบียบในรูปแบบแถวและคอลัมน์ การใช้ Form Row/Grid เหมาะสำหรับฟอร์มที่มีข้อมูลหลายฟิลด์และต้องการการจัดวางให้ฟิลด์ต่างๆ อยู่ในบรรทัดเดียวกันหรือเป็นกลุ่มในแนวคอลัมน์

หลักการทำงานของ Grid System ใน Bootstrap 4

  • Bootstrap ใช้ระบบกริดแบบ 12 คอลัมน์ แต่ละคอลัมน์จะมีคลาส col และสามารถกำหนดขนาดได้ เช่น col-6 (ครึ่งหนึ่งของความกว้าง) หรือ col-4 (หนึ่งในสามของความกว้าง)
  • สามารถจัดองค์ประกอบให้อยู่ในรูปแบบของแถว (row) และคอลัมน์ (col) เพื่อการจัดระเบียบฟอร์มที่ดูสวยงาม

ตัวอย่างของ Form Row/Grid

HTML
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputFirstName">ชื่อ</label>
      <input type="text" class="form-control" id="inputFirstName" placeholder="กรอกชื่อ">
    </div>
    <div class="form-group col-md-6">
      <label for="inputLastName">นามสกุล</label>
      <input type="text" class="form-control" id="inputLastName" placeholder="กรอกนามสกุล">
    </div>
  </div>
  
  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="inputCity">เมือง</label>
      <input type="text" class="form-control" id="inputCity" placeholder="กรอกชื่อเมือง">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">รัฐ/จังหวัด</label>
      <input type="text" class="form-control" id="inputState" placeholder="กรอกรัฐ/จังหวัด">
    </div>
    <div class="form-group col-md-4">
      <label for="inputZip">รหัสไปรษณีย์</label>
      <input type="text" class="form-control" id="inputZip" placeholder="กรอกรหัสไปรษณีย์">
    </div>
  </div>
  
  <button type="submit" class="btn btn-primary">ส่งข้อมูล</button>
</form>
  • form-row: ใช้เพื่อจัดให้ฟอร์มอยู่ในแถวเดียวกัน (row) สำหรับฟิลด์ที่ต้องการให้อยู่ในบรรทัดเดียวกัน
  • col-md-6: กำหนดขนาดของคอลัมน์ให้ครอบคลุม 6 คอลัมน์ (ครึ่งหนึ่งของแถว) สำหรับชื่อและนามสกุล
  • col-md-4: กำหนดขนาดของคอลัมน์ให้ครอบคลุม 4 คอลัมน์ (หนึ่งในสามของแถว) สำหรับฟิลด์เมือง รัฐ/จังหวัด และรหัสไปรษณีย์

การปรับใช้ Form Row/Grid

เราสามารถปรับใช้ Form Row/Grid เพื่อให้ฟอร์มของเรามีความยืดหยุ่นในการจัดวางช่องกรอกข้อมูลบนหน้าจอขนาดต่างๆ ได้อย่างมีประสิทธิภาพ เช่น:

  • บนหน้าจอขนาดใหญ่: สามารถแสดงหลายฟิลด์ในบรรทัดเดียว
  • บนหน้าจอขนาดเล็ก: ฟิลด์จะถูกจัดเรียงลงมาในแนวตั้งโดยอัตโนมัติ

ข้อดีของการใช้ Form Row/Grid

  1. การจัดวางที่เป็นระเบียบ: Grid System ช่วยจัดวางฟอร์มให้อยู่ในตำแหน่งที่เป็นระเบียบและสวยงาม
  2. ยืดหยุ่นต่อหน้าจอขนาดต่างๆ: ด้วยระบบ responsive ของ Bootstrap ช่องกรอกข้อมูลจะปรับขนาดตามหน้าจออุปกรณ์ต่างๆ
  3. ควบคุมขนาดของฟิลด์ได้ง่าย: สามารถกำหนดขนาดของแต่ละฟิลด์ในฟอร์มได้โดยใช้คลาสคอลัมน์ เช่น col-4, col-6, หรือ col-12

Form Validation

Form Validation ใน Bootstrap 4 คือกระบวนการตรวจสอบข้อมูลที่กรอกในฟอร์มว่าถูกต้องตามที่กำหนดไว้หรือไม่ เช่น ตรวจสอบว่าได้กรอกข้อมูลครบถ้วนหรือไม่ หรือข้อมูลที่กรอกในแต่ละช่องตรงตามเงื่อนไขที่ตั้งไว้หรือไม่ (เช่น อีเมล, เบอร์โทรศัพท์, หรือรหัสผ่านที่ต้องมีรูปแบบเฉพาะ) ซึ่งช่วยป้องกันไม่ให้ส่งข้อมูลที่ไม่ถูกต้องหรือไม่สมบูรณ์

การใช้ Form Validation ใน Bootstrap 4

Bootstrap 4 สนับสนุนการทำ Client-side validation ผ่าน HTML5 attributes ร่วมกับ CSS classes ที่ Bootstrap เตรียมไว้ โดยจะทำให้เกิดการตรวจสอบฟอร์มและแสดงผลลัพธ์ เช่น สีพื้นหลังหรือข้อความแจ้งเตือนโดยอัตโนมัติ

ตัวอย่างการใช้งาน Form Validation

HTML
<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="inputName">ชื่อ</label>
    <input type="text" class="form-control" id="inputName" placeholder="กรอกชื่อ" required>
    <div class="invalid-feedback">
      กรุณากรอกชื่อของคุณ
    </div>
  </div>

  <div class="form-group">
    <label for="inputEmail">อีเมล</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="กรอกอีเมล" required>
    <div class="invalid-feedback">
      กรุณากรอกอีเมลที่ถูกต้อง
    </div>
  </div>
  
  <div class="form-group">
    <label for="inputPassword">รหัสผ่าน</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="รหัสผ่าน" minlength="6" required>
    <div class="invalid-feedback">
      รหัสผ่านต้องมีความยาวอย่างน้อย 6 ตัวอักษร
    </div>
  </div>

  <button type="submit" class="btn btn-primary">ยืนยัน</button>
</form>

องค์ประกอบสำคัญใน Form Validation

  1. HTML5 attributes: ใช้กำหนดการตรวจสอบแบบพื้นฐาน เช่น required (บังคับกรอกข้อมูล), minlength (ความยาวขั้นต่ำของข้อความ), type="email" (ตรวจสอบรูปแบบอีเมล)
  2. CSS classes: Bootstrap มีการแสดงผลการตรวจสอบผ่าน class พิเศษ:
    • was-validated: เมื่อฟอร์มถูกตรวจสอบ จะเพิ่ม class นี้เพื่อแสดงผลการตรวจสอบ
    • is-valid: ใช้เมื่อข้อมูลถูกต้อง จะแสดงฟิลด์เป็นสีเขียว
    • is-invalid: ใช้เมื่อข้อมูลไม่ถูกต้อง จะแสดงฟิลด์เป็นสีแดง
    • invalid-feedback: ข้อความแจ้งเตือนเมื่อข้อมูลไม่ผ่านการตรวจสอบ

การทำงานของ Form Validation:

  • เมื่อผู้ใช้งานกรอกฟอร์มและคลิกส่ง ระบบจะตรวจสอบฟิลด์ที่มีการกำหนดเงื่อนไขไว้ เช่น ฟิลด์ที่ใช้ required จะถูกตรวจสอบว่าได้กรอกข้อมูลหรือไม่ ฟิลด์ที่กำหนด type="email" จะตรวจสอบว่าเป็นอีเมลรูปแบบที่ถูกต้องหรือไม่
  • หากข้อมูลไม่ถูกต้อง จะมีการแสดงข้อความแจ้งเตือนจาก <div class="invalid-feedback"> ที่อยู่ใกล้กับฟิลด์ที่ตรวจสอบ

การเปิดใช้งาน Validation

ในการเปิดใช้งาน Bootstrap Form Validation จำเป็นต้องใช้ JavaScript เพื่อป้องกันการส่งฟอร์มหากข้อมูลไม่ผ่านการตรวจสอบ โดยใช้โค้ดดังนี้

HTML
<script>
  // การตรวจสอบฟอร์มเมื่อผู้ใช้ส่งฟอร์ม
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      var forms = document.getElementsByClassName('needs-validation');
      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>

การปรับแต่งข้อความแจ้งเตือน

สามารถปรับแต่งข้อความใน invalid-feedback ให้เหมาะสมกับข้อมูลที่ต้องการตรวจสอบ เช่น หากต้องการแจ้งเตือนในฟิลด์รหัสผ่านที่สั้นเกินไป สามารถใช้ข้อความเตือนที่เจาะจงได้ เช่น “รหัสผ่านต้องมีความยาวอย่างน้อย 6 ตัวอักษร”

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ