1 Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 2 Sat Nov 03, 2012 8:32 pm
Admin
Admin
Để gắn nhãn cho một thành phần điều khiển mà không dùng thuộc
tính FOR, thành phần điều khiẻn phải nằm bên trong thành phần
LABEL. Lúc này, một thành phần LABEL chỉ chứa một thành phần
điều khiển. Các chữ làm nhãn có thể đặt trước hay sau thành
phần điều khiển.
e. Ô đánh dấu – CheckBoxes
Ô đánh dấu, để đánh dấu một hoặc vài lựa chọn. Ô dánh dấu có dạng như sau:
Công thức viết:
Ví dụ:
Khác với nút radio bạn có thể đánh dấu chọn nhiều ô đồng thời trong cùng một nhóm ô đánh dấu.
Ví dụ công thức để tạo ra checkbox đầu tiên ở trên là:
Trong một nhóm ô đánh dấu, một số ô có thể có thuộc tính CHECKED và được đánh dấu chọn sẵn khi mở trang Web.
f. Danh sách lựa chọn – thành phần SELECT
Công thức để tạo menu là:
trong đó thuộc tính SIZE xác định số mục chọn có thể nhìn
thấy trong cửa sổ cuộn. OPTION SELECTED xác định lựa chọn mặc
định ban đầu.
Có thể tạo menu buông xuống có dạng như sau nếu ta đặt thuộc tính SIZE=1:
Để tạo bảng chọn kiểu này chỉ cần bỏ thuộc tính SIZE trong đoạn mã trên.
Mặc định, danh sách chọn SELECT chỉ cho phép chọn một mục
chọn. Thuộc tính MULTIPLE cho phép đánh dấu chọn nhiều mục.
g. Hộp chọn tệp
Cho phép hiển thị hộp chọn tệp hoặc nhập tên tệp trực tiếp. Ví dụ.
Khi nhấn chuột vào nút Browse thì hộp thoại Choose File sẽ mở và cho phép chọn tệp.
Cách viết:
Khi nhập tên tệp vào trường text hay chọn tệp (bằng nút
Browse) thì tên tệp sẽ được gán cho thuộc tính VALUE của thành
phần này.
h. Nút Send và Clear
Khi người sử dụng đã điền xong thì phải hoặc gửi kết quả đi, hoặc xoá sạch và điền lại từ đầu:
Send - gửi kết quả đi.
Clear - xoá sạch và làm lại từ đầu.
Hai nút để làm việc này có dạng:
Mã để tạo ra hai nút này là:
trong đó hai xâu kí tự trong ngoặc kép Send form, Clear form
gán cho thuộc tính VALUE sẽ hiển thị trên nút tương ứng. Dĩ
nhiên ta có thay bằng xâu nào khác tuỳ ý, chẳng hạn "gửi đi",
"điền lại".
i. Nút nhấn – Push Button
Ngoài hai nút kiểu "Submit" và "Reset" luôn gắn với form và
có chức năng quy định trước như trên, có thể tạo nút nhấn để
gắn với những hành động xử lí khác do ta tự thiết kế. Mã
nguồn để tạo nút nhấn tổng quát kiểu này là.
Tên nút để tham chiếu, còn nhãn nút là nhãn sẽ hiển thị
trên nút. Nếu muốn trang trí một biểu tượng hay hình ảnh trên
nút chỉ cần thay thế phần nhãn nút bằng hình ảnh.
Lưu ý: phải cung cấp dòng chữ thay thế cho thành phần
IMG. Không được gắn một image map với thành phần IMG chứa trong
một thẻ BUTTON.
Để gắn các hàm chức năng xử lí với một nút nhấn, ta dùng
các thuộc tính về sự kiện nội tại của nút như onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout... Phần trình bày về Scripting sẽ nêu rõ vấn đề này.
j. Nút nhấn bằng hình ảnh
Có thể tạo nút nhấn trực tiếp bằng một hình ảnh.
Khi nhấn nút, form được gửi đi cùng với các toạ độ x,y
tính bằng pixel, kể từ góc trên - trái của hình ảnh. Các số
liệu này được gửi đi dưới dạng.
ở đây name là giá trị của thuộc tính name của nút; x-value, y-value là các toạ độ.
Nếu việc xử lí khác nhau phụ thuộc toạ độ của điểm nhấn
chuột mà trình khách không hỗ trợ hình ảnh thì phải dùng
giải pháp khác: dùng nhiều button hoặc image map và script.
k. Các trường ẩn
Các trường ẩn không hiển thị trên form nhưng được dùng để gửi thông tin cho Server.
Ví dụ:
Đoạn mã trên để tạo một liên kết trên trang cho phép NSD nhấn
nút để tới một trang Web tại địa chỉ URL nhất định nào đó
chứ không phải dùng phím BACK.
Một ví dụ nữa là để điền tự động mục Subject trong email có thể dùng một trường ẩn như sau:
Đoạn mã này điền xâu kí tự đã gán cho thuộc tính VALUE vào dòng chủ đề - subject trong email.
l. Nhãn
Thẻ label
Các nút đã có nhãn ngầm định, gán bằng thuộc tính value.
Các thành phần còn lại như text fields, checkboxes, radio
buttons, menus không có nhãn ngầm định. Có thể hiển thị một xâu
kí tự kề bên thích hợp để làm "nhãn" như ta vẫn làm ở trên.
Tuy nhiên, đặc tả HTML có thành phần LABEL để gán nhãn cho các thành phần điều khiển khác.
Cặp thẻ <LABEL>... </LABEL> dùng để định nghĩa thành phần LABEL.
Thuộc tính FOR của thẻ label
Thuộc tính này nhằm gán nhãn cho thành phần điều khiển trỏ
bởi Id. Id là tên định danh của thành phần điều khiển.
Nếu không có thuộc tính for thì ngầm định là gán cho thành phần điều khiển chứa trong cặp thẻ LABEL đang xét.
Có thể nhiều hơn một LABEL cho cùng một thành phần điều khiển.
Ví dụ:
Gắn nhãn không dùng thuộc tính FOR
Để gắn nhãn cho một thành phần điều khiển mà không dùng
thuộc tính FOR, thành phần điều khiẻn phải nằm bên trong thành
phần LABEL. Lúc này, một thành phần LABEL chỉ chứa một thành
phần điều khiển. Các chữ làm nhãn có thể đặt trước hay sau
thành phần điều khiển.
Ví dụ: gán nhãn cho 2 thành phần text field.
Hết phần 2
Nguồn: Sưu tầm Internet
tính FOR, thành phần điều khiẻn phải nằm bên trong thành phần
LABEL. Lúc này, một thành phần LABEL chỉ chứa một thành phần
điều khiển. Các chữ làm nhãn có thể đặt trước hay sau thành
phần điều khiển.
e. Ô đánh dấu – CheckBoxes
Ô đánh dấu, để đánh dấu một hoặc vài lựa chọn. Ô dánh dấu có dạng như sau:
Công thức viết:
Ví dụ:
Khác với nút radio bạn có thể đánh dấu chọn nhiều ô đồng thời trong cùng một nhóm ô đánh dấu.
Ví dụ công thức để tạo ra checkbox đầu tiên ở trên là:
Trong một nhóm ô đánh dấu, một số ô có thể có thuộc tính CHECKED và được đánh dấu chọn sẵn khi mở trang Web.
f. Danh sách lựa chọn – thành phần SELECT
Công thức để tạo menu là:
trong đó thuộc tính SIZE xác định số mục chọn có thể nhìn
thấy trong cửa sổ cuộn. OPTION SELECTED xác định lựa chọn mặc
định ban đầu.
Có thể tạo menu buông xuống có dạng như sau nếu ta đặt thuộc tính SIZE=1:
Để tạo bảng chọn kiểu này chỉ cần bỏ thuộc tính SIZE trong đoạn mã trên.
Mặc định, danh sách chọn SELECT chỉ cho phép chọn một mục
chọn. Thuộc tính MULTIPLE cho phép đánh dấu chọn nhiều mục.
g. Hộp chọn tệp
Cho phép hiển thị hộp chọn tệp hoặc nhập tên tệp trực tiếp. Ví dụ.
Khi nhấn chuột vào nút Browse thì hộp thoại Choose File sẽ mở và cho phép chọn tệp.
Cách viết:
Khi nhập tên tệp vào trường text hay chọn tệp (bằng nút
Browse) thì tên tệp sẽ được gán cho thuộc tính VALUE của thành
phần này.
h. Nút Send và Clear
Khi người sử dụng đã điền xong thì phải hoặc gửi kết quả đi, hoặc xoá sạch và điền lại từ đầu:
Send - gửi kết quả đi.
Clear - xoá sạch và làm lại từ đầu.
Hai nút để làm việc này có dạng:
Mã để tạo ra hai nút này là:
trong đó hai xâu kí tự trong ngoặc kép Send form, Clear form
gán cho thuộc tính VALUE sẽ hiển thị trên nút tương ứng. Dĩ
nhiên ta có thay bằng xâu nào khác tuỳ ý, chẳng hạn "gửi đi",
"điền lại".
i. Nút nhấn – Push Button
Ngoài hai nút kiểu "Submit" và "Reset" luôn gắn với form và
có chức năng quy định trước như trên, có thể tạo nút nhấn để
gắn với những hành động xử lí khác do ta tự thiết kế. Mã
nguồn để tạo nút nhấn tổng quát kiểu này là.
Tên nút để tham chiếu, còn nhãn nút là nhãn sẽ hiển thị
trên nút. Nếu muốn trang trí một biểu tượng hay hình ảnh trên
nút chỉ cần thay thế phần nhãn nút bằng hình ảnh.
Lưu ý: phải cung cấp dòng chữ thay thế cho thành phần
IMG. Không được gắn một image map với thành phần IMG chứa trong
một thẻ BUTTON.
Để gắn các hàm chức năng xử lí với một nút nhấn, ta dùng
các thuộc tính về sự kiện nội tại của nút như onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout... Phần trình bày về Scripting sẽ nêu rõ vấn đề này.
j. Nút nhấn bằng hình ảnh
Có thể tạo nút nhấn trực tiếp bằng một hình ảnh.
Khi nhấn nút, form được gửi đi cùng với các toạ độ x,y
tính bằng pixel, kể từ góc trên - trái của hình ảnh. Các số
liệu này được gửi đi dưới dạng.
ở đây name là giá trị của thuộc tính name của nút; x-value, y-value là các toạ độ.
Nếu việc xử lí khác nhau phụ thuộc toạ độ của điểm nhấn
chuột mà trình khách không hỗ trợ hình ảnh thì phải dùng
giải pháp khác: dùng nhiều button hoặc image map và script.
k. Các trường ẩn
Các trường ẩn không hiển thị trên form nhưng được dùng để gửi thông tin cho Server.
Ví dụ:
Đoạn mã trên để tạo một liên kết trên trang cho phép NSD nhấn
nút để tới một trang Web tại địa chỉ URL nhất định nào đó
chứ không phải dùng phím BACK.
Một ví dụ nữa là để điền tự động mục Subject trong email có thể dùng một trường ẩn như sau:
Đoạn mã này điền xâu kí tự đã gán cho thuộc tính VALUE vào dòng chủ đề - subject trong email.
l. Nhãn
Thẻ label
Các nút đã có nhãn ngầm định, gán bằng thuộc tính value.
Các thành phần còn lại như text fields, checkboxes, radio
buttons, menus không có nhãn ngầm định. Có thể hiển thị một xâu
kí tự kề bên thích hợp để làm "nhãn" như ta vẫn làm ở trên.
Tuy nhiên, đặc tả HTML có thành phần LABEL để gán nhãn cho các thành phần điều khiển khác.
Cặp thẻ <LABEL>... </LABEL> dùng để định nghĩa thành phần LABEL.
Thuộc tính FOR của thẻ label
Thuộc tính này nhằm gán nhãn cho thành phần điều khiển trỏ
bởi Id. Id là tên định danh của thành phần điều khiển.
Nếu không có thuộc tính for thì ngầm định là gán cho thành phần điều khiển chứa trong cặp thẻ LABEL đang xét.
Có thể nhiều hơn một LABEL cho cùng một thành phần điều khiển.
Ví dụ:
Gắn nhãn không dùng thuộc tính FOR
Để gắn nhãn cho một thành phần điều khiển mà không dùng
thuộc tính FOR, thành phần điều khiẻn phải nằm bên trong thành
phần LABEL. Lúc này, một thành phần LABEL chỉ chứa một thành
phần điều khiển. Các chữ làm nhãn có thể đặt trước hay sau
thành phần điều khiển.
Ví dụ: gán nhãn cho 2 thành phần text field.
Hết phần 2
Nguồn: Sưu tầm Internet