Giá vàng
Tỷ giá ngoại tệ
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>
</TD>
<TD WIDTH=200>
Which of these guys would you lend money to?<BR>
</TD>
<TD WIDTH=199>
Which of these guys would you trust with your sister?<BR>
</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: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 gì bạn thực hiệncó thể được thực hiện từ các thẻ này
0 nhận xét:
Đăng nhận xét