Loại tài liệu

Tài liệu

Tác giả

Hà Nội Aptech

Lĩnh vực

Science and Technology

Ngôn ngữ

Tóm tắt nội dung

Sử dụng biểu mẫu và khung trong HTML

Tiêu đề

Sử dụng biểu mẫu và khung trong HTML

Nội dung

Mục tiêu bài học

Kết thúc chương này, bạn có thể:

Sử dụng biểu mẫu và các phần tử nhập thông thường trong HTML
Sử dụng khung

Giới thiệu

Một người hay dùng Web thường xuyên gặp các loại biểu mẫu khác nhau và nhiều khi phải điền thông tin vào các loại biểu mẫu đó. Trong chương này, ta sẽ học cách thêm các phần tử nhập vào một tài liệu HTML và tạo ra một biểu mẫu. Ta cũng sẽ học thêm về khung để phân chia tài liệu.

Giới thiệu biểu mẫu

Form HTML là một phần của tài liệu, nó chứa các phần tử đặc biệt gọi là các điều khiển. Các điều khiển được sử dụng để nhập thông tin từ người dùng và cung cấp một số tương tác. Dữ liệu do người dùng nhập vào có thể được xác nhận hợp lệ nhờ các kịch bản phía máy khách (client-side scripts) và được chuyển đến máy chủ để xử lý thêm.

Sử dụng biểu mẫu

Việc sử dụng biểu mẫu trên World Wide Web là khá nhiều và liên tục tăng lên. Sau đây là một số cách sử dụng thông thường:

Thu thập tên, địa chỉ, số điện thoại, địa chỉ e-mail và các thông tin khác để người dùng đăng ký cho một dịch vụ hay một sự kiện nào đó

Thu thập thông tin dùng để đăng ký mua một mặt hàng nào đó
Khi muốn mua một cuốn sách trên Internet, ta phải điền tên, địa chỉ gửi thư, phương thức thanh toán và các thông tin liên quan khác.

Thu thập thông tin phản hồi về một web site. Hầu hết các site cung cấp một dịch vụ nào đấy đều khuyến khích khách hàng gửi thông tin phản hồi. Ngoài việc xây dựng mối quan hệ với khách hàng, đây còn là một nguồn thông tin để trao đổi hoặc cải tiến dịch vụ.

Cung cấp công cụ tìm kiếm cho web site. Các site cung cấp nhiều thông tin khác nhau thường cung cấp cho người dùng hộp tìm kiếm để cho phép họ tìm kiếm thông tin nhanh hơn.

Phần tử FORM

Phần tử

được sử dụng để tạo một vùng trên trang như một biểu mẫu. Nó chỉ ra cách bố trí của biểu mẫu. Các thuộc tính bao gồm:

Thuộc tính	Mô tả
ACCEPT	Thuộc tính này xác định danh sách các kiểu MIME được máy chủ nhận ra, trong đó có chứa kịch bản (script) để xử lý biểu mẫu. Cú pháp là `ACCEPT = "Internet media type"`
ACTIO N	Thuộc tính này xác định vị trí của script s& #7869; xử lý biểu mẫu hoàn chỉnh và đã được gửi đi . Cú pháp là: `ACTION = "URL"`
METHOD	Thuộc tính này xác định phương thức dữ liệu được gửi đến máy chủ. Nó cũng xác định giao thức được sử dụng khi máy khách gửi dữ liệu lên cho máy chủ. Nếu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi có chứa địa chỉ URL của trang , một dấu chấm hỏi và các giá trị do biểu mẫu tạo ra. Trình duyệt sẽ trả lại câu hỏi cho kịch bản được xác định trong URL để xử lý. Nếu giá trị là POST, thì dữ liệu trên biểu mẫu được gửi đến kịch bản xử lý như một khối dữ liệu. Người ta không sử dụng chuỗi câu hỏi. Cú pháp là `METHOD = (GET \| POST ).`

Để đưa một biểu mẫu đến chương trình “xử lý biểu mẫu” sử dụng theo phương thức POST

          ...form contents...

Các phần tử nhập của HTML

Khi tạo một biểu mẫu, ta có thể đặt các điều khiển lên biểu mẫu để nhận dữ liệu nhập vào từ người dùng. Các điều khiển này được sử dụng với phần tử

. Tuy nhiên, ta cũng có thể sử dụng chúng ở bên ngoài biểu mẫu để tạo các giao diện người dùng.

Phần tử INPUT

Phần tử xác định loại và sự xuất hiện của điều khiển trên biểu mẫu. Các thuộc tính của phần tử này là:

Attributes	Description
TYPE	Thuộc tính này xác định loại phần tử. Ta có thể chọn một trong các lựa chọn: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN và BUTTON. Mặc định là TEXT
NAME	Thuộc tính này chỉ tên của điều khiển. Ví dụ nếu có nhiều hộp văn bản (text box) trên một biểu mẫu thì bạn nên sử dụng tên để xác định chúng – TEXT1, TEXT2 hoặc bất kỳ tên nào mình chọn. Phạm vi hoạt đông của thuộc tính NAME nằm trong phần tử FORM
VALUE	Đây là một thuộc tính tùy chọn, nó xác định giá trị khởi tạo của điều khiển. Tuy nhiên, đối với kiểu (TYPE) là RADIO thì ta phải xác định cho nó một giá trị.
SIZE	Thuộc tính này xác định độ rộng ban đầu của điều khiển. Đối với kiểu là TEXT hay PASSWORD thì kích thước được xác định theo ký tự. Đối với các loại phần tử nhập khác, độ rộng được xác định bằng điểm (pixels)
MAXLENGTH	Thuộc tính này được sử dụng để xác định số ký tự lớn nhất có thể nhập vào phần tử TEXT hoặc PASSWORD. Mặc định là không giới hạn.
CHECKED	Đây là thuộc tính logic để xác định nút có được chọn hay không. Thụôc tính này được sử dụng khi kiểu nhập là RADIO hay CHECKBOX
SRC	`SRC = "URL"` .Thuộc tính này được dùng khi ta muốn sử dụng một ảnh trong kiểu INPUT. Nó xác định vị trí của ảnh

Phần này ta sẽ thảo luận về các loại phần tử nhập cùng với một số đặc t& #237;nh và sự kiện thường dùng.

Nút bấm

Loại này tạo ra một điều khiển nút (button)

Tên	Mô tả
NAME	Thiết lập hoặc truy xuất tên của điều khiển
SIZE	Thiết lập hoặc truy xuất kích thước của điều khiển
TYPE	Truy xuất loại điều khiển bên trong được biểu diễn bởi
VALUE	Thiết lập hoặc truy xuất giá trị của nút `.`

Văn bản

Loại này tạo một điều khiển nhập văn bản có một dòng. Thuộc tính SIZE xác định số ký tự có thể hiển thị trong phần tử. Thuộc tính MAXLENGTH xác định số ký tự tối đa có thể nhập vào phần tử này.

Giá trị Value ở đây để hiển thị nội dung ban đầu của văn bản và để truy xuất văn bản khi biểu mẫu được gửi đi

Checkbox (Hộp kiểm)

Loại này tạo ra một điều khiển checkbox. Người dùng có thể chọn một hoặc nhiều checkbox. Khi một phần tử checkbox được chọn, thì cặp tên/giá trị được nhận cùng với biểu mẫu. Giá trị mặc định của checkbox là bật (on) . Phần tử checkbox là một phần tử trên dòng và không cần thẻ đóng.

Tên	Mô tả
CHECKED	Thiết lập hoặc truy xuất trạng thái của checkbox
NAME	Thiết lập hoặc truy xuất tên của điều khiển
SIZE	Thiết lập hoặc truy xuất kích thước của điều khiển
STATUS	Thiết lập hoặc truy xuất trạng thái xem checkbox có được chọn hay không
TYPE	Truy xuất loại điều khiển, sử dụng `.`
VALUE	Thiết lập hoặc truy xuất giá trị của checkbox

Radio

Loại này tạo ra điều khiển kiểu nút radio. Một điều khiển kiểu nút radio (radio button control) được sử dụng đối với các tập giá trị loại trừ lẫn nhau. Các điều khiển radio trong một nhóm phải có cùng tên. Vào một thời điểm, người dùng chỉ có thể chọn một lựa chọn. Chỉ có nút radio được chọn trong nhóm mới tạo tên cặp giá trị tên/value trong dữ liệu được nhận. Các nút radio nên đặt thuộc thuộc tính giá trị.

Tên	Mô tả
CHECKED	Thiết lập hoặc truy xuất trạng thái của nút radio
NAME	Thiết lập hoặc truy xuất tên của điều khiển
SIZE	Thiết lập hoặc truy xuất kích thước của điều khiển
STATUS	Thiết lập hoặc truy xuất trạng thái xem nút radio có được chọn hay không
TYPE	Truy xuất loại điều khiển, sử dụng `.`
VALUE	Thiết lập hoặc truy xuất giá trị của radio

Male

Submit

Loại này tạo ra một nút submit. Khi người dùng nhấp vào nút Submin, biểu mẫu được chuyển đến vị trí được xác định trong thuộc tính ACTION. Cặp tên/giá trị của nút submit được nhận cùng với biểu mẫu.

Ảnh

Điều khiển này tạo ra một nút submit dạng ảnh. Giá trị của thuộc tính SRC xác định URL của ảnh được đặt trong nút ấy. Khi người dùng nhấp vào điều khiển ảnh này, biểu mẫu được chuyển đi để xử lý. Tọa độ x và y (được đo bằng điểm) tại vị trí nhấp chuột được chuyển đến máy chủ với định dạng sau

Name.x = valueofx

Name.y = valueofy

Trong đó, 'name' là tên của điều khiển

Ta có thể sử dụng nhiều nút submit với các hình ảnh khác nhau thay vì một nút submit chỉ có một hình. Nếu cần trình bày nhiều ảnh ta có thể sử dụng bản đồ ảnh.

Reset

Điều khiển này tạo ra nút reset. Khi người dùng nhấp vào nút này, các giá trị của tất cả các điều khiển được tái thiết lập trở về giá trị ban đầu, được xác định trong các giá trị thuộc tính của chúng

Ví dụ sau thể hiện việc sử dụng nhiều kiểu nhập khác nhau.

     	          Sample Form                               Sample Stock Survey         Describe your investment experience
                      beginner             intermediate             expert         
         Types of Investments you make
                      INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" 		 			            VALUE="CheckBox-0">Individual Stocks             Options             Mutual Funds
         What is your stock pick for this year?

Phần tử TextArea (vùng văn bản)

Loại này tạo ra một điều khiển nhập văn bản trên nhiều dòng so với hộp văn bản nhập một dòng. Ta phải xác định kích thước của textarea. Ta cũng phải xác định số dòng, số cột trong textarea. Tuy nhiên, ta phải kết thúc phần tử với thẻ đóng

Tên Mô tả

COLS Truy xuất độ rộng của textarea

ROWS

Thiết lập hoặc truy xuất số hàng ngang trong

Phần tử BUTTON (Nút bấm)

Điều khiển này tạo ra điều khiển button. Khi người dùng nhấp vào nút Submit, biểu mẫu được nhận để xử lý. Cặp tên/giá trị của nút submit được nhận cùng với biểu mẫu.

Thuộc tính	Mô tả
NAME	Gán tên cho nút
VALUE	Gán giá trị cho nút
TYPE	Xác định loại nút. Các giá trị có thể là: Submit – tạo nút nhận biểu mẫu khi được nhấp vàoButton – Tạo nút kích hoạt một script khi được kích vào Reset – tạo nút thiết lập lại (reset) biểu mẫu và các giá trị của các điều khiển trong biểu mẫu

Một nút (BUTTON) có loại là submit (type=submit) giống như một phần tử INPUT của loại nút. Sự khác nhau là ở chỗ khi phần tử BUTTON được nhấp vào thì cặp tên/giá trị được nhận cùng biểu mẫu. Một nút (BUTTON) có loại là submit cũng chứa một ảnh và giống một phần tử INPUT có loại là ảnh . Sự khác nhau là ở chỗ phần tử INPUT có dạng một ảnh “phẳng” trong khi phần tử BUTTON thì hiển thị như một nút có hiệu ứng lên / xuống khi nhấp vào.

Ví dụ sau minh họa cho việc sử dụng phần tử TEXTAREA và BUTTON

    	 Sample Form    	 	Sample Stock Survey 	Any Investment Advice for others?

                                       Phần tử lựa chọn (Select)             
           
           Phần tử SELECT được sử dụng để hiển thị một danh sách các lựa chọn cho người dùng. Mỗi lựa chọn được biểu diễn bởi phần tử OPTION. Một phần tử SELECT phải chứa ít nhất một phần tử OPTION. Thành phần được chọn lựa sẽ hiển thị với màu khác so với các thành phần còn lại.
                                                                    Thuộc tính                                                           Mô tả                                    
                                    NAME                    Gán tên cho phần tử. Khi biểu mẫu được gửi đi, thuộc tính tên được gán với giá trị chọn lựa                  
                                    SIZE                    Nếu có nhiều sự chọn lựa, người dùng sử dụng cuộn, thuộc tính này xác định số dòng trong danh sách được hiển thị.                  
                                    MULTIPLE                    Là thuộc tính logic cho phép người dùng chọn một hoặc nhiều chọn lựa.                  
               
           Mỗi lựa chọn trong hộp chọn được lấy giá trị thông qua mô tả văn bản củả nó, xem nó có được chọn hay không.
           Mảng Option được tạo ra theo danh sách lựa chọn trong phần tử SELECT. Mỗi lựa chọn có thuộc   tính Text và Selected cho phép chúng ta kiểm tra tùy chọn đó có được chọn hay không và truy xuất văn bản của lựa chọn theo thứ tự. Bây giờ ta có thể kiểm tra mỗi phần tử trong mảng và xác nhận nó.
                                          	 Sample Form    
 			Sample Stock Survey  	How do you buy your stocks? 		
 	


 		 	
 	     
           
           Phần tử OPTGROUP được sử dụng để nhóm các lựa chọn vào một cây phân cấp. Ví dụ, bảng nội dung có thể có tên các chương. Các chủ đề và chủ đề con trong một chương có thể được nhóm vào chương đó.
                                                                    Thuộc tính                                                           Mô tả                                    
                                    SELECTED                    Đây là thuộc tính logic sử dụng để chọn trước một tùy chọn.                  
                                    VALUE                    Xác định giá trị được nhận vào cho tùy chọn được chọn. Giá trị này được gán với tên của phầ̀n tử SELECT. Nội dung của phần tử OPTION là giá trị mặc định                  
                                    LABEL                    Xác định văn bản hiển thị cho một tùy chọn.                  
               
                   Using the Option Group           	                
    
                                                             Kết quả ví dụ 13
 		  
                                       Phần tử LABEL (Nhãn)             
           
           Phần tử LABEL được sử dụng để gắn thông tin vào các phần tử điều khiển. Ví dụ, phần tử TEXT không có nhãn để xác định rõ nó. Ta có thể gán nhãn vào phần tử TEXT khi trang hiển thị. Ta phải xác định thuộc tính ID của điều khiển mà nó được gán vào.
                      
                                                                    Using Labels       Personal Information
     
               		First name:  		

 		Last name:  		

		          
      
     
                                       Kết quả ví dụ 14
 		   
                  Tạo biểu mẫu 
                      Chúng ta đã thảo luận về phần tử 
 và các điều khiển có thể thêm vào biểu mẫu để nhận thông tin người dùng. Trong phần này, chúng ta sẽ tạo một biểu mẫu để nhận thông tin về một người xin việc. Các nút RESET và SUBMIT thực hiện các công việc cần thiết.
                      
         Job application         Application Form
      

                                          Name:                   
                  
Area of Interest                  

                  Web Designer                  Web Administrator                  Web Developer                  
Experience                                    
                  
Comments                  
                  Type your comments here.                  
                  
Send acknowledgement                  
                 
                        
                  		   
     
                                                                         Kết quả của ví dụ 15
 		   
           Khi có nhiều phần tử trong một form, chúng ta cần phải điều khiển chúng. Sau đây là các thuộc tính để điều khiển các phần tử
                                       Thiết lập tiêu điểm (Focus)             
           
           Một phần tử trở thành hoạt động khi nó nhận tiêu điểm. Ví dụ, để nhập văn bản vào phần tử TEXT, tiêu điểm phải nằm trên phần tử đó. Khi phần tử mất tiêu điểm, nó sẽ không hoạt động nữa. Cách đơn giản nhất để đặt tiêu điểm cho phần tử là ta kích vào nó bằng cách sử dụng chuột, joystick ... hoặc dùng bàn phím để đặt.
                                       Thứ tự tab              
           
           Thuộc tính tabindex của một phần tử xác định trình tự phần tử nhận tiêu điểm thông qua bàn phím. Ở đây bao gồm các phần tử được lồng vào các phần tử khác. Giá trị có thể là bất cứ số nào giữa 0 và 32767. Tiêu điểm bắt đầu từ phần tử có giá trị tabindex thấp nhất. Nếu ta gán cùng một giá trị tabindex cho hơn một phần tử, thì các phần tử nhận tiêu điểm theo thứ tự nó xuất hiện trong tài liệu.
                      
Nếu phần tử nào không hỗ trợ thuộc tính tabindex, nó sẽ là phần tử nhận tiêu điểm cuối cùng. Nếu ta vô hiệu hóa một phần tử, nó sẽ không được liệt kê vào thứ tự tab – và nó sẽ không nhận được tiêu điểm.
                                             Web Designer        
 	   
                                       Phím truy cập (Access Keys)             
           
           Thuộc tính này được sử dụng để gán phím truy cập cho phần tử. Phím truy cập là một ký tự và thường được sử dụng cùng với phím ALT. Khi người dùng nhấn phím truy cập, phần tử được xác định sẽ nhận tiêu điểm và bắt đầu hoạt động.
                                             Name:            Type your comments here     
 	
                                       Phần tử vô hiệu hóa (Disabling Elements)             
           
           Nếu làm việc với trình soạn thảo văn bản, ta sẽ thấy rằng nếu không mở tài liệu nào thì các tùy chọn lưu và định dạng sẽ bị vô hiệu hóa. Đối với trang Web, ta có thể vô hiệu hóa các phần tử hoặc để ở trạng thái chỉ đọc (read-only) nếu không muốn người dùng truy cập chúng. Ví dụ, khi hiển thị một biểu mẫu, ta có thể vô hiệu hóa nút “Submit” cho đến khi người dùng nhập dữ liệu vào. Thuộc tính vô hiệu hóa được sử dụng để điều khiển truy cập một phần tử. Khi một phần tử bị vô hiệu hóa, nó không được liệt kê trong thứ tự tab. Do vậy, điều khiển không nhận được tiêu điểm và cuối cùng là các giá trị của điều khiển bị vô hiệu hóa không được chuyển đi cùng với biểu mẫu. Một điều khiển bị vô hiệu hóa có thể được kích hoạt nhờ các script lúc thực hiện.
                                                 
 	  
         
              Khung (Frame)
                  Khung chia một cửa sổ trình duyệt thành nhiều vùng riêng biệt, mà mỗi vùng có thể hiển thị một trang riêng biệt có thể cuốn được. Mỗi khung là một cửa sổ trong cửa sổ chính. Ví dụ, ta có thể sử dụng ba khung trong trang Web, một làm biểu ngữ (banner), một làm menu điều hướng và một để hiển thị dữ liệu. Mỗi khung có thể được tạo, thay đổi và cuốn độc lập nhau.
                                          Khung trong trang
                  Tại sao sử dụng khung ?
                      Một trang có thể có một hoặc nhiều khung. Một số lý do sử dụng khung:
                        Hiển thị một biểu tượng (logo) hoặc thông tin tĩnh trên một vị trị cố định trên trang Web
           
                        Đối với bảng nội dung trong trang mà ở đó người dùng có thể kích vào và di chuyển quanh web site mà không cần phải liên tục quay lại trang nội dung. 
           
                        Nhiều cách hiển thị cho phép người thiết kế giữ một số thông tin tĩnh nào đó trong khi cuộn hay thao tác đối với những nội dung khác trên trang Web
           
           Tuy nhiên, mặt hạn chế của việc sử dụng khung trong trang Web là: không phải tất cả các trình duyệt đều hỗ trợ khung, ví dụ, IE phiên bản 2.0 hoặc trước đó và Netscape 1.2 hoặc trước đó. Để nội dung vẫn hợp lệ mà người sử dụng không cần quan tâm đến trình duyệt có hỗ trợ khung hay không, người thiết kế cần phải cung cấp một cách khác để truy cập vào nội dung.
         
         Sử dụng khung
                      Một tài liệu HTML chuẩn có phần HEAD và BODY. Một tài liệu HTML sử dụng khung thì có phần HEAD và phần FRAMESET. Phần FRAMESET xác định cách trình bày trong cửa sổ người dùng. Ta không thể sử dụng phần tử BODY và FRAMESET cùng với nhau. Trình duyệt chỉ nhận phần tử đầu tiên xuất hiện trong tài liệu và bỏ qua phần tử sau. Nghĩa là, nếu bạn sử dụng phần tử BODY, thì phần tử FRAMESET sau đó sẽ bị bỏ qua và ngược lại.
           Khung được tạo ra bằng cách sử dụng phần tử FRAMESET. Các thuộc tính như sau:
                                                                    Thuộc tính                                                           Mô tả                                    
                                    ROWS                    Xác định độ rộng của khung, được tính theo điểm(pixels), phần trăm hoặc độ rộng tương đối. Giá trị mặc định là 100%, nghĩa là một dòng                  
                                    COLS                    Xác định độ cao của khung, được tính theo điểm(pixels), phần trăm hoặc độ cao tương đối. Giá trị mặc định là 100%. Nó xác định chỉ có một cột                  
               
           Phần tử FRAME xác định hình thức và nội dung của một khung trong FRAMESET. Ví dụ sau đây tạo hai khung bằng nhau, chia đôi cửa sổ.
                    Two Equal Frames                         
              Kết quả ví dụ 19
                                                                             Kết quả của ví dụ 19
                        File x.html và y.html được lưu cùng thư mục với file .html chính ý           
 		  
           Các thuộc tính của FRAME bao gồm:
                                                                    Thuộc tính                                                           Mô tả                                    
                                    NAME                    Thuộc tính này gán tên cho khung hiện thời                  
                                    SRC                    Thuộc tính này xác định vị trí tài liệu ban đầu được chứa trong khung                  
                                    NORESIZE                    Đây là thuộc tính logic. Nó quy định cửa sổ khung không được thay đổi kích thước                  
                                    SCROLLING                    Thuộc tính này xác định kiểu cuộn cho cửa sổ khung. Các giá trị có thể là:Auto - Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc địnhYes - Luôn luôn xuất hiện thanh cuộn trong cửa sổ của khung
No - Không xuất hiện thanh cuộn trong cửa sổ của khung                  
                                    FRAMEBORDER                    Xác định viền của khung. Các giá trị có thể là:1 - Là giá trị mặc định. Có sự phân cách giữa khung hiện thời với các khung xung quanh0 - Không có sự phân cách giữa khung hiện thời với các khung lân cận. Tuy nhiên, nếu các khung lân cận có thiết lập thì vẫn xuất hiện sự phân cách này.                  
                                    MARGINWIDTH                    Xác định khoảng cách giữa nội dung trong khung với lề trái và lề phải của khung. Giá trị phải lớn hơn một                  
                                    MARGINHEIGHT                    Xác định khoảng cách giữa nội dung trong khung với lề trên và lề dưới của khung. Giá trị phải lớn hơn một                  
               
           Ta không thể đóng cửa sổ của khung. Khung được đóng khi cửa sổ tạo ra nó bị đóng lại. Khung không có thanh trạng thái vì vậy ta phải sử dụng thanh trạng thái của khung chính trong tài liệu.
                              Scrolling in Frames   		 		      
 			                                                     Kết quả của ví dụ 20 
 			
 			                   Resizing Frames                    			 			                         Kết quả của ví dụ 21
 		   
           Đoạn mã sau tạo 3 cột: Cột 2 có độ rộng là 250 pixel, cột 1 chiếm 25% khoảng còn lại và cột 3 chiếm 75% khoảng còn lại
                              Using Frames   		 		 		      
                                                                           Kết quả của ví dụ 22
 		  
           Chú ý trong ví dụ 9, ta sử dụng phần tử FRAMESET lồng nhau (Nested framesets). Ta có thể tạo ra các frameset (tập khung) lồng nhau ở bất kỳ mức nào như ví dụ minh họa dưới đây:
                               Nested Frames   		 		 		 	 		 	 	 	 		      
                                                                           Kết quả của ví dụ 23
 		  
                                       Liên kết các khung             
           
           Khi tạo liên kết trong trang Web, ta có thể thiết lập một khung như một mục tiêu của liên kết (link). Trình duyệt tuân theo các bước sau:
                        Nếu ta xác định một khung trong thuộc tính đích (TARGET) của phần tử, thì tài liệu được phần tử chỉ ra sẽ được tải vào khung đó khi phần tử được kích hoạt.
           
                        Nếu thuộc tính TARGET không được thiết lập thì thuộc tính TARGET của phần tử BASE sẽ được sử dụng để xác định khung
           
                      
               6c2e  Nếu cả phần tử và phần tử BASE không đề cập đến TARGET, thì tài liệu được tải vào khung chứa phần tử đó.
           
                        Nếu không tìm thấy khung thì trình duyệt tạo một cửa sổ và khung mới sau đó tải tài liệu vào khung mới này. 
           
           Thuộc tính TARGET được sử dụng để xác định tên khung mà tài liệu được mở trong đó. Khi tạo khung, ta cần phải đặt thuộc tính tên. Tên này được dùng khi tạo liên kết. Sau khi thay đổi nội dung của một khung thì định nghĩa frameset ban đầu bị mất đi. Nếu có nhiều liên kết đến cùng một đích, ta có thể thiết lập một TARGET mặc định trong phần tử BASE . Sau đó, việc xác định thuộc tính TARGET trong mỗi phần tử sẽ không cần thiết nữa.
                                              Link.html                                 The file, X
            
The file, Y            
 
                              Kết quả của ví dụ 24
                      		  
                                                             Phần tử NOFRAMES              
           
           Nếu trình duyệt không hỗ trợ khung, với tư cách là người phát triển ứng dụng ta nên cung cấp một cách khác để hiển thị nội dung. Phần tử NOFRAMES được sử dụng để làm việc đó. Nó chỉ hoạt động trong trình duyệt không hỗ trợ khung.
                                                                                                                                                        Frames are not being displayed. Click here <A href='main.htm'>for a non-frames version</A>                                                
 	
         
          Phần tử IFRAME – khung trên dòng (inline frame)
                      Phần tử IFRAME được sử dụng để tạo khung trên dòng (inline frame) hay khung nổi (floating frame). Ta có thể tạo và chèn một khung vào một khối văn bản. Khi trình duyệt không hỗ trợ khung thì nội dung nằm trong thẻ IFRAME bị trả lại. Khung trên dòng (inline frame) không thể thay đổi kích thước.
                                                                    Thuộc tính                                                           Mô tả                                    
                                    NAME                    Gán tên cho khung hiện thời                  
                                    WIDTH                    Xác định độ rộng của khung trên dòng                  
                                    HEIGHT                    Xác định chiều cao của khung trên dòng                  
               
                      It has been good fun. You have been learning about frames        

         [The browser does not support frames or is currently configured not to display frames. These are the <A href='x.html'>contents</A>]                
        The above is an inline frame    
                                                              Kết quả của ví dụ 26(Trình duyệt có hỗ trợ khung)
 		  
         
       
          Tóm tắt bài học
                       Form HTML là một phần của tài liệu có chứa các phần tử đặt biệt gọi là các điều khiển
       
                Các điều khiển được sử dụng để nhận thông tin từ người dùng và cung cấp một số tương tác
       
                Phần tử  được sử dụng để tạo vùng trên trang web như là một biểu mẫu
       
                Phần tử  xác định kiểu và hình thức của điều khiển để hiển thị trên biểu mẫu
       
                Phần tử TEXTAREA tạo một hộp nhập văn bản có nhiều dòng so với hộp nhập văn bản có một dòng.
       
                Khi người dùng kích vào nút Submit, biểu mẫu được nhận để xử lý.
       
                Phần tử SELECT được sử dụng để hiển thị một danh sách lựa chọn cho người dùng.
       
                Phần tử OPTGROUP được sử dụng để nhóm các lựa chọn vào một cây phân cấp.
       
                Phần tử LABEL được sử dụng để gắn thông tin vào các phần tử điều khiển
       
                Một phần tử được kích hoạt khi nó nhận tiêu điểm
       
                Thuộc tính tabindex của một phần tử xác định thứ tự nhận tiêu điểm thông qua bàn phím
       
                Thuộc tính phím truy nhập được sử dụng để gán một phím tắt cho một phần tử
       
                Trong trang web, ta có thể vô hiệu hóa phần tử hoặc cho nó thuộc tính chỉ đọc nếu không muốn người dùng truy cập vào chúng.
       
                Khung chia một cửa sổ trình duyệt thành những vùng riêng biệt, mỗi vùng hiển thị một trang riêng có thể cuốn được.
       
                Một tài liệu HTML sử dụng khung có phần HEAD và FRAMESET. Phần FRAMESET xác định cách hiển thị trên cửa sổ người dùng.
       
                Chúng ta không thể sử dụng phần tử BODY và FRAMESET đồng thời.
       
                Khi tạo liên kết trên trang Web, ta có thể thiết lập khung như là đích của liên kết.
       
                Phần tử NOFRAMES được sử dụng để xác định cách hiển thị nội dung nếu trình duyệt không hỗ trợ khung.
       
                Phần tử IFRAME được sử dụng để xác định khung trên dòng hay khung nổi.
       
     
     Ôn tập
                       Điền vào chỗ trống                Một _______ là một phần của tài liệu mà được sử dụng để nhận thông tin nhập vào từ người dùng
         Phần tử _______được sử dụng để tạo một biểu mẫu trên trang Web
         Phần tử _______ được sử dụng đển xác định kiểu và hình thức hiển thị của các điều khiển trên biểu mẫu
         Kiểu _________ INPUT tạo một nút Submit có hình ảnh 
         Phần tử ___________được sử dụng để tạo điều khiển nhập văn bản có nhiều dòng
         Thuộc tính _________ của phần tử xác định vị trí của phần tử trong thứ tự tab (tab order) 
       
 	  
       
                Các câu sau đây Đúng hay Sai:                Phương thức GET được sử dụng để gửi dữ liệu do người dùng nhập vào như một khối dữ liệu tới máy chủ (server)Phương thức GET được sử dụng để gửi thông tin của người dùng đến máy chủ như một khối dữ liệu
         Thuộc tính MAXLENGTH được sử dụng để xác định kích thước của điều khiển TEXT
         Mỗi nút radio trong nhóm nên được đặt cùng tên.
         Một nút kiểu Submit thì giống như một phần tử INPUT kiểu button.
         Một phần tử SELECT phải chứa ít nhất một phần tử OPTION
         Một khung có thể được chỉnh sửa độc lập với những khung khác trong tài liệu HTML
         Phần tử FRAMESET phải được khai báo sau phần tử BODY
         Thuộc tính RESIZE được sử dụng để thay đổi kích thước của khung trên dòng
       
 	  
       
     
     Tự thực hành
         Tạo một biểu mẫu để nhận các thông tin chi tiết sau từ người dùng:                Name – tên 
         Address and telephone number – Địa chỉ và số điện thoại
         Sex, Age – Giới tính, tuổi
         Spoken languages – Ngôn ngữ (có ba chọn lựa)
       
 	  
       
                Cho người dùng chọn reset hay submit 
         Tạo một biểu mẫu hiển thị danh sách các cuốn sách. Nhận thông tin đặt hàng chi tiết từ người dùng:                Name - tên
         Postal Address and telephone number – Địa chỉ đường bưu điện và̀ số điện thoại
         Payment options – demand draft or credit card -Phương thức thanh toán – tiền mặt hay thẻ tài khoản
       
                Cho người dùng xác nhận hoặc hủy bỏ đơn đặt hàng
                
 	  
       
        Tạo một biểu mẫu đặt mua báo dài hạn có các thông tin sau:          Personal Information – thông tin người dùng
         Last Name, First Name
         Address – Địa chỉ
         City, State, Pin code - 
         Telephone number
         Báo dài hạn có 5 chọn lựa. Người dùng có thể chọn hơn một chọn lựa.
         Thời gian đặt báo – 1 năm, 3 năm, 5 năm
         Phương thức thanh toán – tiền mặt hay thẻ 
         Cho người dùng xác nhận hoặc hủy bỏ đơn đặt hàng
 
 
          Tạo một tài liệu HTML có khung gồm:          một cột và hai dòng. Hiển thị các tài liệu khác nhau trong mỗi khung.
         Tạo một tài liệu có ba cột. Cột 2 có ba khung trên ba dòng. Hiển thị văn bản trên hai cột đầu tiên. Hiển thị một ảnh trong cột thứ 3.
       
 
       Trang này được chủ ý để trống