Bạn muốn viết một trang Web?

Bài 8. Forms

Mở đầu Bài học Phần kết

Form là một mẫu văn bản dùng để thu thập thông tin, chẳng hạn như hồ sơ xin việc làm, mẫu thăm dò ý kiến v.v... Bạn hãy click vào liên kết dưới đây để xem một ví dụ về form:

Ví dụ về form

Bạn hãy thử điền vào form trên đây. Sau khi điền xong bạn có thể click nút "Nộp hồ sơ" để gửi hồ sơ đi. Tuy nhiên, những gì diễn ra sau đó sẽ phụ thuộc vào cấu hình browser và email trên máy tính bạn đang dùng.


Trong bài này, tôi sẽ hướng dẫn bạn cách viết một form tương tự như vậy.

Bạn hãy mở trang khuon.html trong Notepad và thêm vào phần BODY các tags <FORM></FORM>:

<FORM>
</FORM>

<FORM></FORM> là các tags cơ bản để tạo nên một form. Trong form có nhiều phần để thu thập thông tin dưới những dạng khác nhau. Tất cả các thành phần của form đều phải đặt giữa các tags cơ bản này.

Save thay đổi vừa rồi vào file trang08.html trong folder làm việc của bạn.


Trước hết chúng ta tìm hiểu về text input, là một ô trống để viết một dòng văn bản vào. Text input thường được dùng để người đọc viết họ tên, nghề nghiệp v.v... Bạn hãy viết thêm vào trang08.html:

<FORM>
<P>
Họ tên:<BR>
<INPUT TYPE="text" NAME="ho_ten">
</P>

</FORM>

Save và mở trang08.html trong browser, bạn sẽ thấy:

Họ tên:

Như vậy để tạo một text input, bạn dùng tag <INPUT> với attribute TYPE="text". Những gì bạn viết vào ô trống trên đây sẽ là dữ liệu được thu thập.

Còn attribute NAME="name" được dùng để đặt tên cho input, trong đó name là tên do bạn lựa chọn. Bạn nên chọn tên có ý nghĩa rõ ràng, phù hợp với loại thông tin trong input đó. Ở đây text input này được đặt tên là ten_ho, vì nó là nơi viết họ và tên của người làm đơn. Chúng ta phải đặt tên cho mỗi thành phần của form để browser có thể phân biệt được chúng.


Tương tự như trên, bạn tạo thêm một text input tên là nghe_nghiep để người làm đơn viết nghề nghiệp của mình vào. Bạn viết tiếp đoạn sau:

<P>
Nghề nghiệp:<BR>
<INPUT TYPE="text" NAME="nghe_nghiep">
</P>

Trong trang Web của bạn sẽ có thêm một text input nữa:

Nghề nghiệp:


Tiếp theo bạn sẽ tạo một radio button. Radio button thường được dùng để người làm đơn đánh dấu lựa chọn của mình. Trong ví dụ này người làm đơn sẽ đánh dấu vào một trong hai radio buttons để cho biết mình là nam hay nữ. Radio button cũng được tạo ra bằng tag <INPUT>, nhưng với attribute TYPE="radio":

<P>
Nam: <INPUT TYPE="radio" NAME="phai" VALUE="nam">
Nữ: <INPUT TYPE="radio" NAME="phai" VALUE="nu">
</P>

Bạn sẽ thấy:

Nam: Nữ:

Attribute VALUE="value" dùng để gán một giá trị cho radio button. Thông tin được thu thập từ một radio button là giá trị của nó. Giá trị này phải là một từ mô tả rõ ràng ý nghĩa của radio button. Trong trường hợp này, giá trị của hai radio buttons là "nam" và "nu".

Lưu ý là hai tags <INPUT> tạo ra hai radio buttons, nhưng ở đây cả hai radio buttons đều được đặt tên chung là phai (chữ "phái" viết không dấu). Tại sao tôi lại đặt cùng một tên cho hai radio buttons?

Bạn hãy thử đánh dấu vào cả hai radio buttons trên đây đi. Không được, có phải không? Chúng có cùng tên nên không thể cùng một lúc có hai giá trị khác nhau được.


Nếu bây giờ chúng ta đặt tên khác nhau cho hai radio buttons thì sao?

<P>
Nam: <INPUT TYPE="radio" NAME="phai_01" VALUE="nam">
Nữ: <INPUT TYPE="radio" NAME="phai_02" VALUE="nu">
</P>

Bạn sẽ thấy:

Nam: Nữ:

Có vẻ như không có gì khác, nhưng bạn hãy đánh dấu vào cả hai vòng tròn xem sao.


Tiếp theo đây chúng ta tạo một bảng lựa chọn để người làm đơn chọn lứa tuổi của mình. Muốn vậy bạn dùng các tags <SELECT></SELECT> như sau:

<P>
Tuổi:<BR>
<SELECT NAME="tuoi">
   <OPTION VALUE="0-9"> Từ 0 đến 9 tuổi
   <OPTION VALUE="tren9"> Trên 9 tuổi
</SELECT>
</P>

Trong browser bạn sẽ thấy:

Tuổi:

Bảng lựa chọn như trên được gọi là một drop-down list, vì khi bạn click vào mũi tên thì bảng sẽ mở rộng xuống phía dưới (drop down).

Mỗi lựa chọn (option) trong bảng tương ứng với một tag <OPTION VALUE="value">, trong đó value là giá trị của option. Dữ liệu được thu thập từ drop-down list chính là giá trị này. Nó phải là một từ mô tả rõ ràng nội dung của option.

Ngoài ra, ngay sau mỗi option bạn phải viết một phần mô tả để người làm đơn hiểu nội dung của option. Những gì bạn thấy trong drop-down list là phần mô tả này chứ không phải là phần giá trị của option.


Kế tiếp là phần sở thích. Trong phần này, người làm đơn chọn một sở thích bằng cách đánh dấu vào ô vuông bên cạnh. Một ô vuông như thế được gọi là một checkbox. Checkbox cũng được tạo ra bằng tag <INPUT>, nhưng với attribute TYPE="checkbox":

<P>
Sở thích:<BR>
Ăn kem <INPUT TYPE="checkbox" NAME="so_thich_01" VALUE="an_kem"><BR>
Đi siêu thị <INPUT TYPE="checkbox" NAME="so_thich_02" VALUE="di_sieu_thi">
</P>

Bạn sẽ thấy trong browser:

Sở thích:
Ăn kem
Đi siêu thị

Chú ý là tôi đã đặt tên khác nhau cho các checkboxes để người làm đơn có thể đánh dấu vào nhiều mục khác nhau.


Để sắp thẳng hàng các checkboxes, thuận tiện nhất là sắp chúng vào một bảng:

<P>
Sở thích:<BR>
<TABLE BORDER="0" CELLSPACING="10" CELLPADDING="0">
<TR>
<TD>Ăn kem</TD>
<TD><INPUT TYPE="checkbox" NAME="so_thich_01" VALUE="an_kem"></TD>
</TR>
<TR>
<TD>Đi siêu thị</TD>
<TD><INPUT TYPE="checkbox" NAME="so_thich_02" VALUE="di_sieu_thi"></TD>
</TR>
</TABLE>
</P>

Bạn sẽ thấy:

Sở thích:
Ăn kem
Đi siêu thị


Để có thể viết nhiều dòng văn bản vào form, chúng ta dùng text area (nghĩa là vùng văn bản). Trong ví dụ sau đây bạn sẽ tạo một text area để người làm đơn có thể tự do kể về sở thích của mình. Bạn hãy viết thêm:

<P>
Sở thích khác:<BR>
<TEXTAREA NAME="so_thich_khac" COLS="40" ROWS="5">
Nếu có sở thích khác, bạn hãy viết vào đây:
</TEXTAREA>
</P>

Trong browser bạn sẽ thấy một cửa sổ, trong đó người làm đơn có thể viết vào:

Sở thích khác:

Kích thước của text area được quy định bởi các attributes COLS="nc"ROWS="nr", trong đó ncnr là số cột (số ký tự trên một hàng) và số hàng.

Bạn lưu ý là những gì bạn viết ở giữa hai tags <TEXTAREA></TEXTAREA> đều được hiển thị trong text area.


Sau khi form đã được điền xong, tất cả thông tin vẫn chưa được gửi đi. Bạn phải tạo một nút submit (nộp đơn). Người làm đơn sẽ click vào nút này để gửi thông tin đi. Bạn tạo một nút submit như sau:

<P>
<INPUT TYPE="submit" VALUE="Nộp hồ sơ">
</P>

Bạn sẽ thấy trong browser:


Bạn cũng nên tạo một nút reset (trở lại từ đầu) để người làm đơn có thể xóa hết và làm lại từ đầu. Bạn hãy viết thêm phần sau:

<P>
<INPUT TYPE="reset" VALUE="Làm lại">
</P>

Sau khi Save và Refresh bạn sẽ có:


Đến đây thì form của bạn đã gần như hoàn chỉnh rồi, chỉ còn thiếu một chi tiết nữa thôi. Chi tiết này có liên quan tới phương pháp chuyển dữ liệu về cho người thu thập thông tin.

Cách thứ nhất là dùng phần mềm email ngay trên máy tính của người làm đơn. Muốn dùng cách này bạn hãy trở lại tag <FORM> ở phần đầu trang08.html và thêm vào các attributes METHOD, ACTIONENCTYPE như sau:

<FORM METHOD="post" ACTION="mailto:nnn@nnn.nnn.nn" ENCTYPE="text/plain">

Trong đó nnn@nnn.nnn.nn là địa chỉ email sẽ nhận thông tin thu thập được qua form.


Cách thứ hai để chuyển dữ liệu là dùng một phần mềm CGI (CGI Script) đặt trên một máy chủ nào đó. Phần mềm này sẽ tự động chuyển dữ liệu về cho người thu thập thông tin. Chi tiết sẽ khác nhau tùy theo máy chủ, do đó bạn phải liên hệ với người điều hành máy chủ để biết cụ thể.

Sau đây là một ví dụ:

<FORM METHOD="post" ACTION="/cgi-bin/form.cgi">

Trong đó "/cgi-bin/form.cgi" là đường dẫn và tên của CGI Script dùng để xử lý và gửi thông tin.


Thông tin nhận được từ form mà bạn vừa soạn thảo có dạng như trong ví dụ sau:

ho_ten=Le Quynh Anh
nghe_nghiep=Hoc sinh nha tre
phai=nu
tuoi=0-9
so_thich_01=an_kem
so_thich_02=di_sieu_thi
so_thich_khac=Hat, choi lego

previous <-- Trang trước Tiếp theo --> next

Mở đầu Bài:

1 -  2 -  3 -  4 -  5 -  6 -  7 -  8 -  9

Phần kết


nguyen-chi@hcm.vnn.vn