Bài 31: Tạo Form trong Bootstrap 5

Chí Vỹ

Form trong Bootstrap 5 giúp lập trình viên dễ dàng xây dựng các biểu mẫu cho web. Dưới đây là cách tạo Form bằng Bootstrap 5.

Stacked Form

Tất cả các phần tử <input> và <textarea> với class .form-control đều có kiểu dáng biểu mẫu phù hợp. Code mẫu:

<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>

Ví dụ:

<!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 Quantrimang.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>

Biểu mẫu đăng nhập Quantrimang.com

Lưu ý: Ví dụ đã thêm class .form-label vào mỗi phần tử label để đảm bảo thuộc tính đệm chính xác.

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 .form-check và các label kèm class của .form-check-label, còn những ô tích và nút tròn dùng .form-check-input.

Hộp văn bản

Code mẫu:

<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Ví dụ:

<!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>Textarea</h2>
  <p>Dùng class .form-control để tạo kiểu cho vùng nhập văn bản trên Quantrimang.com:</p>
  <form action="/action_page.php">
    <div class="mb-3 mt-3">
      <label for="comment">Bình luận:</label>
      <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Gửi</button>
  </form>
</div>

</body>
</html>

Hộp văn bản trong Bootstrap

Hàng/Đường kẻ trong biểu mẫu bình thường

Nếu muốn các phần tử trong biểu mẫu xuất hiện cạnh nhau, dùng .row và .col. Code mẫu:

<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>

Ví dụ:

<!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>Biểu mẫu thông thường</h2>
  <p>Dùng .row và .col để hiện các thành phần trong biểu mẫu cạnh nhau trên Quantrimang.com:</p>
  <form>
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="Enter email" name="email">
      </div>
      <div class="col">
        <input type="password" class="form-control" placeholder="Enter password" name="pswd">
      </div>
    </div>
  </form>
</div>

</body>
</html>

Tạo kiểu biểu mẫu bằng Bootstrap 5

Kích thước biểu mẫu

Bạn có thể thay đổi kích thước của các mục nhập .form-control với .form-control-lg hoặc .form-control-sm:

<!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">
  <form>
    <input type="text" class="form-control form-control-lg" placeholder="Lớn">
    <input type="text" class="form-control mt-3" placeholder="Bình thường">
    <input type="text" class="form-control form-control-sm mt-3" placeholder="Nhỏ">
  </form>
</div>

</body>
</html>

Kích thước biểu mẫu

Vô hiệu hóa hoặc chỉ đọc

Dùng các thuộc tính disable hoặc readonly để vô hiệu hóa trường nhập dữ liệu:

<!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">
  <form>
    <input type="text" class="form-control" placeholder="Nhập bình thường">
    <input type="text" class="form-control mt-3" placeholder="Không nhập được" disabled>
    <input type="text" class="form-control mt-3" placeholder="Chỉ đọc" readonly>
  </form>
</div>

</body>
</html>

Tính khả dụng của các trường nhập

Trường nhập văn bản thuần túy

Dùng class .form-control-plaintext để tạo kiểu một trường nhập dữ liệu không có đường viền, nhưng vẫn giữ nguyên lề và phần đệm phù hợp:

<!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>Văn bản thuần túy</h2>
  <p>Dùng class .form-control-plaintext để tạo kiểu trường nhập không có đường viền, nhưng với phần lề và đệm phù hợp:</p>
  <form>
    <input type="text" class="form-control-plaintext" placeholder="Nhập văn bản thuần túy">
    <input type="text" class="form-control mt-3" placeholder="Nhập bình thường">
  </form>
</div>

</body>
</html>

Nhập văn bản thuần túy

Chọn màu

Để định kiểu đầu vào với type = “color” phù hợp, dùng class .form-control-color. Ví dụ:

<!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>Bộ chọn màu</h2>
  <p>Dùng class .form-control-color để tạo kiểu một trường nhập với type="color" phù hợp:</p>
  <form>
    <label for="myColor" class="form-label">Color picker</label>
    <input type="color" class="form-control form-control-color" id="myColor" value="#CCCCCC" title="Choose a color">
  </form>
</div>

</body>
</html>

Bộ chọn màu cho biểu mẫu

Trên đây là những điều bạn cần biết về cách tạo form trong Bootstrap 5. Hi vọng bài viết hữu ích với các bạn.

Thứ Năm, 08/12/2022 14:09

5 ★ 1 👨 2.427

#Bootstrap

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!