Lesson 31: Creating Forms in Bootstrap 5

22 April 2026

Forms in Bootstrap 5 make it easy for developers to build web forms. Here's how to create a form using Bootstrap 5.

Forms in Bootstrap 5 make it easy for developers to build web forms. Below is how to create a form using Bootstrap 5 .

Stacked Form

All elements and</strong> với class <code>.form-control</code> đều có kiểu dáng biểu mẫu phù hợp. Code mẫu:</p><pre class="language-html"><code><form action="/action_page.php"> <div class="mb-3 mt-3"> <label for="email" class="form-label">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="mb-3"> <label for="pwd" class="form-label">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"> </div> <div class="form-check mb-3"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form></code></pre><p id="articleads" class="adbox adsense in-article"><ins class="adsbygoogle" mstyle="display:block;text-align:center" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-9275417305531302" data-ad-slot="2079243249"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script></p><p>Ví dụ:</p><pre class="language-html"><code><!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Đăng nhập TipsMake.com.com</h2> <form action="/action_page.php"> <div class="mb-3 mt-3"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Nhập email" name="email"> </div> <div class="mb-3"> <label for="pwd">Mật khẩu:</label> <input type="password" class="form-control" id="pwd" placeholder="Nhập mật khẩu" name="pswd"> </div> <div class="form-check mb-3"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember"> Lưu mật khẩu </label> </div> <button type="submit" class="btn btn-primary">Đăng nhập</button> </form> </div> </body> </html> </code></pre><p id="articleads2" class="adbox in-article adsense"><ins class="adsbygoogle" mstyle="display:block;text-align:center" data-ad-format="fluid" data-ad-layout="in-article" data-ad-client="ca-pub-9275417305531302" data-ad-slot="4889239415"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script></p><p mstyle="text-align:center"> <span class="images_post"><img class="lazy" src="https://tipsmake.com/img/no-image.png" data-src="https://tipsmake.com/data8/images/lesson-31-creating-forms-in-zsevy-picture-1-fr3nFrbpm.jpg" alt="Picture 1 of Lesson 31: Creating Forms in Bootstrap 5"/></span> </p><p><strong>Lưu ý: </strong>Ví dụ đã thêm class <code>.form-label</code> vào mỗi phần tử label để đảm bảo thuộc tính đệm chính xác.</p><p>Các ô tích có kiểu đánh dấu khác nhau. Chúng được bao bọc xung quanh một phần tử container với <code>.form-check</code> và các label kèm class của <code>.form-check-label</code>, còn những ô tích và nút tròn dùng <code>.form-check-input</code>.</p><h2>Hộp văn bản</h2><p>Code mẫu:</p><pre class="language-html"><code><label for="comment">Comments:</label> <textarea class="form-control" rows="5" id="comment" name="text">

Bootstrap Bootstrap 5

« PREV POST