[LTW] : BT HTML_CSS

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ần tử 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 để định nghĩ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 (Trang bên)

2. Đặc tả xử lý

- Khi người dùng nhấn vào nút

thì thực hiệ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 trở 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ắt buộc phải có.

- Các trường số (như ngày sinh, hệ số lương,…) phải là các số, 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ại giá trị mặc định như 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ột hà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;

}

{

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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body >

<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Ộ VERSION 1.0

</p><br /> <br />

<td colspan="2" class="Tiêu_Đề_Chính">THÔNG TIN CÁ NHÂN</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td class="Cột1">*Ngày sinh (ngày/tháng/năm)</td>

</select> /

</select> /

</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>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="2" class="Tiêu_Đề_Chính">TRÌNH ĐỘ HỌC VẤN</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td class="Cột1">Thành phần gia đình:</td>

</tr>

<tr>

<td class="Cột1">Nghề trước khi tuyển dụng</td>

</tr>

<tr>

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ộ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ộ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> Học vị :

</select>

</td>

</tr>

<tr>

<td class="Cột1">Lý luận chính trị </td>

<option value="Trung cấp">Trung cấp</option>

</select>

</td>

</tr>

<tr>

<td class="Cột1">Trình độ ngoại ngữ</td>

Anh <select><option>-----</option>

</select> Nga <select>

</select> Pháp <select>

</select>

</td>

</tr>

<tr>

<td class="Cột1">*Ngạch công chức, viên chức:</td>

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>

</tr>

<tr>

<td class="Cột1">Sở trường công tác:</td>

</tr>

<tr>

<td class="Cột1">Khen thưởng (huân,huy chương cao nhất)</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>

</tr>

ĐÀ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>

</tr>

<tr>

** Loại hình: Chính qui, 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>

<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>

</tr>

</tr>

<tr>

</td>

</tr>

<tr>

<td class="Cột1">Quan hệ với người nước ngoài</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

</table>

<br />

</td>

<tr>

<td style="text-align:right"><input type="submit" value=" Cập nhật "

onclick="return KiemTra();" /></td>

</tr>

</table>

</div>

</form>

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)

{

Giá_Trị_Cũ=txt.value;

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>

Tải xuống

Link:

https://app.box.com/s/k5wclphtghdwlddlca4d

Thủ thuật lập trình, lập trình c, lâp trinh c#, lập trình java, lâp trình web, đồ họa, xử lý ảnh

Search This Blog

Inspiratif! 11 Ide Brilian Ini Manfaatkan Benda Biasa Jadi Sesuatu yang Tak Terbayangkan Sebelumnya

[LTW] : BT HTML_CSS_JavaScript