| BÀI HỌC

Trong khi duyệt trang Web, hẳn bạn đã không dưới một lần bạn phải điền một số thông tin vào một mẫu đăng ký (form) nào đó, chẳng hạn như việc đăng ký tạo địa chỉ E-Mail... Bài này sẽ hướng dẫn bạn thực hiện việc chèn các đối tượng Form vào trong trang Web.

Để thực hiện việc này, đơn giản bạn chỉ cần tạo một cặp thẻ <FORM> như sau:

Trong đó formname là tên bạn đặt cho Form để tiện việc gọi tên trong các mã Scirpt. Action là mà lệnh khi nhấn nút Submit (gửi) hay thao tác Submit Form nói chung, thông thường action này là đường dẫn của một file xử lý mà form sẽ gửi đến khi submit. Method là cách đieều khiển dữ liệu gửi đến bạn, giá trị của nó là:

• METHOD=Post: Gửi thông tin đi

• METHOD=get: Lấy thông tin từ cơ sở dữ liệu

Có lẽ bạn sẽ dùng phương pháp Post thường xuyên hơn là phương pháp Get.

Các thẻ Input

Trong Form có rất nhiều loại thẻ tạo các đối tượng của Form, cú pháp để thêm một đối tượng con của Form là:

Trong đó inputname là tên bạn đặt cho đối tượng này để tiện việc gọi tên trong các mã Script. Inputtype là loại đối tượng con như Text hay Button... Nếu chúng không được đặt trong cặp thẻ <FORM> ... </FORM> thì khi Submit Form chúng sẽ không được gửi theo. Do đó nếu bạn không muốn được gửi theo Form khi Submit thì bạn đừng đặt giữa cặp thẻ này. Các kiểu đối tượng này bao gồm:

• BUTTON: Chèn một nút bấm vào trang Web

  <INPUT TYPE=button VALUE="This is a Button">

  
   

• RESET: Nút bấm dùng để xóa nhanh Form

  <INPUT TYPE=reset VALUE="This is a Reset button">

  
   

• SUBMIT: Nút dùng để gửi Form, đây là nút chính của Form. Nếu đang làm việc trong Form mà bạn nhấn Enter thì nút này sẽ được kích hoạt và Form sẽ được gửi.

  <INPUT TYPE=submit VALUE="This is a Submit button">

  
   

• CHECKBOX: Chèn một nút chọn lựa kiểu AND

  <INPUT TYPE=Checkbox NAME=chkTest VALUE="1"> Checkbox 1
  <INPUT TYPE=Checkbox NAME=chkTest VALUE="2" CHECKED> Checkbox 2

  Checkbox 1 Checkbox 2
   

• RADIO: Chèn một nút chọn lựa kiểu OR

  <INPUT TYPE=Radio NAME=radTest VALUE="1"> Nút Radio 1
  <INPUT TYPE=Radio NAME=radTest VALUE="2" CHECKED> Nút Radio 2

  Nút Radio 1 Nút Radio 2

  Để các nút Radio này phụ thuộc lẫn nhau, chúng cần phải có cùng tên NAME nhưng khác nhau bởi giá trị VALUE, chỉ có giá trị được chọn mới được gửi đi khi Submit form.

• HIDDEN: Chèn một đối tượng ẩn trong Form nhưng không thấy trên màn hình. Đây giống như là một biến ẩn để gửi lén về Server mà người đăng ký Form không được biết.

  <INPUT TYPE=hidden NAME=hid VALUE="Giá trị">

• PASSWORD: Chèn ô dùng để nhập Password, các ký tự không sẽ được biểu diễn bằng dấu * nhưng giá trị thực sự của đối tượng này nằm trong thuộc tính VALUE.

  Enter Password: <INPUT TYPE=Password NAME=txtPassword VALUE="abcdef">

  Enter Password:
   

• TEXT: Chèn một ô nhập văn bản lên trang Web. Bạn có thể quy định các thuộc tính của nó như SIZE (chiều rộng của ô theo ký tự), MAXLENGTH (Số ký tự tối đa được nhập trong ô), VALUE (Gán giá trị ban đầu trong ô).

  <INPUT TYPE=text SIZE=50 MAXLENGTH=50 VALUE="Gõ văn bản ở đây">

  
   

• FILE: Chèn một ô và nút bấm dùng để chọn File, đối tượng này bạn thường thấy khi Attach File trong một hộp thư Webmail trên Internet.

  <INPUT TYPE=File NAME=filTest>

TextArea

Ngoài ra còn có một đối tượng khác là TEXTAREA, đây là một hộp văn bản tương tự như Text nhưng nó có thể hiển thị nhiều dòng văn bản hơn. Trong đó thuộc tính COLS chỉ định số cột ký tự theo chiều ngang và ROWS là số hàng ký tự theo chiều dọc.

Gõ văn bản ở đây

Hộp chọn lựa

Và một đối tượng khác cũng không kém phần lý thú là SELECT, đây là một Dropbox dùng để chọn lựa.

Thuộc tính SIZE chỉ định số dòng hiển thị của Dropbox này. Đây là SIZE=1.

Mục con 1 Mục con 2 Mục con 3 Mục con 4

Còn đây là SIZE=3:

Mục con 1 Mục con 2 Mục con 3 Mục con 4

Thẻ SELECT này còn có thuộc tính MULTIPLE, nếu nó được thiết lập, bạn có thể chọn nhiều mục con trong đó (bằng cách rê chuột hay nhấn kèm phím Ctrl hoặc Shift) chứ không phải là 1 như bình thường.

Mục con 1 Mục con 2 Mục con 3 Mục con 4

Để chỉ định một mục con làm đối tượng được chọn mặc định, bạn thêm thuộc tính SELECTED vào trong thẻ <OPTION...>

Mục con 1 Mục con 2 Mục con 3 Mục con 4 Mục con 5 Mục con 6

| THỰC HÀNH

Trên đây là giới thiệu sơ lược các đối tượng của Form và cách thức để chèn các đối tượng đó vào trang Web. Sau đây là một ví dụ nhỏ 9ể bạn tham khảo.

	HTMLStudy
	File     Edit     View     Favorites     Tools     Help
	Mẫu đăng ký Tên của bạn Ngày sinh Giới tính: Nam Nữ Những môn thể thao bạn thích: Bóng đá Bơi lội Bóng bàn Cờ vua Bóng chuyền Khác Nghề nghiệp của bạn: Học sinh Phổ thông Sinh viên Đại học Giáo viên Kỹ sư chuyên ngành Vận động viên Thể thao Chuyên gia về Computer Công nhân Thuộc các ngành khác Một số lời giới thiệu về bạn:
	Done

Lưu ý: Bạn có thể dùng thuộc tính DISABLED trong mổi đối tượng để vô hiệu hóa chúng. Ví dụ: