Bài 7: Form trong Bootstrap – Tạo biểu mẫu trong Bootstrap

0

Trong bài học này, mình sẽ hướng dẫn các bạn cách tạo form trong Bootstrap. Chúng ta sẽ lần lượt tìm hiểu từng loại input của một form.

Video – Form trong Bootstrap

Yêu cầu của một form

Chúng ta sẽ tạo một form như trang đăng ký tài khoản của Facebook.

Facebook sign up - demo cho Form trong Bootstrap
Trang đăng ký Facebook

Các input cần cho 1 form như hình trên là

+ input loại text

+ input loại email

+ input loại password

+ select và các option

+ radio button

+ thêm ô checkbox nếu cần

+ Và cuối cùng là 1 button loại submit để gửi form, load lại trang.

Hướng dẫn chi tiết

Đầu tiên, để dùng form, chúng ta cần dùng cặp thẻ <form></form> để bao bọc tất cả input. Bootstrap định nghĩa sẵn các class form-group, form-control để định dạng cho các input và các thẻ label đi cùng (giãn cách, margin, padding, …)

Các input thường dùng trong form:

Thuộc tính required cho input yêu cầu phải nội dung mới có thể gửi from đi.

Thuộc tính name giúp PHP nah65n diện các input này, còn class và id dùng cho CSS và JS

Để định dạng cho từng input, chúng ta thêm class form-control

+ Input type text: dùng để nhập những những văn bản ngắn. Để cho 2 input nằm ngang như trong ví dụ 2 input Họ và Tên. Chúng ta dùng thêm class form-row và chia cột bootstrap.

<div class="form-group">
   <div class="form-row">
      <div class="col">
         <label>Tên</label>
         <input type="text" class="form-control" placeholder="Tên của bạn" required name="">
      </div>
      <div class="col">
         <label>Họ</label>
         <input type="text" class="form-control" placeholder="Họ của bạn" required name="">
      </div>
   </div>
</div>

+ Input type email: dùng để nhập email, hỗ trợ việc nhắc thêm ký tự @ cho nội dung nhập vào.

<div class="form-group">
   <label>Email</label>
   <input type="email" class="form-control" placeholder="Email của bạn" required name="">
</div>

+ Input type password giúp ẩn nội dung nhập vào

<div class="form-group">
   <label>Mật khẩu</label>
   <input type="password" class="form-control" placeholder="Password của bạn" required name="">
</div>

+ Select và các option giúp định hướng người dùng chọn những câu trả lời theo ý mình, dạng một menu đổ xuống. Để mã nguồn server như PHP xử lý được, và nah65n giá trị của các option, chúng ta thêm name cho select và thuộc tính value cho option.

<div class="form-group">
   <label>Nơi sống</label>
   <select class="form-control">
      <option value="" selected>Nơi sống của bạn</option>
      <option value="">TPHCM</option>
      <option value="">Hà Nội</option>
      <option value="">Khác</option>
   </select>
</div>

+ Input type radio, thêm thuc tính name trong 1 nhóm radio phi ging nhau nếu chọn ô này thì những ô khác tự động bỏ chọn.

<input type="radio" name="gioi-tinh" value="Nam">
<input type="radio" name="gioi-tinh" value="Nữ">

+ Input type checkbox, có thể chọn vào nhiều ô.

<div class="form-group">
   <input type="checkbox" required name="">
   <label>Tôi đồng ý điều khoản sử dụng</label>
</div>

Button gửi nội dung có type=”submit”

<div class="form-group">
   <button class="btn btn-success" type="submit">Gửi</button>
</div>

Ngoài ra, form còn có  input type file gửi file.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên h

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.