Việc tạo ra một trang web cho phép người dùng điền thông tin vào phiếu Đăng ký Du lịch có thể thực hiện dễ dàng bằng cách sử dụng ngôn ngữ HTML. Trong bài viết này, chúng ta sẽ tìm hiểu về yêu cầu thiết kế và cách xử lý phiếu đăng ký du lịch thông qua việc sử dụng mã nguồn JavaScript và HTML.
Yêu cầu thiết kế
Để thiết kế phiếu Đăng ký du lịch, chúng ta cần tạo ra một trang web với các trường thông tin cần điền, như Họ và tên, Địa chỉ, Số điện thoại và nhiều trường thông tin khác. Ngoài ra, chúng ta cũng cần có các tùy chọn để người dùng chọn phương tiện và chọn tour du lịch mong muốn.
Yêu cầu xử lý
Để xác thực thông tin đăng ký du lịch, chúng ta sẽ sử dụng mã nguồn JavaScript. Mã nguồn này sẽ kiểm tra xem người dùng đã điền đầy đủ thông tin hay chưa. Nếu có bất kỳ trường thông tin nào bị bỏ trống, một cửa sổ thông báo sẽ hiển thị, yêu cầu người dùng điền đầy đủ thông tin trước khi đăng ký. Nếu người dùng đã điền đầy đủ thông tin, một thông báo sẽ được hiển thị cho người dùng xác nhận rằng họ đã đăng ký thành công.
Mã nguồn JavaScript:
function checkRegister(){
var txtFullName = document.getElementById('txtFullName');
var txtAddress = document.getElementById('txtAddress');
var txtPhone = document.getElementById('txtPhone');
var rdiPlane = document.getElementById('rdiPlane');
var rdiCar = document.getElementById('rdiCar');
var txtPeople = document.getElementById('txttxtPeople');
var txtChildren = document.getElementById('txttxtChildren');
var tb = document.getElementById('tb');
if (txtFullName.value.trim() == '') {
alert('Họ và tên không được để trống!');
txtFullName.focus();
} else {
if (txtAddress.value.trim() == '') {
alert('Địa chỉ không được để trống!');
txtAddress.focus();
} else {
if (txtPhone.value.trim() == '') {
alert('Số điện thoại không được để trống!');
txtPhone.focus();
} else{
if (rdiPlane.checked == false && rdiCar.checked == false)
alert('Vui lòng chọn phương tiện');
else
tb.innerHTML="Bạn đã đăng ký thành công!!!";
}
}
}
}Mã nguồn HTML:
<!DOCTYPE html>
<html>
<head>
<title>Đăng ký du lịch</title>
<script>
function checkRegister(){
var txtFullName = document.getElementById('txtFullName');
var txtAddress = document.getElementById('txtAddress');
var txtPhone = document.getElementById('txtPhone');
var rdiPlane = document.getElementById('rdiPlane');
var rdiCar = document.getElementById('rdiCar');
var txtPeople = document.getElementById('txttxtPeople');
var txtChildren = document.getElementById('txttxtChildren');
var tb = document.getElementById('tb');
if (txtFullName.value.trim() == '') {
alert('Họ và tên không được để trống!');
txtFullName.focus();
} else {
if (txtAddress.value.trim() == '') {
alert('Địa chỉ không được để trống!');
txtAddress.focus();
} else {
if (txtPhone.value.trim() == '') {
alert('Số điện thoại không được để trống!');
txtPhone.focus();
} else{
if (rdiPlane.checked == false && rdiCar.checked == false)
alert('Vui lòng chọn phương tiện');
else
tb.innerHTML="Bạn đã đăng ký thành công!!!";
}
}
}
}
</script>
</head>
<body>
<table border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="font-size: 20px;color:orange;font-weight: bold">Đăng ký du lịch</td>
</tr>
<tr>
<td>
<table border="1" style="background-color:antiquewhite;width: 450px;border-color:royalblue" cellpadding="0" cellspacing="0">
<tr>
<td>Họ và tên</td>
<td><input type="text" id="txtFullName"></td>
</tr>
<tr>
<td>Địa chỉ</td>
<td><input type="text" id="txtAddress"></td>
</tr>
<tr>
<td>Điện thoại</td>
<td><input type="text" id="txtPhone"></td>
</tr>
<tr>
<td>Khách Việt Nam</td>
<td><input type="checkbox" id="chkCustomer"></td>
</tr>
<tr>
<td>Chọn tour</td>
<td>
<select name="tour" id="cboTour">
<optgroup label="Miền bắc">
<option value="1">Hà Nội - Vĩnh Long - Sapa</option>
<option value="2">Hà Nội - Chùa Hương - Ninh Bình</option>
<option value="3">Hà Nội - Cát Bà - Tuấn Châu</option>
</optgroup>
<optgroup label="Miền trung">
<option value="1">Huế - Bach Mã - Đà Nẵng</option>
<option value="2">Nha Trang - Đà Lạt</option>
<option value="3">Buôn Mê Thuộc - Gia Lai - Kontum</option>
</optgroup>
<optgroup label="Miền Nam">
<option value="1">TP.HCM - Cần Thơ - Cà Mau</option>
<option value="2">TP.HCM - Mỹ Tho</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>Phương tiện</td>
<td>
<span style="margin-left: 35px;">Máy bay</span><input type="radio" name="phuongtien" id="rdiPlane" value="maybay">
<span>Ô tô</span><input type="radio" name="phuongtien" id="rdiCar" value="O to">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<fieldset style="width:300px;border-color: red;margin-bottom:10px ">
<legend>Số lượng đoàn khách</legend>
<label for="people">Người lớn</label>
<input name="people" id="txtPeople" size="5"/>
<label for="Children">Trẻ em</label>
<input name="Children" id="txtChildren" size="5"/>
</fieldset>
</td>
</tr>
<tr>
<td>Ghi chú thêm</td>
<td><textarea name="txtComment" cols="30"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<button onclick="checkRegister()">Đồng ý</button>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<span id="tb"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Xem ví dụ
Để tìm hiểu thêm về *[Campingviet.vn](https://campingviet.vn)*, hãy truy cập [trang chủ](https://campingviet.vn) của chúng tôi.