CHƯƠNG TR�NH JAVASCRIPT D�NH CHO SINH VI�N HỌC SINH

PHẦN III: FORM

Phần n�y tr�nh b�y c�ch bổ sung t�nh năng tương t�c v�o c�c t�i  liệu web của bạn bằng thẻ <FORM>.Với thẻ form<form> bạn c� bổ sung v�o c�c trang webcủa m�nh với c�c cửa sổ guestbook,cac form c� thứ tự ,c�c survey, nhận phản hồi hoặc một k� tự bất kỳ .zatrabeoj

C�c cấu tr�c cơ bản của form html:

<form> bắt đầu một form

<input>y�u cầu th�ng tin bằng một trong nhiều c�cch kh�c nhau

<input>...c� thể c� tối đa c�c v�ng nhập liệutheo y�u cầu của bạn

</form>kết th�c một form

C�c form html trong một nutshell . b�y giờ bạn sẳng s�ng tạo một số form.Nếu bạn muốn t�m hiểu c�ch tạo html chất lượng ,th� bạn phải d�nh  thời gian t�m hiểu c�c tag (thẻ) .Nếu bạn dựa v�o c�c form wizard bạn chỉ c� được một số khả năng giới hạn v� kh�ng đạt đươc kết quả cuối c�ng như � .Tốt nhất bạn n�n sử dụng c�c tr�nh sọan thảo html dựa v�o văn bản

 

B�I 1: SAO CH�P V� D�N TRANG

Ch�ng ta h�y mở ngay tới Notepad v� thực hiện theo c�c hướng dẫn.Bắt đầu thực hiện sao ch�pv� d�n trang n�y:

 

 

 

 

 

 

 

Lưu n� l� form1 .html trong một thư liệu(c�c người d�ng win 3xlưu n� l� form 1 .html).Tiếp tục v� lưu cho n� một thư liệu ri�ng .Khởi động tr�nh duyệt của bạn. Sử dụng n� để mở form1 .html,chạy Notepad v� tr�nh duyệt.Bằng c�ch n�y bạn c� thể tạo c�c trang của m�nh v� c� thể thấy ngay c�ng việc của bạn .nếu ấn  �t reload v� giữ ph�m[shift].

G� v�o c�c thẻ form

 

Kế tiết bạn phải cho tr�nh duyệt biết nơi gửi dữ liệum� ch�ng ta thu thập c�ch gửi n� .C�n 2 điều căn bản bạn c� thể thực hiện

1/Bạn c� thể gửi dữ liệu v�o CGI (Commom Gateway Interface) script để xử l� hoặc

2/bạn c� thể nhận dữ liệu được gửi bằng email. Đối với khả năng thứ nhất người ta viết script c� thể cho bạn biết c�ch gửi dữ liệu. Khả năng thứ 2 hoặc form mailto  phải c� thuộc t�nh sau trong thẻ<form>

D�ng n�y rất quan trọng .Điều duy nhất bạn phải thực hiện l� plug in v�o địa chỉ emailcủa bạn sau mailto: Phần c�n lại được viết ch�nh x�c như đ� được tr�nh b�y ở tr�n. C�c từ form ,method, post&action, kh�ng phải viết bằng chử hoa nhưng phải c� khỏang trống giửa c�c thuộc t�nh ,giửa form v� method giửa post & action,giữa.com" & enctype

Đ�ng tiếc dữ liệu được gửi đến bạn bằng c�ch n�y chỉ hữu dụng đối với định dạng của m�y t�nh :

 

Bạn cần c� một chương tr�nh biến đổi n� một c�ch hữu dụng đối với định dạng của con người:
 

Th� dụ tr�n minh họa một form kh�ng g� kh�c hơn l� c�c t�n(Name,Address,v�n v�n)được nhập th�nh một cặp với c�c gi� trị (R.U Havinfun, 1313 Mockingbird Lane, v�n v�n)nhập.Chỉ c� một sự biến đổi duy nhấtl� ch�ng ta điều quản c�c gi� trị đ� như thế n�o.

B�I 2: THIẾT LẬP FORM

Để duy tr� mọi thứ gọn g�ng, ch�ng ta bắt đầu viết v�o trong c�c thẻ <form>.Từ giờ bỏ đi head, body,title v� c�c thẻ form.

TUPE phổ biến nhất của form <INPUT> l� TEXT:

<INPUT TYPE=TEXT>

Mọi dữ liệu nhập cần c� một Name

<INPUT TYPE=TEXT NAME="ADDRESS">

khi người d�ng � v�o địa chỉ của họ (th� dụ, 1313 Mockingbird Lane), n� sẽ trở th�nh gi� trị nhập liệu v� đi cặp với Address, v� vậy kết quả cuối c�ng khi chạy n� bằng  Mailto Formatter sẽ l� ADDRESS=1313 Mockingbird lane

Nếu muốn ch�ng ta c� thể g� v�o Value:

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>

Điều n�y sẽ tự động tạo cặp gi� trị 44 Cherry St với t�n Address, trừ khi người d�ng thay đổi n� .Lưu �:chắc chắn sử dụng c�c cấu tr�c dẫn nơi ấn định

ch�ng ta c� thể ấn định hộp text input

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>

<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>

Như bạn thấy , gi� trị mặc định l� 20. Ban c� thể đ� biết rối , default value l� gi� trị m� tr�nh duyệt thừa nhận nếu bạn chưa cho n� gi� trị kh�c

Tiếp tục v� bỏ value= "44 Cherry St":

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30>

Nếu muốn ch�ng ta c� thể  ấn định bao nhi�u k� tự người d�ng c� thể nhập

Chỉ cần tiến h�nh v� nhập nhiều hơn 10 k� tự

<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>

Giả sử đặc trưng n�y c� thể xuất hi�n v�o l�c cần thiết, nhưng trừ khi ban cho người ta gửi cả cuốn kinh th�nh King James xuống nơi bạn , tuy nhi�n,bạn đừng lo ngại về điều đ�

Rất giống Type Text l� Type=Password. N� h�an t�an giốngt, ngọai trừ n� kh�ng hiển thị dữ liệu thực được  nhập m� tr�nh duyệt sẽ gửi cho bạn gi� trị đ� , n� sẽ kh�ng hiển thị dữ liệu ấy

<INPUT TYPE=PASSWORD>

nhớ l� m�i Input phải c� 1 Name

<INPUT TYPE=PASSWORD NAME="USER PASSWORD">

c�c thuộc t�nh size, value v� maxlength, cũng c� t�c dụng ở đ�y.Bằng c�ch đ� <tag> cho tr�nh duyệt biết phải thực hiệnđiều g�.Atribute đi v�o trong <tag> v� cho tr�nh duyệt biết c�ch để thực hiện điều đ�

Kế tiếp Radio Button v� check boxes. C�c n�t radio cho người d�ng chọn một trong nhiều t�y chọn. Check boxes cho người d�ng chọn một hay nhiều hay tất cả c�c t�y chọn

Trước hết h�y thiết lập Radio Buttons:

<INPUT TYPE=RADIO NAME="BEST FRIEND">

B�y giờ bổ sung th�m 2 radio button

<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">
<INPUT TYPE=RADIO NAME="BEST FRIEND">

Giả sử ch�ng ta ngắt d�ng sau mỗi radio buttons

<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND"><P>



Lưu � :Mỗi dử liệu nhập c� c�ng t�n. Nguy�n nh�n đ� sẽ trỡ th�nh r� r�ng ngay.

Một trong c�c Radio Buttons phai được g�n value

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"><BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"><P>



B�y giờ đặt nh�n cho mỗi n�t :

<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>

Ed Holleran
Rick Weinberg
Tom Studd

bạn c� thể thay nh�n c�c n�y bằng c�c thẻ html nếu muốn

Chủ yếu radio buttons của bạn được thực hiện.bạn c� thể sắp xếp gọn g�ng mọi thứ bằng c�ch bổ sung c�u lệnh tr�n c�c n�t v� nếu muốn , bạn chọn mặc định

Who is your best friend?<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Ed Holleran<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Rick Weinberg<BR>
<INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Tom Studd<P>

Ai l� bạn th�n nhất của bạn ?
Ed Holleran
Rick Weinberg
Tom Studd

Đương nhi�n người d�ng chỉ c� thể chọn 1 t�y chọn.Sự chọn lựa của họ sẽ được gửi trở lại cho bạn bằng cặpt�n/gi� trị Bestfrienf=ED(hoặc người chọn họ)

Thiết lập c�c check box kh� giống.bắt đầu như sau:

<INPUT TYPE=CHECKBOX NAME="Ed">

Bổ sung th�m 3 check box, nhưng lần n�y cho n� 1 Name kh�c (Ng�ai ra bổ sug c�c ngắt d�ng nếu muốn)

<INPUT TYPE=CHECKBOX NAME="ED"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom"><BR>
<INPUT TYPE=CHECKBOX NAME="BM"><P>




Mỗi checkBox c� c�ng Value.

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"><P>




Lưu � :Đối với check box c� Name thay đổi v� value vẫn tương tự v� đối với Radio Buttons, Value thay đổi nhưng Name vẫn tương tự .Đ� l� l� do cần sắp xếpc�c t�i liệu tham khảo hjtml gọn g�ng

Ok,Ch�ng ta đặt nh�n cho mỗi hộp:

<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>

Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

Cuối c�ng c� thể bạn mốồn bổ sung một v�i điều tr�n c�c hộp kiểm của m�nh v� c� thể chọn cặp mặc định .Đương nhi�n chỉ khi bạn muốn

Which of these guys are your friends?<BR>
<INPUT TYPE=CHECKBOX NAME="ED" VALUE="YES" CHECKED> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES" CHECKED> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Burgermeister Meisterburger<P>

Which of these guys are your friends?
Ed Holleran
Rick Weinberg
Tom Studd
Burgermeister Meisterburger

Người d�ng c� thể chọn 1, 2 , kh�ng t�y chọn n�o hoặc tất cả .C�c chọn lựa của họ gữi lại cho bạn bằng c�c cặp t�n/gi� trị :

Ed=YES
Tom=YES
(hoặc điều bất kỳ họ chọn....,bạn sẽ kh�ng nhận được g� nếu như họ kh�ng chọn0

Giờ bạn c� thể c� c�c c�u hỏi,giả sử bạn muốn hỏi 3 c�u hỏi kh�c nhau về c�ng nh�m người?Mr Smartypants,t�i phải thực hiện điều đ� như thế n�o????

bạn được tr�nh b�y điều đ� nhu sau:

thực ra mỗi form kh�ng bao giờ sao ch�p c�c name.V� vậy ch�ng ta c� thể sử dụng t�n kh�c cho mỗi c�u hỏi.Khi m�y t�nh của bạn kh�ng thực hiện,rất c� thể tr�nh duyệt sẽ kh�ng nhận biếthoặc được tr�nh ph�n ngữ(Mailto Formatter l� một tr�nh ph�n ngữ)hay cgi script.�t nhất n� sẽ lầm lẫn điểm truy cập dịch vụ kh�ng rỏ r�ng về � nghĩa dữ liệu của form

Sau đ�y html đối với 3 c�u hỏi n�y.C�c thẻ <table>c� m�u xnh. Ch�ng chỉ xuất hiệnm� kh�ng ảnh hưởng tới formấy họat động như thế n�o.Nếu bạn cần xem lại c�c thẻ <table>của bạn

<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1><TR>

<TD WIDTH=199>
Which of these guys are your friends?<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Friend?..BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=200>
Which of these guys would you lend money to?<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Lend money?...BM" VALUE="YES"> Burgermeister<P>
</TD>

<TD WIDTH=199>
Which of these guys would you trust with your sister?<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Ed" VALUE="YES"> Ed Holleran<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Rick" VALUE="YES"> Rick Weinberg<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...Tom" VALUE="YES"> Tom Studd<BR>
<INPUT TYPE=CHECKBOX NAME="Date sister?...BM" VALUE="YES"> Burgermeister<P>
</TD>

</TR></TABLE>
</CENTER>
 

Thực hiện như tr�n sẽ gửi cho bạnc�c cặp t�n/gi� trị sau:

Friend?..Ed=YES
Friend?..Rick=YES
Friend?..Tom=YES
Lend money?...Tom=YES
Lend money?...BM=YES
Date sister?...Ed=YES
Date sister?...Tom=YES
Date sister?...BM=YES

B�I 3 :KIỂU DỮ LIỆU NHẬP

Một kiểu dữ liệu nhập kh�c l� HIDDEN input

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Friend Form 1">

Dữ liệu nhập HIDDEN l� cặp t�n/gi� trị bạn được cho trở lạu nhưng kh�ng tr�nh b�y bất k� ở đ�u tr�n trang web.Dữ liệu nhập ở tr�n cần sử dụng với Mailto Formatter.N� l� c�ch MTF nhận biết c�c form như thế n�onếu được ph�n ngữ

Giả sử c�ng ty của ban đang cố gắng ph�t sinh c�c hướng dẫn về sản phẩm mới của m�nh. Bạn c� form chuẩn để thu thập th�ng tin...t�n ọộng ty, số điện thọai,c�c sản phẩm quan t�m,v�n v�n.Vấn đề duy nh�t l� 6 phi�n bản hơi kh�c nhaucủa form ở c�c vị tr� hơi kh�c nhau.Bạn cần biếty n hững g� xuất ph�t từ đ�u v� phải l�m g�?

Bạn c� thể bổ sung HIDDEN input v�o c�c form như sau:

<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1">

d�nh cho phi�n bản thứ nhất
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2">

d�nh cho phi�n bản thứ 2
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3">

d�nh cho phi�n bản thứ 3 v�n v�n....

Bằng c�ch n�yd� cặp t�n/ gi� trị trong dữ liệu nhập ẩn bất kể l� g�(hoặc dữ liệu nhập bất k� đối với vấn đề đ�).Sử dụng "FORNAME"v� n� phải giảm bớt g� nhập .Điều n�y sẽ l�m cho dữ liệu nhập HIDDEN hợp l�...

<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2">

Bạn sẽ c� lại được"Mc^2"

Dữ liệu nhập HIDDEN cũng hữu dụng đối với c�c CGI Script.Th� dụ nhiều nh� cung cấp dịch vụ Internet (ISP)sử dụng cript m� bạn c� thể gửi �c form của m�nh tới.sau đ� đưa form trở lại gọn g�ng hấp dẫn sẵn s�ng cho người d�ng .Dữ liệu nhập ẩn cho cgi script biết bạn l� ai, nơi gửi dữ liệu đ� ph�n ngữ ,v�n v�n

Cuối c�ng tr�n danh s�ch l� c�c n�t SUBMIT v� RESET.

Ch�ng thực sự rất đơn giản:

<INPUT TYPE=SUBMIT>

Đương hi�n l� SUBMIT để gửi dữ liệu...

...v� RESET để x�a form ấy

<INPUT TYPE=RESET>

Ch�ng ta c� thể dể d�ng thay đổi những g� c�c n�t n�y tr�nh b�y

<INPUT TYPE=SUBMIT VALUE="Send it away Ray!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form Norm!"><P>


Nếu cần,n�t SUBMIT cũng c� thể c� một NAME.Bạn Sẽ cần t�n n�y,nếu v� l� do bất kỳ bạn sử dụng bất kỳ hơn một n�t SUBMIT.

Khi một form mail to tr�n trang của bạn v� người ta gửi th�ng tin  cho bạn ,bạn sẽ thấy n� được gửi với Subject mặc định .Nếu bạn l� người đến thăm bằng c�ch sữ dụng netcape, bạn sẽ nhận được SUBJECT mặc định "Form posted form MOzilla".C�c tr�nh duyệt kh�c c� thể gửi"Fresponse",v�n v�n.
Bạn c� thể thay đổi điều n�y bằng c�ch xử dụng hay hiệu chỉnh những g� trong thẻ<FORM> như sau:

<FORM METHOD=POST ACTION="mailto:[email protected]?subject=Our friends in Las Vegas" ENCTYPE="application/x-www-form-urlencoded">

Bạn đ� t�m hiểu tất cả c�c thẻ FORM. C�n một �t nữa, nhưng tất cả những g� bạn thực hiệnc� thể được thực hiện từ c�c thẻ n�y

Ch�c c�c bạn th�nh   cộng