Lesson 31: Creating Forms in Bootstrap 5

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

Table of Contents

Stacked Form
Hộp văn bản

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 width="100%" height="100%" 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 id="hop-van-ban">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">

You've just finished reading the article "Lesson 31: Creating Forms in Bootstrap 5" edited by the TipsMake team. You can save lesson-31-creating-forms-in-zsevy.pdf to your computer here to read later or print it out. We hope this article has provided you with many useful tech tips and tricks. You can search for similar articles on tips and guides. Thank you for reading and for following us regularly.

Bootstrap 5

Samuel Daniel

Update 22 April 2026

« PREV Lesson 30: Flexing in Bootstrap 5

NEXT » Lesson 32: Selection Menus in Bootstrap 5