Xây dựng HTML Form với Bootstrap

Trình bày các phần tử trong form như <input> <select> <textarea> ...

Các class:
.form-group
.form-control{-sm|-lg}
.form-control-file
.form-control-plaintext
.col-form-label{-sm|-lg}
.form-row
.form-check
.form-check-inline
.form-check-input
.form-check-label
.form-inline

.form-group Tạo 1 dòng form chứa phần tử dùng .form-group

<form class="bg-light p-4 m-4">
  <div class="form-group">
    <label for="yourmail">Email address</label>
    <input type="email" class="form-control" id="yourmail" placeholder="Nhập email">
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

.form-control (.form-control-lg loại lớn, .form-control-sm loại nhỏ) lớp dùng cho các phần tử form nhập dữ liệu Text <input> <select> <textarea>

Ví dụ <input>

<div class="form-group">
    <label for="exampleFormControlInput1">Địa chỉ email</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

Ví dụ <select> chọn 1

<div class="form-group">
    <label for="exampleFormControlSelect1">Chọn số quan tâm</label>
    <select class="form-control" id="exampleFormControlSelect1">
        <option>1</option>
        <option>2</option>
    </select>
</div>

Ví dụ <select> chọn nhiều

<div class="form-group">
    <label for="exampleFormControlSelect2">Chọn mục quan tâm</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>

Ví dụ <textarea>

    <div class="form-group">
        <label for="exampleFormControlTextarea1">Nhập nội dung</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>

.form-control-file lớp dùng cho <input> chọn file

<div class="form-group">
    <label for="exampleFormControlFile1">Chọn file</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>

.form-control-plaintext trình bày như là text, thường dùng nó cùng thuộc tính readonly

<div class="form-group">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
</div>

.col-form-label (.col-form-label-lg lớn, .col-form-label-sm nhỏ) thêm vào <label> để thiết lập nhãn ở giữa theo phương đứng, hưu ích khi bố trí nhãn và điều khiển trên một hàng.

Trong form có thể chia lưới .form-group bằng .row (hoặc .form-row) và .col-*

<div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
</div>

.form-check (thay cho .form-group) dùng cho khối phần tử checkbox, radio. Nếu muốn chuyển dạng inline thêm vào .form-check-inline

.form-check-input (thay cho .form-control) dùng cho checkbox, radio

.form-check-label thiết lập label khi dùng radio, checkbox

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
        Default radio
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
        Second default radio
    </label>
</div>
<div class="form-check disabled">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3">
        Disabled radio
    </label>
</div>

.valid-feedback .invalid-feedback thiết lập box hiện thị thông báo lỗi

<div class="form-group">
    <label for="validationServer04">State</label>
    <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
    <div class="invalid-feedback">
        Please provide a valid state.
    </div>
</div>
<div class="form-group">
    <label for="validationServer02">Last name</label>
    <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
    <div class="valid-feedback">
        Looks good!
    </div>
</div>