Bài 6. Form và kiểm tra dữ liệu

Một số khái niệm

Mẫu chung: <label class="form-label"> + <input class="form-control"> + <div class="form-text"> (gợi ý). Kiểm tra dữ liệu dùng các thuộc tính HTML (required, type, pattern) của trình duyệt; Bootstrap chỉ hiển thị thông báo đẹp hơn với lớp was-validated. Xem thêm loạt HTML - Form và PHP Bài 11 cho phần xử lý máy chủ.

Form đăng ký

<form class="row g-3 needs-validation" novalidate onsubmit="event.preventDefault(); this.classList.add('was-validated');">
  <div class="col-md-6"><label class="form-label" for="ho">Họ tên</label><input id="ho" class="form-control" required><div class="invalid-feedback">Vui lòng nhập họ tên.</div></div>
  <div class="col-md-6"><label class="form-label" for="em">Email</label>
    <div class="input-group has-validation"><span class="input-group-text">@</span><input id="em" type="email" class="form-control" required><div class="invalid-feedback">Email không hợp lệ.</div></div></div>
  <div class="col-md-6"><label class="form-label" for="ng">Ngành</label><select id="ng" class="form-select" required><option value="">-- Chọn --</option><option>CNTT</option><option>Sư phạm Tin</option></select><div class="invalid-feedback">Hãy chọn ngành.</div></div>
  <div class="col-md-6"><label class="form-label" for="mk">Mật khẩu</label><input id="mk" type="password" class="form-control" minlength="8" required><div class="form-text">Tối thiểu 8 ký tự.</div></div>
  <div class="col-12"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="tb" checked><label class="form-check-label" for="tb">Nhận thông báo bài mới</label></div>
    <div class="form-check"><input class="form-check-input" type="checkbox" id="qd" required><label class="form-check-label" for="qd">Đồng ý quy định</label><div class="invalid-feedback">Bạn cần đồng ý.</div></div></div>
  <div class="col-12"><button class="btn btn-success">Đăng ký</button></div>
</form>

Bấm Đăng ký khi để trống để thấy thông báo lỗi màu đỏ dưới từng ô.

Floating label, input group, range

<div class="form-floating mb-2"><input class="form-control" id="fl" placeholder="x"><label for="fl">Nhãn nổi: tên đăng nhập</label></div>
<div class="input-group mb-2"><input class="form-control" placeholder="Số tiền"><span class="input-group-text">VNĐ</span><button class="btn btn-outline-secondary">Áp dụng</button></div>
<label class="form-label">Mức độ hài lòng</label><input type="range" class="form-range" min="1" max="5">
<input class="form-control form-control-sm mt-2 is-valid" value="Hợp lệ (is-valid)"><input class="form-control form-control-sm mt-2 is-invalid" value="Lỗi (is-invalid)">