CHƯƠNG TR̀NH JAVASCRIPT DÀNH CHO SINH VIÊN HỌC SINH

PHẦN III: FORM

Phần này tŕ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 ḿ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 tŕ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 tŕnh duyệt của bạn. Sử dụng nó để mở form1 .html,chạy Notepad và tŕnh duyệt.Bằng cách này bạn có thể tạo các trang của ḿ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 tŕ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>

Ḍ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 tŕ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 tŕ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 ǵ 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 tŕ 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à tŕ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ó ḥan ṭan giốngt, ngọai trừ nó không hiển thị dữ liệu thực được  nhập mà tŕ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 tŕnh duyệt biết phải thực hiệnđiều ǵ.Atribute đi vào trong <tag> và cho tŕ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 ḍ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 ḍ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 ḿ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 ǵ 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 tŕ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ể tŕnh duyệt sẽ không nhận biếthoặc được tŕnh phân ngữ(Mailto Formatter là một tŕ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 tŕnh bày bất ḱ ở đâ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 ḿ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 ǵ xuất phát từ đâu và phải làm ǵ?

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à ǵ(hoặc dữ liệu nhập bất ḱ đố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 ḿ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 ǵ các nút này tŕ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 tŕ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 ǵ trong thẻ<FORM> như sau:

<FORM METHOD=POST ACTION="mailto:michael@corleone.com?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 ǵ 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