Mục tiêu: Kết thúc bài thực này, người học có thể
ƒ Tạo và định dạng các thẻ HTML bằng CSS
ƒ Truy xuất các đối tượng trình duyệt và các phần tử HTML bằng JavaScript.
ƒ Tạo trang web đăng ký có xử lý tính hợp lệ của dữ liệu nhập vào.
Nội dung:
Định dạng các phầntử bằng CSS và sử dụng JavaScript để kiểm tra dữ liệu
Yêu cầu:
™ Tạo một trang web trong VS 2008 phục vụ việc nhập thông tin về cán bộ.
™ Trang web này được tạo trên IIS Cục bộ.
™ Sử dụng các style để địnhnghĩa cho các phần tử.
™ Sử dụng JavaScript để kiểm tra tính hợp lệ của dữ liệu.
Đặc tả giao diện, chức năng và các ràng buộc:
1. Giao diện (Trangbên)
2. Đặc tả xử lý
- Khi người dùng nhấn vào nút
thì
th
ực
h
iện
g
ửi
to
àn
bộ
nội
dung
đang
nhập của trang hiện hành sang trang CapNhatCanBo.aspx.
- Khi người dùng nhấn vào nút
thì
nội
dung
trong
các
ô
nh
ập
được reset
t
rở về
giá
trị
mặc định
(như
trong
hình).
3. Đặc tả ràng buộc
- Họ và tên không được rỗng và phải <= 40 ký tự.
- Ngày, tháng năm phải hợp lệ.
- Các trường đánh dấu * là bắtbuộc phải có.
- Các trường số (như ngày sinh, hệ số lương,…) phải là cácsố, không được là ký tự.
- Các hộp Textarea không được quá 1000 ký tự.
- Ở các hộp text, khi người dùng click chuột (focus) thì giá trị mặc định sẽ bị xóa để cho người dùng gõ giá trị mới. Nếu người dùng di chuyển sang phần tử khác mà không nhập giá trị nào thì đặt lạigiá trị mặc địnhnhư ban đầu.
- Khi trường nào nhập sai thì sẽ đặt focus vào đúng trường sai đó.
4. Một số kiến thức cần thiết và gợi ý:
- Định nghĩa style cho các mục giống nhau
- Đặt thuộc tính Action cho form để chuyển thông tin cho trang bất kỳ
- Dùng hàm isNaN (n) để kiểm tra xem n có phải là số hay không.
- Dùng phương thức focus của phần tử để đặt tiêu điểm.
- Tạo các phần tử kiểu submit và kiểu reset cho nút Cập nhập và nhập mới.
- Viết mộthàm kiểm tra cho sự kiện Onclick của nút Cập nhật.
- Nếu không muốn cho một sự kiện nào đó (ví dụ onclick) kích hoạt thì viết trong sự kiện
đó là “return false” hoặc return KQ; với KQ làmột biểu thức, hàm có giá trịfalse
Hướng dẫn:
1. Định nghĩa style:
Khi thiết kế giao diện cho trang web, trước hết cần xác định xem có những phần tử nào
cùng một định dạng (style). Khi đó ta nên định ra một class chứa các định dạng mong muốn để áp dụng cho các phần tử cùng loại này.
Lession02.css
.HeadTitle
{
font-size: xx-large;
font-weight: bold;
text-align: center;
color:Purple;
margin-bottom:30px;
}
.CellSpace
{
border-spacing:1px;
}
.Tiêu_Đề_Chính {
color:White;
background-color:Purple;
font-size:12pt;
font-weight:bold;
margin:5px 0px 5px 0px;
height:25px;
}
.Cột1
{
color:Gray;
font-style:italic;
text-align:right;
width:30%;
}
.Cột2
{
width:70%;
text-align:left;
}
.TextboxDài
{
width:99%;
text-align:left;
}
.TTBatBuoc
{
background-color:Yellow;
}
.Table
{
table-layout:auto;
border-style:solid;
border-color:Purple;
border-width:1px;
border-collapse:collapse;
background-color:White;
width:800px;
}
td
{
vertical-align:middle;
}
input
{
margin:2px 0px 2px 2px;
}
input.NgayThang
{
text-align:center;
width:80px;
}
select
{
text-align:center;
width:100px;
}
2. Code trang giao diện
NhapHSCB.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NhapHSCB.aspx.cs" Inherits="Lession_02 LAB_YahooRegister"%>
<head runat="server">
<title>Nhập hồ sơ cán bộ</title>
<link rel="Stylesheet" href="Lession02.css" type="text/css" />
</head>
<body >
<form id="form1" action="CapNhatCanBo.aspx" method="post">
<div style="text-align:center">
<p style="border-bottom:solid; border-width:thin; font-size:20pt;
margin:0; padding:0X; border-spacing:0px"> CHƯƠNG TRÌNH QUẢN LÝ CÁN BỘ VERSION1.0
</p><br /> <br />
<p class="HeadTitle">NHẬPHỒ SƠ CÁN BỘ</p>
<table class="Table">
<tr class="CellSpace">
<td colspan="2" class="Tiêu_Đề_Chính">THÔNG TIN CÁ NHÂN</td>
</tr>
<tr>
<td class="Cột1">*Họ và tên</td>
<td class="Cột2"><input type="text" id="HoVaTen" class="TextboxDài" />
</td>
</tr>
<tr>
<td class="Cột1">*Ngày sinh (ngày/tháng/năm)</td>
<td class="Cột2">
<select id="NgaySinh">
<option value="">1</option>
<option value="2">2</option>
</select> /
<select id="cboThangSinh" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> /
<select id="NamSinh">
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
</select>
Giới tính:
<input type="radio" id="optNam" checked="checked"/> Nam
<input type="radio"id="optNu"/>Nữ
</td>
</tr>
<tr>
<td class="Cột1">Chức vụ hiện tại (Đảng, chính quyền,...)</td>
<td><input type="text" class="TextboxDài" /></td>
</tr>
<tr>
<td class="Cột1">*Quê quán</td> <td class="Cột2">
<input type="text" class="TextboxDài"/></td>
</tr>
<tr>
<td class="Cột1">*Nơi ở hiện nay</td>
<td class="Cột2"> <input type="text" class="TextboxDài"/></td>
</tr>
<tr>
<td colspan="2" class="Tiêu_Đề_Chính">TRÌNH ĐỘ HỌC VẤN</td>
</tr>
<tr>
<td class="Cột1"> Dân tộc : </td>
<td class="Cột2"><input type="text" /> Tôn giáo: <input type="text"/>
</td>
</tr>
<tr>
<td class="Cột1">Thành phần gia đình:</td>
<td class="Cột2"> <input type="text" class="TextboxDài"/></td>
</tr>
<tr>
<td class="Cột1">Nghề trước khi tuyển dụng</td>
<td class="Cột2"><input type="text" class="TextboxDài" /></td>
</tr>
<tr>
<td class="Cột1">Tham gia cách mạng: </td>
<td class="Cột2">
Ngày <input value="..../...../......"style="width:15%; text-align:center"
onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);" />
Tổchức <input style="width:20%" /> Công tác <input style="width:20%" />
</td>
</tr>
<tr>
<td class="Cột1">Ngày vào Đảng:</td>
<td class="Cột2"><input type="text" value="...../...../....." id="NgayVaoDang"
class="NgayThang"
onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/>
ngày vào chính thức <input type="text"class="NgayThang"
value="...../...../....."
onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/>
</td>
</tr>
<tr>
<td class="Cột1">Ngày nhập ngũ:</td>
<td class="Cột2"><input type="text" value="..../...../...."class="NgayThang"
onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/>
ngày xuất ngũ <input type="text" class="NgayThang" value="..../...../....."
onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/>
</td>
</tr>
<tr>
<td class="Cột1">*Trình độ Văn hóa: </td>
<td class="Cột2"><input style="width:15%" /> Học hàm:
<select>
<option value="">-----</option>
<option value="Thạc Sĩ">Thạc sĩ </option>
<option value="Tiến Sĩ">Tiến sĩ</option>
</select> Học vị :
<select>
<option value="">-----</option>
<option value="Giáo sư">Giáo sư</option>
<option value="Phó giáo sư">Phó giáo sư</option>
</select>
</td>
</tr>
<tr>
<td class="Cột1">Lý luận chính trị </td>
<td class="Cột2">
<select> <option>-----</option>
<option value = "Sơ cấp">Sơ cấp</option>
<option value="Trung cấp">Trung cấp</option>
<option value="Cao cấp">Cao cấp</option>
<option value="Cử nhân">Cử nhân</option>
</select>
</td>
</tr>
<tr>
<td class="Cột1">Trình độ ngoại ngữ</td>
<td class="Cột2">
Anh <select><option>-----</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select> Nga <select>
<option>-----</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select> Pháp <select>
<option>-----</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
<tr>
<td class="Cột1">*Ngạch công chức, viên chức:</td>
<td class="Cột2">
<input style="width:20%" />
Mã số: <input style="width:15%" />
*Hệ số lương: <input style="width:15%" />
</td>
</tr>
<tr>
<td class="Cột1">Danh hiệu được phong (năm): </td>
<td class="Cột2"><input class="TextboxDài" /></td>
</tr>
<tr>
<td class="Cột1">Sở trường công tác:</td>
<td class="Cột2"><input class="TextboxDài" /></td>
</tr>
<tr>
<td class="Cột1">Khen thưởng (huân,huy chương cao nhất)</td>
<td class="Cột2"><input class="TextboxDài" /></td>
</tr>
<tr>
<td class="Cột1">Kỷ luật (đảng, chính quyền, năm, lý do, hình thức)</td>
<td class="Cột2">
<textarea class="TextboxDài" cols="50" rows="3"></textarea>
</td>
</tr>
<tr class="Tiêu_Đề_Chính">
<td colspan="2">
ĐÀO TẠO, BỒI DƯỠNG CHUYÊN MÔN, NGHIỆP VỤ, LÝ LUẬN, NGOẠI NGỮ
</td>
</tr>
<tr>
<td class="Cột1">Ghi rõ Tên trường, ngành học, thời gian, loại hình,văn bằng, chứng chỉ</td>
<td><textarea class="TextboxDài" cols="100" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="color:Blue">
** Loại hình: Chínhqui, tại chức, chuyên tu, bồi dưỡng;văn bằng: Tiến sĩ, thạc sĩ, cử nhân, kỹ sư.
</td>
</tr>
<tr class="Tiêu_Đề_Chính">
<td colspan="2">TÓM TẮT QUÁ TRÌNH CÔNG TÁC</td>
</tr>
<tr>
<td class="Cột1">Ghi rõ thời gian bắt đầu và kết thúc; chức danh, chức vụ,
đơn vị công tác tương ứng)</td>
<td><textarea class="TextboxDài" cols="100" rows="5"></textarea></td>
</tr>
<tr class="Tiêu_Đề_Chính">
<td colspan="2">Đặc điểm lịch sử bản thân</td>
</tr>
<tr>
<td class="Cột1">Đặc điểm lịch sử bản thân</td>
<td class="Cột2">
<textarea class="TextboxDài" cols="100"rows="5"></textarea>
</td>
</tr>
<tr>
<td class="Cột1">Quan hệ với người nước ngoài</td>
<td class="Cột2">
<textarea class="TextboxDài" cols="100"rows="5"></textarea>
</td>
</tr>
<tr>
<td class="Cột1">Quan hệ gia đình (Bố, mẹ, anh chị em ruột)</td>
<td class="Cột2">
<textarea class="TextboxDài" cols="100"rows="5"></textarea>
</td>
</tr>
<tr>
<td class="Cột1">Hoàn cảnh kinh tế gia đình</td>
<td class="Cột2">
<textarea class="TextboxDài" cols="100"rows="5"></textarea>
</tr>
</table>
<br />
</td>
<table class="Table"style="border:0">
<tr>
<td style="text-align:right"><input type="submit" value=" Cập nhật "
onclick="return KiemTra();" /></td>
<td style="text-align:left"><input type="reset" value=" Nhập mới " /></td>
</tr>
</table>
</div>
</form>
<script language="javascript"type="text/javascript">
var Giá_Trị_Cũ;
/// Hàm xử lý khi người dùng bấm vào nút Nhập
function KiemTra()
{
if (form1.HoVaTen.value.length==0)
{
alert("Họ tên phải khác rỗng !");
form1.HoVaTen.focus();
return false;
}
if(isNaN(form1.NgaySinh.value)==false)
{
alert("Ngày sinh phải là số"); form1.NgaySinh.focus(); return false;
}
return true;
}
/// Hàm xử lý khi phần tử nhận được focus
function XuLyFocus(txt)
{
txt.value="";
}
/// Hàm xử lý khi phần tử mất focus
function XuLyLostFocus(txt) {
if (txt.value=="") txt.value=Giá_Trị_Cũ;
}
</script>
</body>
</html>
