tạo các scrip làm việc trong môi trường trình duyệt

168
Chương 7: Tạo các script làm việc trong mọi trình duyệt
Tọo cóc script làm việc
trong mọi trình duụệt
Trong chương n ày bạn sẽ học nhữ ng điểm ch ính sau đây:
B Tìm hiển các điểm khác biệt của trình dĩiyệt
K Phát hiện loại trình dĩiyệt nào mà người dừng đanq chạy
B Tnty 1’ấn mồ hình Ỳài liêi/
B Tuân theo các chuẩn web
M Viết mã nhiều trình duyệt
T
rong những ngày đầu phát triển JavaScript, việc xử lý những
sự bất thường giữa những nhà sản xuất trình duyệt và các
phiên bản khác nhau đã là một công việc khó khăn. Sau cùng,
một số trìn h duyệt đã không hỗ trợ JavaScript gì cả (như Netscape 1.0).
Thậm chí nếu bạn có một trình duyệt hỗ trợ JavaScript, mô hình tài liệu
(DOM) nền tảng là khác nhau giữa các trình duyệt khác nhau, nghĩa là
các lỗi JavaScript rấ t phổ biến.
Sự khó khăn này của việc phát triến mã JavaScript vôn đã làm việc
chính xác trong mọi trình duyệt đã xảy ra chủ yếu do một sô" yếu tố:
K Các phiên bản trình duỵệt mới cách vài tháng
* Một cuộc cạnh tranh đang diễn ra giữa các công ty trình duyệt để
thêm các tính năng mới
M Thiếu một cktiẩn HTML h(,át JavaScript
M ất một số thời gian, nhưng cuối cùng các vân đề bắt đầu biến mất
khi JavaScript ổn định. Và khi người dùng bắt đầu dần dần nâng cấp
lên các trìn h duyệt phiên bản 4.0 trở lên, các nhà phát triển JavaScript
có thời gian dễ dàng để phát triển mã tương thích nhiều trìn h duyệt.
Thật không may, một số thay đối sắp tới đối với JavaScript sẽ buộc
các iilià phát triều v/eb phả’ tắ t đầu vLế'., 1-iã lại cho các điểm khác biệt
của trình duyệt. Các lý do cho thời điểm không ổn định mới này có thể

bao gồm:
M Sự hỗ trợ không nhất quán cho JavaScript 2.0
R Các phiên bản trình duyệt mới cácr? ìibau J’ải tháng (cụ thể từ Mozilla)
m Sự hỗ trợ trôn JavaScript không nhất qỉián cho nhũng công nghệ
mới, chẳng ban nhítXML và css
Chỉ có thời gian mới cho biết những yếu tố này sẽ khiến cho các nhà
phát triển web phâi đau đầu như thế nào.
Tìm hiểu các điểm khác biệt cua trình duyệt
Theo một C U Ộ I, khảo sát gầii (iây, Microsoft In ternet Sxploie) (IE)
được sử dụng bởi khoảng 94% những người lướt web. Netscape và Mozilla
có một mức sử dụng khoáng 2%. 4% còn lại được phân chia giữa những
công ty khác chẳng hạn như Opera hoặc bị mất do làm tròn.
Nl-ững cor số nAy có vhổ vh;iy đổi trong cấc tháag- và n:\rn ¡’ắp tớK
Nhà cuug cấp dịch vn internet (ISF) lớn nhất r Mỹ gần đây đã thông
báo nó sẽ bắt đầu sử dung Netscape làm trình duyêt mặc định cùa nó
và có thể có tác động lơn đối với nhừng con số này.
ĩ*Th'in kỹ h tr n ệ t chút £ố liôu thoof kê V‘1 tính thcng dụnf trìnb
duyệt gần đây như trong bang 7.1, chung ta có thể thầv răng một nửa
những người lướt \veđ đã chưa nâng cấp lên các phiên bản gần đây của
các trinh đuyội- web .jfu tiên họ
54% những người lướt web sử đụnEí các trình duyệt không phải là
phiên bản mới nhất "';ừ Microsoft hoặc Netscape. Do đó hãy cẩn thận
khi tạo các chương trình JavaScript phụ thuộc quá nhiều vào các tính
năng độc quyền hoặc các tính năng mới được bổ sung. Sử dụng các tính
năng mà không áp dụng những biện pháp phòng ngừa toàn bộ có thể
gây ra các lỗi cho một phần khán giả đáng kể thậm chí nếu ứng dụng
hoạt động tốt trong trình duyệt được cài đặt trên PC.
Các loại lỗi có thể xảy ra?
Khi thiết kế bất kỳ chương trình máy tính, điều quan trọng là phải
ghi nhớ rằng các lỗi có thể xảy ra bất kể nhà lập trình cô" gắng hết mình

để tránh chúng. Điều này đặc biệt đúng đối với các chương trình JavaScript
Chương 7: Tạo các script làm việc trong mọi trình duyệt
__________________
169
170
Chương 7: Tạo các script làm việc trong mọi trình duyệt
được sử dụng qua nhiều trình duyệt và hệ điều hàn h khác nhau. Khi
phát triển mã JavaScript, bạn có thể tìm thấy các nguồn lỗi sau đây:
B Nhĩing điểm khác biệt trong Document Object Model của mỗi phiên
bản trình duyệt
R Các máy tính client chạy các trình duyệt cũ (chẳng hạn như Netscape
3.0) không hỗ trợ chức năng JavaScript nhất địnk
B Các máy tính client có những công nghệ nhất địnb được tắt, chẳng
hạn như cookie hoặc Java
B Các công nghệ được bật web mới, chẳng hạn như các thiết bị xách
tay, thiết bị di động, hoặc thậm chí các thiết bị gia dụng, chẳng hạn
rưrntủ lạnh
Chương này sẽ xem xét một sô" kỹ thu ật chung để trán h những loại
lỗi này.
Bảng 7.1 Thông sỗ' kỹ thuật sử dụng trình duyệt web gần đây
Trình duyệt Mức sử dụng
IE 6 46%
IE 5 44%
IE 4 2%
Netscape 4 2%
Netscape 6, Netscape 7, Mozilla (gộp chung) 1%
IE cũ nhỏ hơn 1 %
Netscape cũ hơn nhỏ hơn 1%
Phái hiện ỉoại trinh duyệt nào mà ngưừi dũng đang chạy
Chạy một chương trìn h JavaScript hiện đại hoặc phức tạp trong

một trình duyệt cũ hơn có th ể gây ra vô số sự số. Có lẽ cách dễ nhất để
trán h những loại lỗi này là phát hiện loại trìn h duyệt nào mà người
dùng đang chạy và sau đó tắt (disable) một số tín h năng chương trình
hoặc cung cấp m ã thay th ế vốn thực hiện cùng một tác vụ bằng một
cách hơi khác.
C ¡ & c Ệ a »
Phát kiện tliông tin tên và phiên bđn trình duLjệi tliưồnq được q ọ i là
ẩánli hơi ỈPÌnh duqệt (Lpowsep sniffinq). Giốnq nkỉểu như mội con chó
có tíiế phát hiện mủi dutj nliốỉ của m ột cá nkân, một bpowsep sniffep cố
ptiát liiện và tp<3 về nliữnq chi tiết dui) nliđt của phđn mềm trìnk dui^ệt.
Để phát hiện nhà sản xuất trìn h duyệt và một sô" phiên bản, chúng
ta sẽ phụ thuộc vào đối tượng navigator DOM. Đối tượng navigator có
một số phương thức và thuộc tính, nhưng ba phương thức và thuộc tính
Chương 7: Tạo các script làm việc trong mọi trình duyệt 171
mả chúng ta quan tầm vào lúc riàv là appNam e, appV ersion, và
userAgent.
var browserString = navigator.appName;
var browserVersion = navigator.appVersion;
var browserAgent = navigator.userAgent;
a.ert (orowserString);
alert (browserVersion';
________
alert (browserAgent);
_____________________________________________________________
Điều bạn cẩn biết?
Xác đ ịnh các số phiên bản JavaScript
Các nhà sản xuất trình duyệt bắt đầu với những mục đích tốt nhất. Cả
Netscape và IE cho phép các nhà phát triển xác định một số phiên bản
JavaScript bên trong thuộc tinh ngôn ngữ của thẻ <script>. Điểu này ngăn
các script chạy trong các trình duyệt vốn không hỗ trợ số phiên bản

JavaScript được xác định. Để tạo một script mà sẽ chỉ chạy trong các trình
duyệt h5 trợ Jav iScr pl 1 2, bạn sẽ sử dụng mã sau đây:
<f cripí lanc-uíige =".¡avarcr;p11
Điều tương tự có thể được thực hiện trong tất cả phiên bản của JavaScript
lên phiên bản 1.5. (Một danh sách các số phiên bản JavaScript và chúng
liên quan với trình duyệt như thế nào sẽ được tìm thấy trong chương 1).
Thật khcny nay, rết r. nhè. phỉit triển wob biết rằng d!ều rày có thổ được
thực hiện và ít nhà phat triển hon (/ẫn thực su sử dụng kỹ thuật này khi tạo
các script nhiểu trình duyệt. Ngoài ra phương pháp này không giúp các
I nnà phát triển giai quyêt nhưng đièm knác Diệt liên quan đến DOlvl giừa
các trinh duyệt khác nhau.
Do đó mác du kỹ thuật này vẫn có sẵn, nhưng nó knông thể dươc Un cậy
để giải quyết các vấn đề viết script nhiểu trinh duyệt.
Đối với các trình duyệt web Netscape (bao gồm trình duyệt web Mozilla
nguồn mở), thuộc tính navigator.appName luôn trả về cùng một giá trị
bất kể phiên bản hoặc hệ điều hành.
Netscape
Đối với Microsoft Internet Explorer, thuộc tính navigator.appName
cũng trả về một giá trị có thể dự đoán trước bất kể phiên bản.
172 Chương 7: Tạo các script làm việc trong mọi trình duyệt
Do đó nếu trang web cần hiển thị text khác nhau phụ thuộc vào
trình duyệt mà một khách tham quan đang chạy, bạn chỉ việc truy vấn
thuộc tính navigator.appName như sau:
var browserString = navigator.appName;
if (browserString == ' Netscape’ ) t
// Do something for Netscape/Mozilla here
document.write (“Long live the lizard.");
} else if (browserString == “Microsoft Internet Explorer") I
// Do something for Microsoft here
document.write (“You will be assimilated.’’);

Tuy nhiên, navigator.appName cực kỳ giới hạn trong lượng thông
tin mà nó cung cấp. Những thuộc tính navigator khác cung cấp thông
tin hữu dụng hơn. v í dụ, thuộc tính navigator.appVersicn cjn g cấp
thòng tin phiên bản cụ thể hơn. Dôi với các ti'ình duyệt Neiseap, chuoi
được trả về từ thuộc tính đó hoàn toàn đơn giản.
} else {
// The browser is not one of the major two
document.write (“Why must you always be so different?”);
CUED
Chương 7: Tạo các script làm việc trong moi trinh duyệt
173
Tương tự, Microsoft In tern et Explorer tra về thông tin phiên
bản của nó trong chuỗi navigator.appVersiơn, như chúng ta có thể
thấv từ ảnh chụp màn hình sau đáv được lấy từ Microsoft Intern et
Explorer 6.0.
Các phiên bản gần đây của trình duyệt web Microsoft luôn báo cáo
số phiên ban là tương thích 4.0. Tuy nhien, số phiên bán thực sự được
nhúng sau đó trong cùng một chuỗi (trong trường hợp này là MSIE 6.0).
Các trình duyệt Mozilla l.x, Netscape 6.Ü và Netscape 7.0 đểu dựa
vào cùng một mă nguồn, do đổ cách hoạt động của chúng rấ t tương tự.
Nếu bạn đã từng nhận đươc chính xác tén trình đuyột và một sô phiên
bán tì; r hứng cr\nn 'luyệt này, bạn co thí t:u / vấn ohdệc ánh userAgí n*
của đòi tượpg navigator Như ban có f.h4’ thấy từ hình minh họa dưới
đây, nó chứa một số thông tin phiên bản rất cụ thể ngay đến ngày tháng
chír.h xác mà trinh duyệt đã được biên dịch.
Sử dụng' ba thuộc tính nàv, chúng ta có thể tạo một hàm JavaScript
rn à Sií p h á t h i ệ n loại t.Tình đ uyẹt. e h ú ih Xiíc m à n g ư ơ i d u n g l a n g c h ạ v .
function getBrowserlntoO (
// Define variables »C contain the results
var browserName - navigator.appName;

vai browserVersionNum = parseFloatinavigator.appVersion).
var browserAgent = navigator.userAgent;
// Boolean (true or false) variables to detect browser type
var is J E = (browserAgent.indexOffMSIE") != -1);
var is_NN = (browserName.indexOffNetscape”) != -1):
// Based on browser type, retrieve version number
if (is_NN) {
if (browserVersionNum >= 5.0) {
var tempStart = browserAgent.indexOf(“Metscape/”);
174 Chướng 7: Tạo các script làm việc trong mọi trình duyệt
if (tempStart == *1) {
// “Netscape/” not found; must be Mozilla
tempStart = browserAgent.indexOffrv:”);
tempStart += 3;
browserName = “Mozilla"
var tempEnd = browserAgent.indexOfO”, tempStart);
} else {
// “Netscape/” found; must be Netscape Gecko
tempStart += 9;
var tempEnd - browserAgent.length;
}
var browserVersion =
browserAgent.substring(tempStart, tempEnd);
} else {
// version < 5.0; must be old Netscape
var browserVersion = browserVersionNum;
}
} else if (isJE ) {
var lempStart = 0rowserAgent.indexOf(“MSIE’ );
tempStart += 5;

var tempEnd = browserApent.indexOff“;”, tempStart^;
Vqr jruwjeiVfcrsior. =
browserAgent.substring(tempStart, tempEnd);
}
// Create new property of navigator object based on real
// version number
navigator.appRealVersion = browserVersion;
return;
}
getBrowserlnfo();
document.write (“<h1>You appear to be running:<brxbr>”);
document.write (“<b>” + navigator.appName + “</b> <i>version</i> “);
document.write (“<b>” + navigator.appRealVersion + “</bx/h1>”);
Như bạn có thể thấy chúng ta phải viết m ã nhiều để biết sô' phiên
bản thực sự của các loại khác nhau của trìn h duyệt Netscape. Đối với
Chng 7. To cỏc script lm vic trong mi trỡnh duyt
175
Netscape 4 tr v trc, thuc tớnh navigator.appVersion tr v ỳng
g iỏ tr . Vỡ N e tsca pe 6 vỏ 7 v M oidlla u tr vờ 5.0 lỏ
navigator.appVersioR. chỳng ta phi bt u tỡm kim thuc tớnh
navigator.userAgent tỡm giỏ tr thớch hp.
Q ờ x c U

M ó lr*ớ( <lj ctcc (lr q(jn lỳ a rỡ .úc inc ớck CIJ \ớ cJ^ i^ V J Jo 3ú
khụnq bao hõm ti c cỏc loqi hoc pkiờn bdn trỡn ii duL)t. xem
mt vớ d hon hớo v mf scpipt phỏt hin tpỡnli duyt, bn nờn fkam
Itko p p a c ical Bpovvsep S n iớớin q S cp ip cd a Bo b C la p ij tqi http ://
bclapij.com/xbppojects-<jccs/ua, st dnq nhng tliuc tớnới ciia i tnq
naviqatop quyt nh loqi v p kộn Ln rỡn ti d uqt. W et) site ú
cng cha mt SCPè pt ( J q ỡ htlp://t>cl apq.com /xbppoects-cioc s M D O M )

cko pkộp byn sự d^nqi mt ttfp lằp i r;nq D O M ckuớớn cho tl c
fpỡnli duL|t.
Hỡnh m inh ha sau õy cho thy hm nh chy trong Netscape 2.0
v Netscape 7.0 nh ch no.
[y?i Netscape - (JvdScnpt sample code]
ệ 0 E 3
m m
ùỷik* ỷpfo
rằ òiwci
low;-!#
Fe***rfợH hoô*.;'-
0 đ
'sVMtoM
m
X'bầtf.
Q è
V' rằ*w i
/Vi*vf
mi
W M *.
ẫ S f g
ẫv^::
1 -
'
s - -
You appear to be running:
Netscape version 2
v 3?iÊi ' (PuựjmajL'Pw. 'Vù/y ! T.; yaffil ;Ql
176 Chương 7: Tạo các script làm việc trong mọi trình duyệt
1$$ JavaSciipt «ample code - Neticdpe

■ H H T T n T T I
- ỵier» £o Ễodanỏíkí look Window yete
¿ i JaviStiipt compiocoòe 1
□
You appear to be running:
Netscape version 7.0
© Í ! OoturwV: Don« Í0.39 »csl
Microsoft Internet Explorer đã luôn cung cấp số phiên bản của nó
bằng chính xác cùng một cách. Nó tự báo cáo là tương thích Netscape 4.0
trong thuộc tính navigator.appVersion và để số phiên bản phần mềm
thực sự được nhúng ở nơi khác trong cùng một chuỗi. Tìm nó tương đối
đơn giản bằng cách sử dụng phương thức indexOfO của đôi tượng
JavaScript String.
Truy vấn mô hình đôì tượng (document mode!)
Vấn đề với việc phụ thuôc vào mã kiểm tra tìm các trình duyệt theo
tôn \ à phiôn bản 'à nó không rõ ’’ànk. H ên L/ậ: 'dioảng 9C9? l h jfr.g
người lướt web sử dụng một trong hai trình duyệt chính - Netscape hoặc
IE. Nhưng còn về 4% kia - những người lướt web chọn những nhãn hiệu
khác chẳng hạn như Opera hoặc Konqueror thì sao? Các trình duyệt mới
đang được phát triển và các web site sẽ không làm việc đáng tin cậy nếu
chúng chỉ được viết mã để hoạt động với hai nhãn hiệu hàng đầu.
Vấn đề khác là khi các phiên bản mới của IE và N etscape được tung
ra, sự hỗ trợ cho các tính năng khác nhau thay đổi. Ví dụ, Netscape 4 hỗ
trợ một phương pháp layout được gọi là các layer, nhưng sau đó sự hỗ trợ
đã bị loại bỏ khi Netscape 6 xuất hiện. (Các layer sẽ được thảo luận
thêm trong phần "Viết mã nhiều trình duyệt").
Cách dễ dàng nhất để khắc phục vấn đề của các trìn h duyệt khác
nhau có sẵn (cả trong hiện tại và tương lai) là viết mã và kiểm tra xem
có một phương thức đơn trước khi cố sử dụng nó hay không.
Phiên bản chính thức đầu tiên của Document Object Model (được

gọi là DOM 1) định nghĩa một phương thức của đối tượng tài liệu được
gọi ià getElementB^IđG. Các trình duyệt gần đây (chẳng hạn như IE 5
và Netscape 6) hỗ trợ nó, nhưng các trình duyệt cũ hơn thì không.
Việc đơn giản gọi phương thức getElement.ByldO trong một trình
duyệt không hỗ trợ nó sẽ gây ra một lỗi:
var obịptr = docurrent.getElPmentByld(”carname') •
Do đó nếu bạn rr.uốn kiểm tra xom 4rình duyệt hiệr tại cổ bỗ trợ
phương thức getElementByldO trước khi sứ dụng nó hay không, bạn chỉ
việc truy vấn đối tượng tài liệu để xem nó có một thành viên có tên đó
trước khi gọi nó hay không:
if (document.getElementByld) {
var objptr = document.getEiementByldC carname’’);
Ị
Mã trên sẽ làm việc trong bất kỳ trình duyệt vì các trình duyệt mà
không hỗ trợ phương thức đó sẽ không thực thi mã bên trong câu lệnh if.
Dí nhiên, trong các trình duyệt đó. biến obịptr sẽ không được xác lập, do
đó tốt rh .it háy để mả chay thê xử lý những’ tình huống đó:
if (C0Cjn.er.t.ije1EI';nrertBylõ) ;
var objptr = document.getElementByldfcarname");
} else {
alert (“Sorry, this web page will not work in your browser ”):
}
Dĩ nhiên, nếu bạn phải bao boc mỗi và mọi lệnh goi đến một phương
thức DOM bằng câu iệnh if riêng cua nó, chương trình sẽ dài và kém
hiôu quá. Do đó phương pháp tốt nhâr có thể là kết hợp phương pháp
browser sniñing (đánh ho'' Lvinh duyệt) vơi phương thức pnát niện DOM
đế đạt được vẹn ca đôi đường.
Trung thành vói những chuẩn Web
Trong những ngày đầu phát triển web, hai nhà sản xuất trìn h duyệt
lớn nhất cạnh tran h dữ dội để đạt được thị phần. Một trong những chiến

lược mà họ ưa thích nhất là cố vượt trội nhau về các tính năng. Những
người tiêu dùng download và cài đặt phiên bản mới nhất của trình
duyệt ưa thích của họ và trong vòng vài ngày phiên bản kế tiếp sẽ có
sẵn để download. Các công ty lớn đôi khi đòi hỏi nhiều tháng để test
và phê chuẩn phần mềm mới để sử dụng tự nhận thấy mình có lên đến
hai phiên bản full đằng sau phiên bản hiện hành.
Dĩ nhiên, điều này đã dẫn đến hai chuẩn HTML thay vì một chuẩn
đã làm cho công việc của nhà phát triển web phức tạp hơn mức cần
thiết. Thật may thay, cuối cùng cả Microsoft và Netscape quyết định
Chương 7: Tạo các script làm việc trong mọi trình duyệt_____________________177
178
Chường 7: Tạo các script làm việc trong mọi trình duyệt
rằng họ nên tri hoãn thực thi các tính năng HTML và JavaScript mới
cho đến khi chúng được chấp thuận bởi một cộng đồng tiêu chuẩn.
Tuy nhiên, có một số thói quen viết mã không chuẩn nên được tránh
để đạt được khả năng tương thích nhiều nền. Bảng 7.2 trình bày một
danh sách các phần tử không phải là một phần của chuẩn HTML 4.
Những thẻ markup độc quyền này nên
được
trán h nếu bạn muôn tạo
các trang web hoạt động một cách n hất quán trong b ất kỳ trình duyệt.
• ••••••
Thủ thuật
•
Nếu bạn muôYi kiểm tra trang web để xem nó có tuân theo các chuẩn chính
thức hay không, web site VV3C cung cấp một dịch vụ hiệu lực hóa HTML tại
. Công cụ Iiày là cách d l nhất để xem trang web của
bạn đi lệch ra khỏi các chuẩn chính thức bao xa. Thậm chí nó nhận dạng bâ't kỳ
mã HTML chứa các lỗi.
Bảng 7.2 Các thẻ markup độc quyền, khống phải là một phẩn của chuẩn HTML chính

thức.
M arkup độc quyền
<layer>
<marquee>
<bgsound>
<embed>
<noembed>
<multicol>
<spa^er>
<nobr>
<wbr>
<blink>
<xmp>
<listing>
<plaintext>
<keygen>
<layer>, <ilayer>
<nolayer>
<server>
1 /ệ
Hỗ trỢ trình duyệt
Netscape 4 (only)
IE
IE
IE, Netscape
iE, Netscape
Netscape
Netscape
IE, Netscape
IE, Netscape

Netscape
IE, Netscape
IE, Netscape
IE, Netscape
Netscape
Netscape
Netscape
Netscape
Vièt mã nhiẽu trình duyệt
Ở phần trước trong chương
JavaScript có th ể được sử dụng
chúng ta đã làm việc với một số mã
để phát hiện tên và số phiên bản chính
Chương 7: Tạo các script làm việc trong moi trình duyêt
179
xác cúa trình duyệt Client Trong phần này, chúng ta sẽ dặt mã tương
tự để sử dụng với dynamic HTML.
Dynamic HTML (hoặc viết tắt là DHTML) là một phần mở rộng của
chuẩn HTML cho phép các chương trình JavaScript thay đổi và chỉnh
sửa một tran g web sau khi nó được tải trong trình duyệt mà không cần
phải quay trở về web server cho một trang mới. Phần lớn JavaScript
hoàr. t’.ián’i đitt-u nầy thônị, CUÍ. \Iệj xử 1} các phuơiig thức \ à thuôc tính
trong DOM của trình duyệt.
Dynamic HTML được sử dụng đều đặn bởi các site Internet để cung
cấp các menu xổ xuống, hình ảnh và text vốn thay đổi khi bạn di chuyển
cursor chuột lên trên chúng và các shopping car (giỏ mua sắm) e-
commerce tính toán iại tỏng chi phi của một đơn đặt hàng mỗi lần một
hộp kiểm được chọn (được chọn hoặc được húy chọn). Trong những
tháng gần đày, các nhà quảng cáo đã bắt được lỗi DHTML và tạo ra
quảng cáo động đi qua trang web (và không thể được tắt hoặc được

trán h'.
Tuy nhiên, DHTML nhiều ';rình duyệt khó viết mã vì mã JavaScript
được yêu cầu cho các trình duyệt Netscape và Microsoft hoàn toàn khác
nhau. Trong Khi Việc chuẩn hóa làrn cho việc ỉập trinh HTML và
JavaScript cơ bản trở nên dễ dàng hơn nhiều, so với chỉ cách đây một
vài nàm việc thực thi các DOM khác nhau giữa các trình duyệt là một
trong những lĩnh vực rắc rối còn lại sau cùng.
Hinn 7.1 m inh họa mụt ví dụ về mòt trang web sử dụng DHTML. Càv
phân cấp ở phía bên trái màn hình co thế được mở rộng và được thu gọn
hằng' một rú nhắp chuôt đ('n grản. Các mục m e n ổưc/c hiểi. thị v ì 1u'Jc
ẩn một cách động mà khòng cần phải yêu cầu HTML mới từ web server.
I.o.ii m ỉru DHTML này '-ạ) ra rr.ột hiệ 1 .fng ĨỊp mắt cho nhữnặ khách
tham quan đến trang web cùa bạn
Một trong những tính nâng đầu tiên mà bạn có thể gặp phải là Netscape
4 sứ dụng một phương thức được gọi là layer dể định nghĩa các vùng của
một tài liệu web vori có thể được áp dụng một style.
<htmi>
<headxtitle>Layers sample</titlex/head>
<body>
<h1>Netscape Layers Example</h1>
clayer id=”mylayer”>
<font color="white”xb>A black square</bx/font>
</layer>
<layer id=”mylayer2">
<b>A gray square</b>
180
Chương 7: Tạo các script làm việc trong mọi trinh duyệt
<J layer>
<script language=”JavaScript" type="text/javascript’’>
document.layersCmylayer^.bgColor = “black";

document.layers[“mylayer2"].bgColor = ‘'#CCCCCC";
document.layersỊ“mylaỵer2"Ị.moveBy (60, 10);
</script>
</body>
</html>
Mã HTML này được thiết kế để hoạt động trong chỉ các trình duyệt
web Netscape 4.X. Mã của chúng ta đinh nghĩa một layer Netscape có
tên là mylayer sử dụng thẻ HTML<layer>. Chúng ta định nghĩa một
layer thứ hai có tên là mylayer2. Sử dụng JavaScript, chúng ta có thể
thay đổi các màu nền của hai layer, và di chuyển một trong chúng sao
cho chúng không phủ chồng hoàn toàn. Hiệu ứng có th ể được thấy trong
hình 7 2.
Thật không may, mã trước không làm việc trong bất kỳ phiên bản
của IE hoặc trong các trình duyệt Netscape 6 mới hơn. Chúng ta sẽ phải
chỉnh sửa mã một chút để phát hiện loại trình duyệt đang chạy va thực
hiện các tác vụ khác nhau dựa vào mă đó.
Đầu tiên chúng ta cần thay đổi các layer để làm việc trong tấ t cả
irìnli duyệt. Mã sau đâ> khòng phù hợp với các chuẩn HTML (vì thẻ
<layer> không phải là một phần của chuẩn), nhưng nó sẽ làm việc
trong cả TE và Netscape.
Tree view ũemo
9 '_J Application example
3 Types of folders
' Targets
JO RĨqhịlrạniặ
•jj] New window
'¿¡I Whole window
J ] This frame
4 -4j Other Icons
Hình 7.1 Một menu cây có thể mở rộng sử dụng DHTML

Chương 7: Tạo các script làm việc trong mọi trình duyệt
181
<l¿yer id=’mylayer’>
<div id=’mydiv' styie=’posiiion:aDsolute’>
<font color="white’'><b>A black squaie</bx/font>
</div>
</iayer>
:l2‘/er ¡ris'THaye^'*
<điv id=’mydiv2' style='position:absolyte’>
<b>A gray square</b>
</div>
<^lavef>
L ftyett iM ip le - N c ltc a p «
F ỉa Vi©w & o ¿o m nriác a tof M«ỉp
3 ^ iầí - > -1 ‘U
¿ -i*
Bddc - ^dc^d H-yne s*»ch Netscape PiH S e r ư íy Shop
ĩã s
wyn
«M
Netscape Lavers Example
*A gra y square
A black
Hình 7.2 Tạo các layer trong Netscape 4
Lưu ý cách chúng ta sử dụng thẻ HTML chuẩn <div> được xếp lồng
bên trong thẻ <)ave.r> không chuẩn. Các trình đuvệt, không hỗ trợ <layer>
sẽ bỏ qua nó, vì các trình duyệt không hỗ trợ <div> sẽ bỏ qua thẻ đó.
Tiếp theo chúng ta cần chỉnh sửa script để phát hiện loại trình duyệt
đang chạy.
Chúng ta có thể sử dụng script getBrowserlnfo trước đó trong chương,

nhưng những nhu cầu của chúng ta đơn giản hơn th ế nhiều. Tất cả
những gì chúng ta cần làm là phát hiện sự khác biệt giữa Netscape 4,
Netscape 6 và IE. Để làm điều đó, sử dụng mã JavaScript sau đây:
<script language=’’JavaScript” type=”texưjavascript”>
var ua = navigator.userAgent.toLowerCase();
var ie4 = ua.indexOf(“msie”) != -1;
182
Chương 7: Tạo các script làm việc trong mọi trình duyệt
if (document.layers) {
// Netscape 4 code goes here
} else if (document.getElementByld && ie4) {
// IE code goes here
) else if (document.getElementByld) {
// Netscape 6 code goes here
}
</script>
Mã này làm việc một cách khá đơn giản. Netscape 4 là trìn h duyệt
duy nhât có đối tượng tài iiệu có một thuộc tính layers, do đó kiểm tra
tìm sự hiện hữu của thuộc tính đó sẽ xác nhận rằng loại trình duyệt là
Netscape 4. Chúng ta có thể làm thủ thuật này sử dụng phương thức
getElem entByld của đối tượng tài liệu ngoại trừ chúng ta vẫn cần phân
biệt giửa IE 4 và Netscape 6. Thuộc tính Navigator.user Agent cho phép
chúng ta làm điều đó.
Sau cùng chúng ta thêm mã DHTML riêng biệt theo trìn h duyệt để
xử lý hai thẻ <layer> hoặc <div> trên màn hình để tạo một hiệu ứng
hình ảnh.
<html>
<headxtitle>Layers sample</titlex/head>
<body>
<h1>Cross-Browser style Sheets Example</h1>

clayer id=’my!ayer,>
<div id=’mydìv’ style=’position:absolute’>
<font color="white”><b>A black square</bx/font>
</div>
</layer>
<layer id=’mylayer2'>
<div id=’mydiv2' style=’position:absolute’>
<t»A gray square</b>
</div>
</layer>
<script language=”JavaScript” type=”text/javascript">
var ua = navigator.userAgent.toLowerCase();
var ie4 = ua.indexOf(“msie”) != -1;
if (document.layers) {
// Netscape 4 code goes here
Chương 7: Các Struct, Enum và thuộc tính
183
Một phương thức hữu dụng khác là G etN am es. Nó liệt kê các tên
của các phần tử trong một mảng strin g. Ví dụ, bạn có thể lưu trữ tên
Color trong một mảng như sau:
string[] colorNames = Enum.GetNames(c.GetTypeO);
San đó bạn có thể hiển thị mảng này bằng việc sử dụng một vòng lặp
lặp lại.
Nhửng phương thức này được minh họa trong ví dụ sau đây.
Ví dụ 7.5
•
// Example 7-5.cs
/.' Using System.Enum methods
using System;
// Declare tỉie Color enurn:

enum Color { Red = 1, Green, Blue }
class MyClass
(
static void Main()
{
// Declare a blue color object:
Color myCc'or = Cc'l0f.B!ue:
// Display the color name using IcStnny:
Cjn.:ol3AVr.ie[jn3('M/ tolur !s: (0!”, myColtr), H B,je
// Declare 3 coior object'
Color yourColor = new Color();
h Display the color wnose value IS 2 by using the GetName method:
Console.WriteLinefYour color is: {0)”,
Enum.GetName(yourColor.GetType()f 2)); // Green
// Display all the color names using the GetNames method:
Console WriteLine(“Your colors are:");
// Declare a string array for colors:
string[] colorNames = Enum.GetNames(yourColor.GetTypeO);
foreach (string s in colorNames)
Console.WriteLine(“{0} s);
}
}
184 Chưdng 7: Tạo các script làm việc trong mọi trình duyệt
HŨE
„ £ie £ * ỵm * fìo gooỉưnaik« loofc ttndow üefc
tayon Mffipte Ị [3
Cross-Browser Style Sheets Exaniple
“ " “ "A gray square
&)1<1VCIS samólo ■ N cttCA ue
*29 V J bocumenc oõõe (0.17 Mct] fSf’

Hlnh 7.4 Mặc dù Netscape 7.0 đòi hỏi Java Script hơi khác nhau nhưng cùng một hiệu
ứng được tạo.
Đây là một ví dụ hay về những khó khăn mà các nhà lập trình
JavaScript đôi khi gặp phải khi phát triển mã làm việc trong bất k5'
trình duvệt.
Trong chương tiếp theo chúng ta sẽ xem một trong những nhiệm
vụ chính của JavaScript trên Internet - giúp người dùng điền vào các
form. Ban sẽ học cach tạo mọt form Dằng HTML, học vể tấ t cả điều
khiẽn (Control) có th ể đi vào một form và xem JavaScript có thể
được sử dụng để hiệu lực hóa dữ liệu được nhập trước khi nó được gởi
đến server để xử lý.
Chương 8: xử lý các web form 185
Trong chương này bạn sẽ học những điểm ch ính sau đây:
Jí Yêu cầu dữ liệu nbập của người iHing síỉ cìụnq một form HTML
R ín y 'hn rà XÍ'C 'ập cárgừí tri diều ừhìển form
B Chỉ lẳn oi dư liệu form Jé cié irìub đén Sí n er Ị
7
_____
B Xứ lý nbiäu Jem
__________________________________________
Ị
T
rong càc chương ưưởc cnúng ta đã tnáy JavaScrip co the ũưực
sử dụng như thế nào để cung cấp các trang web động chứa các
menu hoạf bình hoặc bơi khác nhau phụ thuộc vào trình duyệt
web đang sử dụng hoặc thời gian trong ngày. Khi thời gian trôi qua,
các nhà phát triển sẽ thấy việc đưa những thủ thuật JavaScript đặc
biệt này vào các trang chu cá nhân riêng của họ trồ nên dễ dàng hơn
bao giờ hết.
Điều đã khiến cho JavaScript không thể thiếu được như là một công

cụ phát triển cho hầu hết các nhà phát triển web chuyên nghiệp là khả
năng nó xử lý dữ liệu nhập người dùng. JavaScript làm cho việc thu
thập và xử lý thông tin người dùng trở nên dễ dàng hơn - cho cả người
dùng và nhà phát triển web. JavaScript có thể hỗ trợ bằng nhiều cách:
M Lưu trữ và truy tìm các mẫu thông tin trên máy tính của người dùng
(được gọi là các cookie).
R Kiểm chứng rằng tất cả tn(ờngform bắt buộc đã được cang cấp
186 Chương 8: xử lý các web form
R Hiệu lite hóa định dạng thích hợp của dữ ìiệu do ngifrii dùng nhập
vào
B Cĩing cấp sự phản bồi tức thì cbo người dùng mà không cần phải di
đến web server
Và trên hết, làm tất cả điều này thường rất dễ dàng - chỉ cần một
vài dòng mã. Bằng việc giải quyết nhiều vấn đề hơn nó gây ra, JavaScript
nhanh chóng trở thành một công cụ không thể thiếu được cho các nhà
phát triển web nghiêm túc.
Tìm hiểu các íorm HTML
Cách tốt nhấf. và linh hoạt nhất để đề nghị dữ liệu nhập của người
dùng là bằng cáo form HTML. Một form trong lập trình web là một loạt
gồm một hoặc nhiều điều khiển người dùng được thiết kế để thu thập
dữ liệu nhập người dùng. Một điều khiển người dùng (user control)
thường là một hộp text, một hộp danh sách (list box) hoặc một nút
(button) thuộc một loại nào đó cho phép người dùng cung cấp thông tin
cho trình duyệt web. Thực tế các web form được mô phỏng theo các
mẫu giấy như những mẫu giấy mà bạn điền vào cho một đơn xin việc
hoặc một cuộc khảo sát.
Có 13 điều khiển người dùng trong HTML:
* Text box Cho phép một dòng dữ liệti nbập text.
B Passivord box Cho phép một dòng dữ liệĩi nhập text chíỢt bảo vệ
bằng các dấu sao.

* Text area Cho phép một hoặc nhiều dòng dữ liệu nhập.
R Hidden Cờ thế chứa một dồng text đtỉợc ổn khỏ' rgườ1 dùng
B List box Người dũng có thể chọn từ một hoặc nhiều lựa chọn ấn
định sẵn.
Ễt Radio button Người dũng có tbể cbọn một trong nhiềĩi lựa chọn ấn
định sẩn.
B Check box Người dùng có thể chọn bất kỳ số trong nhiều lựa cbọn
ấn định sẵn.
R File Người dùng có thể upload một file từ máy cục bộ lên web sewer.
Push button Làm cho một hànb động do chương trình ấn định xảy
ra.
* Submit button Khiến cho form đìỉợc đệ trình.
B Image button Tạo một nút submit đồ họa.
B R eset button Làm cho form được xóa sạch.
Chcícng 8: xử lý các web form
187
M Object Tạo tuột điềtt kũiổn nhạt) ỉịộn đục biệt (do người dùng định
nghĩa)
Từng điều khiển này thực hiện một chức n à n g đặc biệt trong việc
yêu cầu dữ liệu nhập người dùng. Điều khiển nào bạn sử dụng phụ
thuộc nhiều vào các trường hợp riêng lẻ. Ví dụ, khi bạn cần người dùng
chon ir.ột trong 50 lựa chọn (như chọn tiểu bang nào mà họ đang sống)
bfin thư^rg chọn met điồu k hilr I’st box F)iồu khiổn nàv cho phép bạn
cung cấp hàng chục tùy chọn trong rất ít không gian. Chọn hiển thị 5Ơ
n út radio thay vào đó sẽ chiếm nhiều không gian hơn và có thể khiến
cho phần còn lại của form cuộn ra khỏi đáy màn hình.
Yêu cầu dữ liệu nhập người dùng sử dụng một form HTML
Để thây một form HTML điển hình trông giống như thế nào, hãy
kiểm tra tran g web trong hình 8-1. United States Postal Servive
(www.usps.gov) cung cấp form trực tuyến này để đăng ký các thay đổi

địa chỉ của các gia đình hoặc cơ sở kinh doanh chuyển nhà và muốn thư
clươc chuyển riếp đến VỊ trí mới của họ.
IHnvMiRtiiH* ' VA*n Mnvtrwj SnluliMt • ‘Mir.ioxflft Fvplrfci
□3x]
U N IT E D S T A T E S
P O S T A L séiĩvtcẽs
MoversGuide
Cltamjcyuur ¿tídiess
Movinij services
ful >1)IS
Community mío
Olh'íí ierwces
“ M A !: r f VO'IR AfOfiF S s O N l I N P
Fill out tho change of address form
N am e
PieftxTiHe tHtio)
First Name (of waft |
Middle Name ,cx nbaf; (Hup) |
last Name |
SijTot jn/A
Ạ
Hình 8.1 Thay đểi form địa chỉ trẽn web site U.SLIDE. Postal Service.
Trường form đầu tiên trên màn hình được ghi nhãn là "Prefix Title"
cho phép người dùng chọn từ một số tiền tố tên (chẳng hạn như "Dr.,"
"Marker.," và "Mrs."). Nếu họ không sử dụng một tiền tố trước tên của
họ, họ có thể chọn "N/A" thay cho not applicable (không thể áp dụng).
Điều khiển này được gọi là một list box (hộp danh sách) vì bằng cách
188
Chương 8: xử lý các web form
nhấn nút mũi tên hướng xuống người dùng sẽ thấy một số tùy chọn mà

họ có thể chọn.
¿ I MoveitGuiđe • Youf Complete Moving Solution • MiciDtoO Inteinel Ettptofet
O* £d¡t y»** Ffvorfof Jooh

ế " SI " 5
ìàck Fr.y*ã -i
‘-Ọ i ß a I 'ã '£ ị & \ & ¡-
Stop Rẹỉteth Home I Search Favorite« Mcdạ Hưỉoty [ Maỉ
-3 Ịiô'
U M T E D STA T E S -
« f PO S TAL SERV ICE«
, :/ - ; i ; V *■'
M o v e r s G u i d e
C H A ', c t V 0 u K A D D fl £ $ s 0 H L 1 N «:
rtiMigpymir MfcfrftKS
Mcvttig Sdrvti es
Heílífiíltos
Community into
Crti »Cĩ services
Lli
F ill o ư t t h * c h a r g e o f a d d r e s s *orrn
Name
Prefix Tine ĩHtia)
Flr$IN*m e(orrể«) iHtip*,
Middle Name (or ntnl) m<ir)
Last Name (Ht'p-J
Suffix Titie: fHtio'i
WA r
ca á
OR

HON
xx?€
KtẳS
hfí
MRS
MS
SA
sgfo «*
r r ;l3 Í70 Irteme*
Trường form được ghi nhãn là "First Name" là một text box cho
phép người dùng nhập một hoặc nhiều ký tự sử dụng bàn phím. Đôi khi
các nhà lập trình đặt các giới hạn trên trường này sử dụng JavaScript,
nhưng người dùng thường có thể nhập bất kỳ tổ hợp mẫu tự, số hoặc
Symbol đặc biệt. Các nhà lập trình có thể sứ dụng một HTML để xác
định một chỉều dài tối đa nho tníờng nàv.
Khi ngươi dùng đã nhập xong dữ liệu cá nhân, nọ được đé nghị nhâp
vào một nút submit HTML. Nút submit làm cho dữ liệu từ web form được
gởi đến một chương trình đang đợi trên web server để xử lý. Sử dụng
JavaScript, các nhà phát triển web có thể hiệu lực hóa dữ liệu trước
khi cho phép việc đệ trình đến web server tiến hành.
Xử lý dữ liệu nhập Form bằng JavaScript phía Client
Một khi form đã được điền vào và được đệ trình, nó thường được gởi
đến một web server để xử lý. Điều quan trọng là phải chú ý rằng nó
không nhất th iết phải được gởi đến một web server - đôi khi các web
form có thể được xử lý hoàn toàn trên Client sử dụng JavaScript. Bạn
sẽ cần thấy những form phía Client này dưới dạng các chương trình
tính toán trực tuyến và những công cụ tương tự ở đó JavaScript đủ
thông minh để tính toán kết quả mong muốn và thực hiện hành động
được yêu cầu mà không cần sự trợ giúp từ một web server.
Chương 7: Các Struct, Enum và thuôc tinh

189
Kêi quả:
Chương trình này sẽ tạc ra hộp thông báo được minh họa trong
hỉnh 7.1.
Viếl một chương tririh để C )Ọ! rrột tron-3 các: hàn riêng của C-T+ chẳng han
!ihj pu;s nầm trong .hư viện ns/crt.đll
7.íi.S Mó ị^hỏr.g c«{ li jr. Kọ'|j
Có thể sử dụnjí các ỉhuộc tính đế mn phóng các lién hơp (union)
trong Cr+ nhơ dược t.rmh bay trong Vì du sau đâ\:
[type: StructL ayout(L3youtKinrJ Explicit)]
public siruf't UiitonStiucf.
(
[field: Field0ffset(0;j /I offset #(J
public int i;
[field: FieldOffset(O)] // offset #0
public double d;
Ỉ
Trong ví dụ này hai thuộc tính được sử dụng:
[type: StructLayout(LayoutKind.Explicit)]
[field: FieldOffset(O)]
OK
L
Hình 7 1 Hộp thông báo
Thực hành 7.5
190
Chương 8: Xử lý các web form
B Một binary dược biên dịch đítợc tiết bằng hầíi như bất kỳ ngôn nqữ
(chẳng hạn nhìỉC).
Một khi những chương trình này chấp nhận dữ liệu được đệ trình
bởi web form, chúng thường thực hiện bất kỳ việc xử lý được yêu cầu và

sau đó phản hồi lại trình duyệt bằng một trang HTML khác. Tiến
trình giao tiếp giữa client và server được minh họa trong hình 8-3. Nó
minh họa một ví dụ về một người dùng thực hiện một cuộc tìm kiếm tại
một trong các web site bộ máy tìm kiếm lớn. Web server chấp nhận
các từ khóa sử dụng một form HTML, kiểm tra cơ sở dữ liệu của nó để
tìm các trang web liên quan và trả về một trang web HTML mới có kết
quả.
Chèn một form HTML vào một trang web
Các form được thêm vào các trang web giống như cách các ảnh, text
và những phần tử khác của trang, với markup HTML. Các nhà phát
triển có thể định nghĩa tất cả phần của một form bao gồm các điều khiển
(control) mà nó chứa và chúng được sắp xếp như th ế nào sử dụng các thẻ
HTML chuẩn.
Sử dụng thể <form>
Trong HTML, các form được định nghĩa sử dụng thẻ <form>. Thẻ
<form> cho phép bạn định nghĩa loại form mà bạn muốn tạo bao gồm
URL của chương trình đợi chấp nhận dữ liệu nhập của người dùng (nếu
có). Những form này được xác định sử dụng các thuộc tính của phần tử
<form>. Một thuộc tính (attribute) là tham sô được đặt tên của một phần
tử và đữ liêu đi kèm Cán thiiôc. tính đươc xác đinh bãng cách sau đâv:
• • • • o
<element attribute1="valuer attnbute2="value2" attribute3=”value3*>
Googlc.com
web browser
Googh
n
1. I w n submitted
10 web server.
3. New web page
returned to tuer.

2. Web server
. checks its database.
ề Ể Ể B ủ
*srass=z
• database
Webserver
Hình 8.3 Giao tiếp giữa Client và server khi một form HTML được đệ trình.
Phần tử <form> có những thuộc tính sau đây:
ẫ! id Chuỗi phải duy nhất qua toàn bộ trang web
Chương 8: xử lý các web form
191
B class Danh säen các class css được két hợo
n style Các ỉệììb style css nội dồng (ĩnHne)
B title Tiêỉi dề tư vẩn
R lang Mã ngôn ngứ ISO
ẫf dir Hướng của rext ú ừ phái sang trái hoặc trí trái sang phải)
R action ƯRI của chương tnno vốn sẽ xù ly áữ liệu form
B method Các dứ liệu sẽ được chuyển đến sewer (GET hoặc POST)
u enctype Kiểií mã hóa M1.MF,
R accept Dank sách các kiểu MJME dươc chắp nhận để upload file
B accept-charseí Danh sách các charset được hồ trợ
Ngoài tất cả thuộc tính đó, phần tử <form> cũng có thể chứa một số
phương thức xử lý sự kiện (event handler). Các event là những hành
động thường được khởi tạo bưi người dùng chẳng hạn như di chuyển
chuôt hoặc các thao tác nkấn phim r.hất định. Các event h ird le r là ra#,
va hàm JavaScript được thiết kế ồể tác động khi các sự kiện nhất định
xảy ra. Chương 9 so irìah bày chi ùét non cac pnuơng thức xủ lý áự
kiện HTML ấn định sẵn.
Bi U U Y Ề r
Gửi mai) i.ộ; tíui.g cCa một fưin iến jạn

Thuôc tính action oủa *hẻ <-form> cho nhép ban xác định UR! weh ser /e''
cho chương trinh mà Stì xử lý form. Chương trmh này thường ià một ỉrang
ASP, Java serviet hoặc môt script Perl chạy trên một web server đích.
Bạn cĩíng có thể ra lệnh trinh duyệt gở; e-nai! cho bạn nội dung của form
thay vào đó. Đtều này được thưc hiện báng cách cung cấp một địa chỉ e-
mail sử dụng giao thức mailto: cho thuộc tinh action. Để tạo một URI sử
dụng giao thức mailto, ban chỉ việc thém đia chì e-rriail tnật sự váo chuỗi
mailto: như sau:
mailto :
Nếu bạn đã sử dụng chuỗi trước làm URI chc thuộc tính action, nội dung
của web form sẽ được gởi mail đến tổng thống của nước Mỹ.
Tuy nhiên, kỹ thuật này không được bảo đảm vì nó sử dụng chương trình
mail được cài đặt trên máy tính của người dùng. Chương trình có thể không
được xác lập chính xác để gởi e-mail hoặc người dùng có thể hủy gỏi e-
mail.
192 Chương 8: xử lý các web form
Bây giờ chúng ta chỉ quan tâm đến hai sự kiện có thể xảy ra với một
web form :
H onsubmit Mã JavaScript vốn có thể được chạy tniớc khi form đìỉợc
đệ trình
R onreset Mã JavaScript vốn sẽ được chạy tnỉớc khi dữ liệu của form
bị xóa.
Một số phần tử HTML có những thuộc tính bất buộc nghĩa là các
thuộc tính phải luôn hiện diện. Phần tử <form> là một trong số đó, vì
thuộc tính action phải luôn được xác định để HTML được hợp lệ.
Loai form cơ bản nhất như sau:
<form action-T>
</form>
Mã HTML này tạo một form rỗng không chứa bất kỳ điều khiển. Các
form chẳng hạn như form này dĩ nhiên hoàn toàn vô dụng bởi vì chúng

không có mục đích. Các phần tử HTML <form> thì ẩn vì chúng không
có một thành phần trực quan. Các điều khiển form (ví dụ các nút và
text box) là những thành phần trực quan của các form. Các form cũng
có thể chứa text, các bảng (table) và những phần tử HTML khác.
• ••••••
Thủ thuật
Dấu pound (#) thường được sử dụng làm giá trị cúa thuộc tính action của thẻ
<form> khi không cần gì cả, vì thuộc tính action bắt buộc và không thê được bỏ
qua. Bạn có thể sử dụng thuộc tính này cho các form được thiết kế để chỉ hiện
hũ\j trên client mà sẽ không bao giờ cần được đệ trình đến server. Dấu pound
(#) là môt trong các UPL hợo lệ ngắn nhất
Thêm các điều kliiển form
Như bạn đã thây các form khá vô dụng nếu không có các điều khiển
(control). Các control forra cho phép các trang web nhập dữ liệu người
dùng. Một số control cho phép người dùng tự nhập text và một số control
cung cấp cho người dùng một số tùy chọn định nghĩa sẵn để chọn lựa.
Các control form được thêm vào các phần tử <form> bằng HTML riêng
của chúng. Bảng 8-1 liệt kê các control nhập liệu thông thường cùng với
HTML được yêu cầu để thêm chúng vào một trang web.
Chấp nhận dữ liệu nhập Text với một Text Box
Có lẽ loại control form thông thường nhất là text box. Thực tế control
text box là loại mặc định của phần tử <input>. Mã HTML sau đây sẽ tạo
một web form với một text box bên trong.
<form action=”#”>