2 .M ột số tag cơ bản của HTML
4. Form và các thành phần của form
Form thường được dùng như là công cụ hỗ trợ nhập liệu cho các ứng dụng trên Web, tương tự như các hộp thoại (dialog) trong các ứng dụng trên Windows. Hoạt động của form thông thường là:
ứng dụng hiển thị form để yêu cầu nhận thông tin từ người dùng, người dùng điền các thông tin và kết thúc việc nhập liệu bằng cách submit form. Sau đó dữ liệu sẽđược chuyển đến các chương trình xử lí tương ứng.
Tag <FORM> được dùng để thiết lập một form nhập liệu. Các thuộc tính chính là: ACTION (được dùng để chỉ định chương trình
nào sẽ xử lí dữ liệu nhập từ form), METHOD (phương thức chuyển dữ liệu), NAME (tên của form – dùng cho các xử lí sau này).
Người dùng nhập dữ liệu cho form thông qua các ô nhập liệu (thường gọi là các controls) như textbox, checkbox, radio button, push button, dropdown listbox, ... Các ô nhập liệu này được đặt trong phần bao quanh bởi cặp tag <FORM> và </FORM>. Khi form
được submit, dữ liệu mà người dùng nhập vào trong các ô nhập liệu này sẽ được chuyển đến chương trình xử lí form theo dạng <tên ô nhập liệu>=<giá trị>. Chính vì vậy mà thuộc tính NAME là thuộc tính rất quan trọng khi khai báo các ô nhập liệu này.
Một khi form được submit, các dữ liệu sẽđược chuyển đến cho chương trình xử lí form theo dạng <tên control>=<giá trị dữ liệu nhập vào>. Người ta dùng dấu “&” để ngăn cách dữ liệu của 2 control khác nhau. Ví dụ sau minh họa một form và dữ liệu khi submit có dạng:
http://localhost/Update.asp?USERID=ledduy&FULLNAME=Le+Dinh +Duy&EMAIL=ledduy@yahoo.com&btnSubmit=Update
<FORM ACTION="Update.asp" METHOD="GET">
<INPUT TYPE="HIDDEN" NAME="USERID" VALUE="ledduy"> <P>Full Name:<INPUT TYPE="TEXT" NAME="FULLNAME" SIZE="25" VALUE="Le Dinh Duy"><BR>
Email: <INPUT TYPE="TEXT" NAME="EMAIL" SIZE="25" VALUE="ledduy@yahoo.com"> <BR>
<INPUT TYPE="SUBMIT" NAME="btnSubmit" VALUE="Update"> </P>
</FORM>
Hình 3. 8 – Cách dữ liệu được chuyển đến trình xử lí form
Một số kí tựđặc biệt sẽđược chuyển đổi trước khi dữ liệu được chuyển đi:
Kí tự nhập vào Kí tự thay thếđược chuyển đi
khoảng trắng +
= %3D
dấu xuống dòng (line feed) %0A về ðầu dòng (carriage return) %0D
% %25
& %38
Để tạo các ô nhập liệu dạng hộp văn bản, nút nhấn, checkbox, radio button, … ta dùng tag <INPUT> và đặt giá trị tương ứng với các loại ô nhập liệu cho thuộc tính TYPE.
4.1. Hộp văn bản (TextBox)
Dùng để nhập dữ liệu trên một dòng. Để tạo ô nhập liệu dạng này, ta chỉ định thuộc tính TYPE=”TEXT” trong tag <INPUT>. Ví dụ
sau minh họa mã HTML dùng để tạo ra một ô nhập liệu dạng hộp văn bản, có tên là USRNAME, kích thước là 25 kí tự, giá trị mặc định là ledduy:
Username: <INPUT TYPE="TEXT" NAME="USRNAME" VALUE="ledduy" SIZE="20" MAXLENGTH="128">
Thuộc tính SIZE dùng để chỉ số kí tự hiển thị trong ô nhập liệu (đây cũng chính là chiều rộng của ô nhập liệu). Thuộc tính MAXLENGTH dùng để chỉ số kí tự tối đa có thểđược nhập.
Khi muốn chỉđịnh dữ liệu nhập vào control dưới dạng mật khẩu (nghĩa là các kí tự nhập vào sẽ không được hiển thị mà thay vào đó là các dấu *), ta chỉđịnh thuộc tính TYPE=”PASSWORD”.Ví dụ:
Password: <INPUT TYPE="PASSW O RD" NAME="USRPASSWORD" VALUE="123456" SIZE="20">
4.2. Nút nhấn (Button)
Khi chỉ định thuộc tính TYPE=”BUTTON” trong tag <INPUT> ta sẽ tạo được một nút nhấn nói chung.
Trong form thông thường có hai loại nút nhấn đặc biệt đó là nút nhấn SUBMIT và nút nhấn RESET. Nút nhấn RESET là nút nhấn mà khi người dùng nhấn chuột vào, các dữ liệu của các ô nhập liệu khác khác đều được đặt về giá trị mặc định lúc khởi tạo. Để tạo ta sẽ chỉ
định thuộc tính TYPE=”RESET” trong tag <INPUT>. Trong khi đó nút nhấn SUBMIT là nút nhấn dùng để kết thúc việc nhập liệu của form.
Để tạo nút nhấn dạng này, ta chỉ định thuộc tính TYPE=”SUBMIT” trong tag <INPUT>.
Giá trị gán cho thuộc tính VALUE chính là nhãn của nút nhấn. Ví dụ sau minh họa việc tạo ra hai nút nhất Submit và Reset: <INPUT TYPE="SUBM IT" NAME="BTNSUBMIT"
VALUE="Submit">
<INPUT TYPE="RESET" NAME="BTNRESET" VALUE="Reset">
4.3. Radio button
Dùng để chọn duy nhất một trong tập các lựa chọn được liệt kê.
Để tạo ra một nhóm các radio button, ta phải chỉ định thuộc tính TYPE=”RADIO” trong tag <INPUT> của các radio button và các radio buttuon này phải có cùng giá trị của thuộc tính NAME.
Khi form được submit, dữ liệu của radio button được chọn (giá trị
gán cho thuộc tính VALUE) sẽ được chuyển đi cùng với tên của radio button này.
Để đặt một radio button là mặc định, ta thêm vào thuộc tính CHECKED. Ví dụ:
Ví dụ sau minh họa lựa chọn giới tính (Sex) thông qua hai radio button Nam (Male) và Nữ (Female):
Sex:<INPUT TYPE="RADIO" NAME="USRSEX" CHECKED VALUE="M">Male
<INPUT TYPE="RADIO" NAME="USRSEX" VALUE="W">Female
4.4. Checkbox
Dùng để chọn một hoặc nhiều trong tập các lựa chọn được đề
nghị.
Khi ta chỉ định thuộc tính TYPE=”CHECKBOX” trong tag <INPUT>, ta sẽ tạo ra được một ô nhập liệu kiểu checkbox. Tương tự như radio button, khi một checkbox được check, giá trị trả về của nó tương ứng với giá trị của thuộc tính VALUE.
Đểđặt một check box là ON, ta thêm vào thuộc tính CHECKED.
Ví dụ sau minh họa một nhóm các checkbox dùng để lấy thông tin về các ngôn ngữđược chọn:
Language: <INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="ENG" CHECKED> English
<INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="FR">French
<INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="JP" CHECKED>Japanese
4.5. Dropdown listbox
Dùng để lựa chọn Ta sử dụng tag <SELECT> để tạo. Mỗi mục của dropdown listbox sẽ được định nghĩa bằng tag <OPTION>. Ví dụ sau minh họa việc chọn một nghề nghiệp đã được liệt kê sẵn:
Occupation: <SELECT SIZE="1" NAME="Occupation"> <OPTION SELECTED VALUE="0">Other</OPTION> <OPTION VALUE="1">Engineer</OPTION> <OPTION VALUE="2">Teacher</OPTION> <OPTION VALUE="3">Doctor</OPTION> <OPTION VALUE="4">Worker</OPTION> </SELECT>
Để đặt một mục chọn trong dropdown listbox là mặc định, ta thêm vào thuộc tính SELECTED.
Để tạo một multi-select listbox ta đặt thêm thuộc tính SIZE và MULTIPLE vào trong tag <SELECT>.
Khi form được submit, dữ liệu của tương ứng với mục chọn (giá trị gán cho thuộc tính VALUE của tag <OPTION>) trong dropdown listbox sẽđược chuyển đi cùng với tên của dropdown listbox này. Ví dụ trong trường hợp ví dụ trên, khi người dùng chọn Worker, giá trị
trả về của ô nhập liệu này sẽ là 4.
4.6. Ô dữ liệu ẩn (Hidden field)
Dùng để lưu trữ các thông tin của form cần thiết cho chương trình xử lí sau này nhưng lại không hiển thị dưới dạng một control nào. Ta lấy ví dụ form cập nhật thông tin một sinh viên. Các thông tin mà người dùng có thể cập nhật thường là Họ tên, Ngày tháng năm sinh, ... sẽđược hiển thị trên các ô nhập liệu của form. Tuy nhiên để
chương trình xử lí form cập nhật này có thể biết cần cập nhật sinh viên nào, cần phải có thêm thông tin về Mã số sinh viên (giả sửđóng vai trò là khóa chính trong cơ sở dữ liệu). Thông tin về Mã số sinh
viên sẽ được lưu trữ trong một ô nhập liệu của form có kiểu là HIDDEN. Thông tin này sẽ không được hiển thị trên màn hình của người dùng nhưng sẽđược chuyển đi mỗi khi form submit.
Để tạo một ô nhập liệu có kiểu là HIDDEN, ta chỉđịnh thuộc tính TYPE=”HIDDEN” trong tag <INPUT> như ví dụ sau:
<INPUT TYPE="HIDDEN" NAME="USRID" VALUE="ledduy">
Mỗi khi form được submit, ngoài các ô nhập liệu đã được hiển thị
trên màn hình, ta cũng sẽ có thêm một ô nhập liệu có tên là “USRID” và giá trị là “ledduy” được chuyển đến cho trình xử lí
4.7. Vùng văn bản (TextArea)
Dùng để nhập dữ liệu trên nhiều dòng. Để tạo ô nhập liệu dạng này ta dùng tag <TEXTAREA>. Dữ liệu nằm giữa cặp tag <TEXTAREA> và </TEXTAREA> chính là giá trị trả về của control dạng này. Ví dụ:
Other information: <TEXTAREA ROWS="3" NAME="OtherInfo" COLS="20"></TEXTAREA>
Thuộc tính ROWS và COLS dùng để chỉ số dòng và cột của vùng dữ liệu nhập.
Ví dụ sau minh họa một form nhập liệu gồm có đầy đủ các ô nhập liệu đã kểở trên:
<FORM ACTION="URL">
Username: <INPUT TYPE="TEXT" NAME="USRNAME" VALUE="ledduy" SIZE="20" MAXLENGTH="128"> <BR>
Password: <INPUT TYPE="PASSWORD" NAME="USRPASSWORD" VALUE="123456" SIZE="20"><BR>
Sex:<INPUT TYPE="RADIO" NAME="USRSEX" CHECKED VALUE="M">Male
<INPUT TYPE="RADIO" NAME="USRSEX" VALUE="W">Female <BR>
Language: <INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="ENG" CHECKED> English
<INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="FR">French
<INPUT TYPE="CHECKBOX" NAME="USRLANG" VALUE="JP" CHECKED>Japanese<BR>
Occupation: <SELECT SIZE="1" NAME="Occupation"> <OPTION SELECTED VALUE="0">Other</OPTION> <OPTION VALUE="1">Engineer</OPTION> <OPTION VALUE="2">Teacher</OPTION> <OPTION VALUE="3">Doctor</OPTION>
<OPTION VALUE="4">Worker</OPTION> </SELECT> <BR>
Other information: <TEXTAREA ROWS="3" NAME="OtherInfo" COLS="20"></TEXTAREA><P><INPUT TYPE="SUBMIT" NAME="BTNSUBMIT" VALUE="Submit"> <INPUT TYPE="RESET" NAME="BTNRESET" VALUE=" Reset "></P>
</FORM>
Hình 3. 9 – Minh họa một form nhập liệu