Bootstrap 4 – Forms

Bootstrap 4 cung cấp nhiều style cho form.

Basic Form

Dùng Class .form-control của Bootstrap 4 giúp chúng ta style lại <input>, <textarea>, <select> như mặc định width: 100%.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <form action="https://editor.ecntt.com/submit/form_action.php">
      <fieldset class="form-group">
        <label for="first_name">First Name</label>
        <input type="text" class="form-control" id="first_name" name="first_name">
      </fieldset>
      <fieldset class="form-group">
        <label for="last_name">Last Name</label>
        <input type="text" class="form-control" id="last_name" name="last_name">
      </fieldset>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
  </div>

</body>

</html>

Inline Form

Class form-inline giúp tạo form trên cùng 1 hàng. Nếu màn hình nhỏ hơn 576px, form sẽ không hiển thị trên 1 hàng mà responsive.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <form action="https://editor.ecntt.com/submit/form_action.php" class="form-inline">
      <label class="" for="first_name">First Name</label>
      <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name">
      <label class="" for="last_name">Last Name</label>
      <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name">
      <button type="submit" class="btn btn-primary mt-2 mt-sm-0">Submit</button>
    </form>
  </div>
  </div>

</body>

</html>

các class mr-sm-2 (m : margin, r : margin-right|padding-right, sm, và 2 là kích thước .5rem) dùng để thêm margin, hay padding sẽ được học trong bài Bootstrap 4 – Utilities

Hidden Labels

Label nên có ở tất cả các trường input, để hỗ trợ tương tác trong quá trình xử lý form như nhập liệu bằng giọng nói… (Tham khảo https://www.w3.org/WAI/tutorials/forms/labels/). Vì thế, trong trường hợp bạn không muốn hiển thị label cho trường input bạn có thể sử dụng class .sr-only để ẩn label đi. Ngoài ra có thể sử dụng placeholder để hướng dẫn người dù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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <form action="https://editor.ecntt.com/submit/form_action.php" class="form-inline">
      <label class="mr-sm-2 mb-0 sr-only" for="first_name">First Name</label>
      <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name" placeholder="First name">
      <label class="mr-sm-2 mb-0 sr-only" for="last_name">Last Name</label>
      <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name" placeholder="Last name">
      <button type="submit" class="btn btn-primary mt-2 mt-sm-0">Submit</button>
    </form>
  </div>
  </div>

</body>

</html>

Horizontal Form

Để tạo Horizontal Form bạn có thể sử dụng grid. Thêm class row vào form-group và sử dụng col-*-* hoặc .col-* cho mỗi cột. Lúc này mỗi form-group sẽ nằm trên 1 hàng và được chia làm nhiều cột tùy vào yêu cầu.

Dùng class col-form-label để canh chỉnh lại vị trí của label so với ô input.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>  

  <div class="container">
    <form action="https://editor.ecntt.com/submit/form_action.php">
      <div class="form-group row">
        <label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label>
        <div class="col-xs-9">
          <input type="text" class="form-control" id="first_name" name="first_name">
        </div>
      </div>
      <div class="form-group row">
        <label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label>
        <div class="col-xs-9">
          <input type="text" class="form-control" id="last_name" name="last_name">
        </div>
      </div>
      <div class="form-group row">
        <div class="offset-xs-3 col-xs-9">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </form>
  </div>

</body>

</html>

Form Row

Nếu có nhiều input trên cùng 1 row, có thể thay .row bằng .form-row để các input canh chỉnh gọn hơn.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <p><code>.row</code>:</p>
    <form>
      <div class="row">
        <div class="col">
          <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Last name">
        </div>
      </div>
    </form>

    <p class="mt-5"><code>.form-row</code>:</p>
    <form>
      <div class="form-row">
        <div class="col">
          <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Last name">
        </div>
      </div>
    </form>
  </div>

</body>

</html>

Form Legends

Dùng <legend> với class .col-form-label để tạo style cho legend giống như một label. Điều này hữu ích trong trường hợp bạn sử dụng radio hay checkboxes.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
      <form action="https://editor.ecntt.com/submit/form_action.php">

        <fieldset class="form-group">
          <div class="row">
            <legend class="col-form-label col-3">Fruit</legend>
            <div class="col-9">
              <div class="form-check">
                <label class="form-check-label">
                  <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio1" value="1"> Apple
                </label>
              </div>
              <div class="form-check">
                <label class="form-check-label">
                  <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio2" value="2" checked> Orange
                </label>
              </div>
              <div class="form-check">
                <label class="form-check-label">
                  <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio3" value="3"> Watermelon
                </label>
              </div>
            </div>
          </div>
        </fieldset>

        <div class="form-group row">
          <label for="first_name" class="col-3 col-form-label">First Name</label>
          <div class="col-9">
            <input type="text" class="form-control" id="first_name" name="first_name">
          </div>
        </div>
        <div class="form-group row">
          <label for="last_name" class="col-3 col-form-label">Last Name</label>
          <div class="col-9">
            <input type="text" class="form-control" id="last_name" name="last_name">
          </div>
        </div>

        <div class="form-group row">
          <div class="offset-3 col-9">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>

      </form>
    </div>

</body>

</html>

Form Control Size

Sử dụng .form-control-sm hay .form-control-lg để tăng hay giảm chiều cao của input (Bằng cách thay đổi padding, line-height…).

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="form-group">
      <input type="text" class="form-control form-control-sm" placeholder="Small">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" id="last_name" placeholder="Default size">
    </div>
    <div class="form-group">
      <input type="text" class="form-control form-control-lg" placeholder="Large">
    </div>
  </div>

</body>

</html>

Form Label Size

Tương tự bạn dùng .col-form-label-sm và .col-form-label-lg để thay đổi kích thước label tương ứng với kích thước input.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <form>
      <div class="form-group row">
        <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="Small">
        </div>
      </div>
      <div class="form-group row">
        <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="colFormLabel" placeholder="Default size">
        </div>
      </div>
      <div class="form-group row">
        <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="Large">
        </div>
      </div>
    </form>
  </div>

</body>

</html>

Column Size

Trong Bootstrap bạn cũng có thể sử dụng grid system để thay đổi chiều rộng của 1 input.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="form-row">
      <div class="col-5">
        <input type="text" class="form-control" placeholder=".col-5">
      </div>
      <div class="col-3">
        <input type="text" class="form-control" placeholder=".col-3">
      </div>
    </div>
  </div>

</body>

</html>

Help Text

Để hướng dẫn, hay hỗ trợ người dùng nhập dữ liệu input, bạn có thể sử dụng class .form-text. Bạn cũng có thể định dạng text bằng các class color khác như .text-muted…

Bạn cũng nên dùng thuộc tính aria-describedby để trình đọc form có thể gán help cho input tương ứng.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <label for="accountId">Account Id</label>
    <input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
    <span id="helpAccountId" class="form-text text-muted">Your account ID is located at the top of your invoice.</span>
  </div>

</body>

</html>

Static Control

Bạn có thể dụng .form-control-plaintext trong thẻ <p> để tạo text bên cạnh label thay vì trường input.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <form>
      <div class="form-group row">
        <label class="col-3 col-form-label mr-2">Username</label>
        <div class="col-8">
          <p class="form-control-plaintext">Bugsy</p>
        </div>
      </div>
      <div class="form-group row">
        <label for="pwd" class="col-3 col-form-label mr-2">Password</label>
        <div class="col-8">
          <input type="password" class="form-control" id="pwd" placeholder="Password">
        </div>
      </div>
    </form>
  </div>

</body>

</html>

Checkboxes & Radio Buttons

Bootstrap cung cấp các class .form-check, .form-check-label, .form-check-input, và .form-check-inline để style cho checkboxe và radio.

Dùng .form-check-label cho label để style cho checkboxe và radio.

Nếu muốn hiển thị trên 1 hàng, có thể sử dụng class .form-check-inline trong thẻ div bao quanh.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <!-- Checkboxes -->
    <div class="form-check form-check-inline">

      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1">
      <label class="form-check-label">1</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2">
      <label class="form-check-label">2</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3">
      <label class="form-check-label">3</label>
    </div>

    <!-- Radio Buttons -->
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1">
      <label class="form-check-label">1</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2">
      <label class="form-check-label">2</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
      <label class="form-check-label">3</label>
    </div>

  </div>
  </div>

</body>

</html>