Tạo giao diện Form bằng Bootstrap
Step 1: Phân tách bố cục (layout) tổng thể của trang web
- Phân tách và thực hiện layout như hình sau:
Step 2: phân tách bố cục (layout) chi tiết hơn, và gắn các thành phần (components) vào các vị trí đã chừa sẵn trong layout đã thiết kế
- Phân tách và thực hiện layout như hình sau:
Ràng buộc dữ liệu bằng JQUERY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tạo Form Bootstrap Đặt vé máy bay</title>
<!-- Liên kết CSS Bootstrap -->
<link href="vendor/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="vendor/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<!-- Liên kết CSS do chúng ta tự viết (custom CSS) -->
<link href="assets/css/app.css" type="text/css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="container">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<div id="thongbaoloi"></div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row">
<div class="col-md-12">
<h1>Form đặt vé máy bay</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form name="frmDatVeMayBay" id="frmDatVeMayBay" method="post" action="#">
<div class="form-group">
<label for="txtHoTen">Họ tên</label>
<!-- <input type="text" class="form-control" name="txtHoTen" id="txtHoTen" aria-describedby="txtHoTenHelp"> -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fa fa-user-o" aria-hidden="true"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Họ tên" name="txtHoTen" id="txtHoTen"
aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-append">
<span class="input-group-text">vnđ</span>
</div>
</div>
<small id="txtHoTenHelp" class="form-text text-muted">Phải nhập 5 ký tự, in hoa....</small>
</div>
<div class="form-group">
<label for="txtDiaChi">Địa chỉ</label>
<input type="text" class="form-control" name="txtDiaChi" id="txtDiaChi" aria-describedby="txtDiaChiHelp">
<small id="txtDiaChiHelp" class="form-text text-muted">Phải nhập 5 ký tự, in hoa....</small>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label>Đi từ</label>
<select name="slNoiDi" id="slNoiDi" class="form-control">
<option value="hn">Hà nội</option>
<option value="ct">Cần Thơ</option>
<option value="hp">Hải Phòng</option>
<option value="dn">Đà nẵng</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Đến</label>
<select name="slNoiDen" id="slNoiDen" class="form-control">
<option value="hn">Hà nội</option>
<option value="ct">Cần Thơ</option>
<option value="hp">Hải Phòng</option>
<option value="dn">Đà nẵng</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label>Chọn chiều đi (Khứ hồi)</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="1" name="chkChieuDi" id="chkChieuDi">
<label class="form-check-label" for="chkChieuDi">
Đi
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="2" name="chkChieuVe" id="chkChieuVe">
<label class="form-check-label" for="chkChieuVe">
Về
</label>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary form-control" name="btnDatVe" id="btnDatVe">Đặt vé</button>
</div>
</form>
</div>
</div>
</div>
<!-- Liên kết Jquery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Liên kết Bootstrap -->
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<!-- Liên kết JS do chúng ta tự viết (custom JS) -->
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function () {
$('#btnDatVe').click(function () {
var hoten = $('#txtHoTen').val();
var diachi = $('#txtDiaChi').val();
var loi = '<ul>';
debugger;
// Validate Họ tên
if(hoten == '') {
loi += '<li>Vui lòng nhập họ tên</li>';
} else if (hoten.length < 5) {
loi += '<li>Vui lòng nhập họ tên >= 5 ký tự</li>';
}
// Validate Địa chỉ
if(diachi == '') {
loi += '<li>Vui lòng nhập địa chỉ</li>';
} else if (diachi.length < 5) {
loi += '<li>Vui lòng nhập địa chỉ >= 5 ký tự</li>';
}
loi += '</ul>';
// Hiển thị thông báo lỗi
if(loi != '') {
$('#thongbaoloi').html(loi);
return;
}
});
});
</script>
</body>
</html>
Chương trình học
Các bài học
Bài học trước Bài học tiếp theo
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
Bài học trước Bài học tiếp theo