Bài 4: làm việc với Form trong Bootstrap 5.3

Bài 4: làm việc với Form trong Bootstrap 5.3

Với việc sử dụng thư viện Form bằng thư viện của Framework Bootstrap 5.3 cho phép chúng ta tùy biến với giao diện vô cùng hợp thời và đẹp mắt.

Ở bài trước chúng ta đã được giới thiệu qua về việc chèn Image trong Bootstrap rồi, hôm nay hãy cùng sonnguyenaz.com tiếp tục đến với bài học tiếp theo về cách xây dựng một biểu mẫu nhập liệu nhé.

Form sử dụng Bootstrap có gì khác biệt?

Như các bạn đã biết việc xây dựng một biểu mẫu nhập liệu cho trang web thì việc đầu tiên phải tính tới khả năng nhận biết, nghĩa là chỉ cần nhìn thoáng qua người dùng cũng đã biết biểu mẫu hay ô đó dùng để nhập gì vào.

Một biểu mẫu không những phải rõ ràng mà còn có tính thẩm mỹ thì mới tỏ lên sự chuyên nghiệp của một trang web.

Với việc sử tạo Form sử dụng thư viện của Framework Bootstrap thì chắc chắn bạn phải hoàn toàn ưng ý.

Các thành phần của form bao gồm:

  • Form control: Khai bao kiểu đầu vào của văn bản.
  • Input group: các kiểu dữ liệu nhập vào.
  • Select: các lựa chọn theo danh sách xổ xuống
  • Checks & radios: các nút lựa chọn
  • Range: Kéo vùng theo chỉ số
  • Validation: Bắt sự kiện nhập vào theo quy tắc
  • Floating labels: nhãn gợi ý
  • Layout: Tạo bố cục cho biểu mẫu

Tìm hiểu các thành phần của Form

Form control

Form control dùng để cung cấp cho các trường văn bản một chức năng tùy chỉnh như kích thước, trạng thái, chú thích

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<div class="mb-3">
		<label for="exampleFormControlInput1" class="form-label">Tiêu đề</label>
		<input type="text" class="form-control" id="exampleFormControlInput1">
	</div>
	<div class="mb-3">
		<label for="exampleFormControlTextarea1" class="form-label">Nội dung</label>
		<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả thu được:

su-dung-form-control

Select trong Form

Như các bạn đã biết là Select trong hmtl là dùng để lựa chọn từ danh sách thả xuống.

Ví dụ như bạn đăng ký thì có chỗ chọn địa chỉ, chọn giới tính chẳng hạn, nhưng đối với khi dùng Bootstrap thì bạn chẳng cần phải bận tâm để viết style CSS cho nó nữa vì đã có sẵn rồi.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<select class="form-select" aria-label="Default select example">
		<option selected>Chọn giới tính</option>
		<option value="1">Nam</option>
		<option value="2">Nữ</option>
		<option value="3">Không cho biết</option>
		</select>
    <!-- End Example Code -->
  </body>
</html>

Kết quả hiển thị:

su-dung-select

Ngoài ra bạn cũng có thể quy định kích cỡ cho nó thông qua class: form-select-lgform-select-sm:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<select class="form-select-lg" aria-label="Default select example">
		<option selected>Chọn giới tính</option>
		<option value="1">Nam</option>
		<option value="2">Nữ</option>
		<option value="3">Không cho biết</option>
		</select>
		<select class="form-select-sm" aria-label="Default select example">
		<option selected>Chọn giới tính</option>
		<option value="1">Nam</option>
		<option value="2">Nữ</option>
		<option value="3">Không cho biết</option>
		</select>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

tuy-chinh-kich-thuoc-select-trong-bootstrap

Để khóa không cho lựa chọn ta có thể dùng disabled:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<select class="form-select-lg" aria-label="Default select example" disabled>
		<option selected>Chọn giới tính</option>
		<option value="1">Nam</option>
		<option value="2">Nữ</option>
		<option value="3">Không cho biết</option>
		</select>
    <!-- End Example Code -->
  </body>
</html>

Đối với select có nhiều lựa chọn cùng 1 lúc ta có thể dùng multiple và khi chọn bấm nút Ctr và chuột trái để chọn:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<select class="form-select-lg" aria-label="Default select example" multiple >
		<option selected>Chọn giới tính</option>
		<option value="1">Nam</option>
		<option value="2">Nữ</option>
		<option value="3">Không cho biết</option>
		</select>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

multiple-select-trong-bootstrap

Checks và radios

Check và radios là 2 nút dùng để chọn, Checks thì chỉ được chọn duy nhất 1 còn radios có thể chọn nhiều.

Bạn thường gặp 2 nút này ở các đề thi trắc nghiệm online khi trả lời đáp án đúng không nào.

Ví dụ về Checks

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<h3>Con vịt có những bộ phận nào trên cơ thể?</h3>
		<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1">
		<label class="form-check-label" for="flexCheckDefault1">
		Chân
		</label>
		</div>
		<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked2">
		<label class="form-check-label" for="flexCheckChecked2">
		Tay
		</label>
		</div>
		<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked3">
		<label class="form-check-label" for="flexCheckChecked3">
		Mỏ
		</label>
		</div>
		<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked4">
		<label class="form-check-label" for="flexCheckChecked4">
		Cánh
		</label>
		</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

checks-trong-bootstrap

Bạn cũng có thể tạo nút Switches cho Checks nhưng chức năng này đối với các trình duyệt cũ thì không hoạt động nó trở về mặc định ban đầu như ở trên:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<h3>Bạn muốn đăng ký tài khoản?</h3>
		<div class="form-check form-switch">
		<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
		<label class="form-check-label" for="flexSwitchCheckDefault">Bạn đã đọc kỹ điều khoản của chúng tôi?</label>
		</div>
		<div class="form-check form-switch">
		<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked">
		<label class="form-check-label" for="flexSwitchCheckChecked">Bạn xác nhận đăng ký tài khoản?</label>
		</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

switches-trong-bootstrap

Ví dụ về Radios

Cũng như Checks thì Radios cho phép bạn trả lời câu hỏi chỉ với 1 đáp án duy nhất

Ví dụ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<h3>Con vịt có mấy chân?</h3>
		<div class="form-check">
		<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
		<label class="form-check-label" for="flexRadioDefault1">
		1
		</label>
		</div>
		<div class="form-check">
		<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
		<label class="form-check-label" for="flexRadioDefault2">
		2
		</label>
		</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

radios-trong-bootstrap

Và cả 2 nút này đều có chức năng khóa chọn disabled  và chọn mặc định checked.

Bạn có thể phối hợp cả 2 chức năng trên vào 1 nút để vừa khóa vừa chọn mặc định luôn.

Range trong Form

Range là một thanh kéo chọn với các bước nhảy tùy thuộc cài đặt theo giá trị min và max

Ví dụ: câu hỏi team của bạn gồm bao nhiêu thành viên bạn có thể kéo chọn từ min: 1 đến max:10

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<h3>Team của bạn có mấy thành viên?</h3>
		<label for="customRange2" class="form-label">Kéo để chọn</label>
		<input type="range" class="form-range" min="0" max="10" id="customRange2">
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

range-trong-bootstrap

Nếu không quy định thì mặc định số bước để nhảy là số nguyên như bạn quy định từ 0 đến 10 thì mỗi lần kéo sẽ nhảy 1 bước

Còn bạn quy định step thì số bước nhảy có thể nhiều hơn, ví dụ bạn quy định “step”=”0.5” thì số bước lên đến 20.

Ngoài ra ranger cũng có thuộc tính khóa disabled như các thành phần khác.

Input group

Input group trong form Bootstrap tạo nên sự khác biệt, bạn có thể thiên biến vạn hóa các nút một cách hợp lý và trực quan hơn cho người dùng rất nhiều:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<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>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

input-group-trong-bootstrap

Quá là tiện ích đúng không ạ, ngoài ra bạn cũng có thể tùy biến kết hợp các button, checks, radios,… vào với các nhau cho đẹp mắt hơn, các bạn có thể tham khảo thêm tại đây.

Floating labels

Ngoài các Input group bạn cũng có thể sử dụng Floating labels để tạo nhãn cho các trường nhập liệu để người nhập luôn luôn biết ô đấy cần nhập gì.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
		<div class="form-floating mb-3">
		<input type="text" class="form-control" id="floatingInput1" placeholder="fullname">
		<label for="floatingInput1">Full Name</label>
		</div>
		<div class="form-floating mb-3">
		<input type="email" class="form-control" id="floatingInput2" placeholder="name@example.com">
		<label for="floatingInput2">Email address</label>
		</div>
		<div class="form-floating">
		<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
		<label for="floatingPassword">Password</label>
		</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

floating-labels-group-trong-bootstrap

Layout

Ở phần trên mình đã giới thiệu cho các bạn các thành phần bên trong để tạo nên form bootstrap.

Thứ không thể thiếu đó Layout cách trình bày các nút các trường nhập liệu như sao cho hợp lí và logic.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">

    <!-- Example Code -->
    
    <form class="row g-3">
      <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4">
      </div>
      <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4">
      </div>
      <div class="col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="col-12">
        <label for="inputAddress2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
      <div class="col-md-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity">
      </div>
      <div class="col-md-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
          <option selected="">Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="col-md-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="text" class="form-control" id="inputZip">
      </div>
      <div class="col-12">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck">
          <label class="form-check-label" for="gridCheck">
            Check me out
          </label>
        </div>
      </div>
      <div class="col-12">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </form>
    
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

layout-trong-bootstrap

Nếu bạn chưa hiểu rõ về Containers và Gird system trong Bootstrap thì bạn có thể đọc lại để hiểu nhé.

Validation

Validation là thành phần để kiểm tra đầu vào của các thành phần trong form có đủ điều kiện hay là không, ví dụ bạn nhập vào email nhưng không đúng quy định username@example.com thì khi bấm nút gửi trong form sẽ báo lỗi.

Ở Javascript có lẽ bạn đã biết nhiều đến Validation rồi, như với Bootstrap thì nó trông chuyên nghiệp và trực quan hơn:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">State</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>
    <!-- End Example Code -->
  </body>
</html>

Kết quả khi bấm nút kiểm tra:

validation-trong-bootstrap

Lời kết

Như vậy là chúng ta đã tìm hiểu về các thuộc tính trong Form sử dụng Bootstrap, tùy vào từng trường hợp cụ thể mà bạn cảm thấy hợp lý mà sắp xếp phân bổ làm sao mang lại giá trị trải nghiệm cho người sử dụng.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã theo dõi.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *