Tạo giao diện form nhập liệu Bootstrap

Bootstrap tạo giao diện form html nhập liệu với Bootstrap

  1. Tạo form đơn giản
  2. Tạo form giống kiểu chứng từ và chi tiết

1. Tạo form đơn giản kiểu form login



<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>



<div class="container">

  <h2>Stacked form</h2>

  <form action="/action_page.php">

    <div class="form-group">

      <label for="email">Email:</label>

      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">

    </div>

    <div class="form-group">

      <label for="pwd">Password:</label>

      <input type="password" class="form-control" id="pwd" placeholder="Mật khẩu" name="pswd">

    </div>

    <div class="form-group form-check">

      <label class="form-check-label">

        <input class="form-check-input" type="checkbox" name="remember"> ghi nhớ

      </label>

    </div>

    <button type="submit" class="btn btn-primary">Đăng nhập</button>

  </form>

</div>



</body>

</html>


Tạo form có chi tiết

 

2. Tạo form dạng chứng từ và chi tiết

* Phần tạo HTML Form nhập, phần HTML chi tiết

Chú ý: class=form-control sử dụng cho các input, nhưng nếu span cũng có thể sử dụng để hiện thị



<style>

.w_title

{

width:180px;

}

.w_text

{

width:100%;

}

</style>

<form>

<div class="form-row">

<div class="form-group col-md-3">

         <div class="input-group">

             <div class="input-group-prepend w_title" >

                  <span class="input-group-text w_text" ><i class="fas fa-tag mr-1"></i> Số phiếu:</span>

             </div>

             <input autocomplete="off" type="text"  id="f_tungay" class='form-control '  value=""  >

<div class="input-group-append">

   <button type="button" class="btn btn-warning input-group-append"  >CHỌN</button>

  </div>

         </div>

    </div>

    <div class="form-group col-md-3">

       <div class="input-group">

            <div class="input-group-prepend ">

                  <span class="input-group-text" ><i class="far fa-calendar-alt mr-1"></i> Ngày phát sinh:</span>

            </div>

             <input autocomplete="off"  type="text" class='form-control '  value=""  >

        </div>

    </div>

<div class="form-group col-md-3">

       <div class="input-group">

            <div class="input-group-prepend ">

                  <span class="input-group-text" ><i class="fas fa-user-tag mr-1"></i> Người tạo:</span>

            </div>

             <input autocomplete="off"  type="text" class='form-control '  value=""  >

        </div>

    </div>

    <div class="form-group col-md-8">

         <div class="input-group">

             <div class="input-group-prepend w_title" >

                  <span class="input-group-text w_text" ><i class="fas fa-file-signature mr-1"></i> Tên khách hàng:</span>

             </div>

             <input autocomplete="off" type="text"  id="f_tungay" class='form-control '  value=""  >

         </div>

    </div>

    <div class="form-group col-md-4">

       <div class="input-group">

            <div class="input-group-prepend ">

                  <span class="input-group-text" ><i class="fas fa-phone mr-1"></i> Điện thoại:</span>

            </div>

             <input autocomplete="off"  type="text" class='form-control '  value=""  >

        </div>

    </div>

    <div class="form-group col-md-12">

         <div class="input-group">

             <div class="input-group-prepend w_title">

                  <span class="input-group-text w_text" ><i class="fas fa-map-marker-alt mr-1"></i> Địa chỉ:</span>

             </div>

             <input autocomplete="off" type="text"  id="f_tungay" class='form-control '  value=""  >

         </div>

    </div>

    <div class="form-group col-md-12">

         <div class="input-group">

             <div class="input-group-prepend w_title"  >

                  <span class="input-group-text w_text" ><i class="fas fa-file-alt mr-1"></i> Nội dung:</span>

             </div>

             <input autocomplete="off" type="text"  id="f_tungay" class='form-control '  value=""  >

         </div>

    </div>

    <div class="form-group col-md-12">

         <div class="input-group">

             <div class="input-group-prepend w_title"  >

                  <span class="input-group-text w_text" ><i class="fas fa-paste mr-1"></i> Chứng từ kèm theo:</span>

             </div>

             <input autocomplete="off" type="text"  id="f_tungay" class='form-control '  value=""  >

         </div>

    </div>

</div>

</form>

<!-- CHI TIẾT -->

<hr>

<div class="mb-2"><strong><i class="fas fa-layer-group"></i> Chi tiết:</strong></div>

<table class="table table-bordered table-hover">

  <thead>

    <tr class="bg-danger text-light">

      <th scope="col">TT</th>

      <th scope="col">Diễn giải</th>

      <th scope="col" class="text-right">Số tiền</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">1</th>

      <td>Mark</td>

      <td class="text-right">200.000</td>



    </tr>

    <tr>

      <th scope="row">2</th>

      <td>Jacob</td>

      <td class="text-right">200.000</td>



    </tr>

    <tr>

      <th scope="row">3</th>

      <td>Larry</td>

      <td class="text-right">200.000</td>



    </tr>

  </tbody>

   <tfoot>

    <tr class="bg-success text-light">

      <th scope="col"></th>

      <th scope="col"></th>

      <th scope="col" class="text-right">TỔNG: 2.000.000</th>

    </tr>

  </tfoot>

</table>

Bài viết liên quan:

Bootstrap tạo giao diện form html nhập liệu với Bootstrap

Thiết kế website©
0935999617
0935999617