1
Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 Sat Nov 03, 2012 8:30 pm
Admin
![Admin](https://2img.net/u/3016/32/87/44/avatars/1-37.jpg)
Admin
![Admin Admin](https://2img.net/h/i100.photobucket.com/albums/m19/VODANHAFC/admin.gif)
![Loading](https://2img.net/h/farm04.go.vn/photo/data/20111012/10798851/946D73AB7E9F949624C2BF756D1ED794.gif)
Để mở rộng khả năng phục vụ người sử dụng, dịch vụ Web cần
phải sử dụng các ứng dụng khác bên ngoài. Ví dụ NSD yêu cầu
tìm kiếm trong cơ sở dữ liệu, lấy các thông tin tức thời, luôn
được cập nhật.... Để làm được điều này dịch vụ Web phải
chuyển yêu cầu của NSD đến một ứng dụng khác. Ứng dụng này sẽ
thực hiện yêu cầu và trả lại kết quả cho Web server để chuyển
tiếp đến NSD.
1. FORM
1.1 FORM là gì?
a. Chức năng của FORM
Form là một cách để chuyển dữ liệu từ NSD đến cho Web Server
xử lý. Forms được sử dụng rộng rãi trên WWW. Các forms rất
tiện lợi cho người dùng điền các yêu cầu tìm kiếm, các biểu
mẫu điều tra, nhập dữ liệu đầu vào cho các ứng dụng..
Có nhiều thành phần khác nhau (gọi là các điều khiển
control) trong một form. Tuỳ theo yêu cầu giao tiếp với NSD cần
chọn thành phần thích hợp nhất.
Khi tạo form bạn cũng cần phải chỉ rõ cho máy chủ dịch vụ
biết cách xử lý form. Có nhiều loại chương trình ứng dụng khác
nhau trong máy chủ dịch vụ để làm việc này: các chương trình
CGI, ISAPI, các script ASP, JSP, Java Bean, Servlet...
Tạo form là khâu đầu tiên trong việc xây dựng giao tiếp giữa NSD với các ứng dụng Internet / Intranet.
b. Thành phần của FORM
Cặp thẻ để tạo Form là
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_1](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_1.gif)
Mọi thành phần của form như sẽ trình bày dưới đây đều phải nằm trong phạm vi giới hạn bởi cặp thẻ này.
Công thức khung để tạo form là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_1](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_1.gif)
Thuộc tính METHOD chỉ ra phương thức trao đổi dữ liệu giữa
trình duyệt Web và máy chủ Web. Có 2 phương thức là POST, GET.
Đối với form phương thức thường là POST.
Thuộc tính ACTION để thiết lập địa chỉ URL của chương trình sẽ nhận và xử lý dữ liệu gửi từ form.
1.2 Các thành phần trong FORM
Như đã nêu trên, có nhiều loại thành phần khác nhau trong một
Form. Dưới đây sẽ trình bày lần lượt những điểm cơ bản nhất.
a. Hộp văn bản – TextBox
Hộp văn bản là nơi để gõ vào một dữ liệu kiểu xâu kí tự. Hộp văn bản sẽ được hiển thị như sau:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_3](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_3.gif)
Thẻ để tạo ra nó là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_4](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_4.gif)
Trong đó TEXT là từ khoá ứng với kiểu là Text box, Tên là
tên của hộp văn bản này còn n là một số nguyên chỉ ra chiều
dài của trường. Tên phải duy nhất trong trang, không được trùng
nhau.
b. Hộp mật khẩu – Password
Hộp mật khẩu là nơi để gõ vào một mật khẩu kiểu xâu kí tự. Hộp mật khẩu được hiển thị như sau:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_5](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_5.gif)
Thẻ để tạo ra nó là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_6](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_6.gif)
Trong đó PASSWORD là từ khoá để tạo hộp mật khẩu, n là số nguyên chỉ ra chiều dài của hộp.
Hộp mật khẩu khác hộp văn bản ở chỗ khi gõ các kí tự từ
bàn phím thì nó không hiển thị kí tự tương ứng trong khung mà
thay bằng các dấu sao *.
Lưu ý: Việc hiển thị kí tự dấu * để thay thế chỉ có
tác dụng che giấu với người nhìn tại máy cục bộ. Password
vẫn được gửi vào mạng dưới dạng rõ, không mã hoá, có thể bị
xem trộm. Nhiệm vụ mã là của giao thức mạng.
c. Vùng văn bản – Text Windows
Vùng văn bản, để hiển thị nhiều dòng văn bản. Vùng văn bản có dạng như sau:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_7](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_7.gif)
Công thức viết là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_8](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_8.gif)
trong đó, Tên vùng là tên của vùng văn bản, m và n là các
số nguyên, chỉ ra chiều cao và chiều rộng của vùng văn bản.
Nếu bạn để trống phần "đoạn văn bản sẽ hiển thị " thì sẽ
không có văn bản nào xuất hiện trong cửa sổ.
Ví dụ:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_9](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_9.gif)
d. Các lựa chọn – Radio Button
Các nút chọn radio là một nhóm nút tròn, chỉ cho phép bạn
được chọn một trong nhiều nút. Nút radio có dạng như sau:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_10](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_10.gif)
Công thức viết:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_11](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_11.gif)
Trong đó RADIO là từ khoá ứng với kiểu nút chọn Radio, nhãn nút i là xâu kí tự sẽ xuất hiện cạnh nút.
Ví dụ:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_12](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_12.gif)
Đoạn mã để tạo nút radio đầu tiên - Mastercard - là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_13](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_13.gif)
Trong ví dụ trên, thuộc tính NAME được gán trị PAYMENT là tên
nhóm nút Radio, gồm 3 nút cho phép lựa chọn một trong 3 cách
thanh toán, thuộc tính VALUE để nhận kết qủa câu trả lời ứng
với lựa chọn "Mastercard". Lưu ý phân biệt giữa Mastercard là
giá trị của lựa chọn với Mastercard là nhãn nút, tức cụm chữ
hiện cạnh nút radio. Ta có thể thay nhãn nút bằng một xâu bất
kì, ví dụ "Thẻ tín dụng MasterCard".
Dĩ nhiên cứ một nút radio lại tương ứng với một dòng mã
HTML như trên. Lưu ý rằng thuộc tính NAME phải như nhau cho toàn
bộ các nút radio của cùng một nhóm. Trong ví dụ trên thì tất
cả các nút đều phải cùng có NAME =[PAYMENT].
Trong một nhóm nút radio, một nút có thể có thuộc tính
CHECKED, nghĩa là nó được đánh dấu chọn sẵn khi mở trang Web.
Hết phần 1
Nguồn: Sưu tầm Internet
phải sử dụng các ứng dụng khác bên ngoài. Ví dụ NSD yêu cầu
tìm kiếm trong cơ sở dữ liệu, lấy các thông tin tức thời, luôn
được cập nhật.... Để làm được điều này dịch vụ Web phải
chuyển yêu cầu của NSD đến một ứng dụng khác. Ứng dụng này sẽ
thực hiện yêu cầu và trả lại kết quả cho Web server để chuyển
tiếp đến NSD.
1. FORM
1.1 FORM là gì?
a. Chức năng của FORM
Form là một cách để chuyển dữ liệu từ NSD đến cho Web Server
xử lý. Forms được sử dụng rộng rãi trên WWW. Các forms rất
tiện lợi cho người dùng điền các yêu cầu tìm kiếm, các biểu
mẫu điều tra, nhập dữ liệu đầu vào cho các ứng dụng..
Có nhiều thành phần khác nhau (gọi là các điều khiển
control) trong một form. Tuỳ theo yêu cầu giao tiếp với NSD cần
chọn thành phần thích hợp nhất.
Khi tạo form bạn cũng cần phải chỉ rõ cho máy chủ dịch vụ
biết cách xử lý form. Có nhiều loại chương trình ứng dụng khác
nhau trong máy chủ dịch vụ để làm việc này: các chương trình
CGI, ISAPI, các script ASP, JSP, Java Bean, Servlet...
Tạo form là khâu đầu tiên trong việc xây dựng giao tiếp giữa NSD với các ứng dụng Internet / Intranet.
b. Thành phần của FORM
Cặp thẻ để tạo Form là
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_1](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_1.gif)
Mọi thành phần của form như sẽ trình bày dưới đây đều phải nằm trong phạm vi giới hạn bởi cặp thẻ này.
Công thức khung để tạo form là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_1](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_1.gif)
Thuộc tính METHOD chỉ ra phương thức trao đổi dữ liệu giữa
trình duyệt Web và máy chủ Web. Có 2 phương thức là POST, GET.
Đối với form phương thức thường là POST.
Thuộc tính ACTION để thiết lập địa chỉ URL của chương trình sẽ nhận và xử lý dữ liệu gửi từ form.
1.2 Các thành phần trong FORM
Như đã nêu trên, có nhiều loại thành phần khác nhau trong một
Form. Dưới đây sẽ trình bày lần lượt những điểm cơ bản nhất.
a. Hộp văn bản – TextBox
Hộp văn bản là nơi để gõ vào một dữ liệu kiểu xâu kí tự. Hộp văn bản sẽ được hiển thị như sau:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_3](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_3.gif)
Thẻ để tạo ra nó là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_4](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_4.gif)
Trong đó TEXT là từ khoá ứng với kiểu là Text box, Tên là
tên của hộp văn bản này còn n là một số nguyên chỉ ra chiều
dài của trường. Tên phải duy nhất trong trang, không được trùng
nhau.
b. Hộp mật khẩu – Password
Hộp mật khẩu là nơi để gõ vào một mật khẩu kiểu xâu kí tự. Hộp mật khẩu được hiển thị như sau:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_5](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_5.gif)
Thẻ để tạo ra nó là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_6](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_6.gif)
Trong đó PASSWORD là từ khoá để tạo hộp mật khẩu, n là số nguyên chỉ ra chiều dài của hộp.
Hộp mật khẩu khác hộp văn bản ở chỗ khi gõ các kí tự từ
bàn phím thì nó không hiển thị kí tự tương ứng trong khung mà
thay bằng các dấu sao *.
Lưu ý: Việc hiển thị kí tự dấu * để thay thế chỉ có
tác dụng che giấu với người nhìn tại máy cục bộ. Password
vẫn được gửi vào mạng dưới dạng rõ, không mã hoá, có thể bị
xem trộm. Nhiệm vụ mã là của giao thức mạng.
c. Vùng văn bản – Text Windows
Vùng văn bản, để hiển thị nhiều dòng văn bản. Vùng văn bản có dạng như sau:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_7](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_7.gif)
Công thức viết là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_8](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_8.gif)
trong đó, Tên vùng là tên của vùng văn bản, m và n là các
số nguyên, chỉ ra chiều cao và chiều rộng của vùng văn bản.
Nếu bạn để trống phần "đoạn văn bản sẽ hiển thị " thì sẽ
không có văn bản nào xuất hiện trong cửa sổ.
Ví dụ:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_9](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_9.gif)
d. Các lựa chọn – Radio Button
Các nút chọn radio là một nhóm nút tròn, chỉ cho phép bạn
được chọn một trong nhiều nút. Nút radio có dạng như sau:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_10](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_10.gif)
Công thức viết:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_11](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_11.gif)
Trong đó RADIO là từ khoá ứng với kiểu nút chọn Radio, nhãn nút i là xâu kí tự sẽ xuất hiện cạnh nút.
Ví dụ:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_12](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_12.gif)
Đoạn mã để tạo nút radio đầu tiên - Mastercard - là:
![Biểu mẫu Style và Cascading Style Sheet trong HTML – Phần 1 20120821_BmauStylevaCascadingStyleSheet_p1_13](https://2img.net/h/www.thuvien-it.us/home/media/2012/12/08/20120821_BmauStylevaCascadingStyleSheet_p1_13.gif)
Trong ví dụ trên, thuộc tính NAME được gán trị PAYMENT là tên
nhóm nút Radio, gồm 3 nút cho phép lựa chọn một trong 3 cách
thanh toán, thuộc tính VALUE để nhận kết qủa câu trả lời ứng
với lựa chọn "Mastercard". Lưu ý phân biệt giữa Mastercard là
giá trị của lựa chọn với Mastercard là nhãn nút, tức cụm chữ
hiện cạnh nút radio. Ta có thể thay nhãn nút bằng một xâu bất
kì, ví dụ "Thẻ tín dụng MasterCard".
Dĩ nhiên cứ một nút radio lại tương ứng với một dòng mã
HTML như trên. Lưu ý rằng thuộc tính NAME phải như nhau cho toàn
bộ các nút radio của cùng một nhóm. Trong ví dụ trên thì tất
cả các nút đều phải cùng có NAME =[PAYMENT].
Trong một nhóm nút radio, một nút có thể có thuộc tính
CHECKED, nghĩa là nó được đánh dấu chọn sẵn khi mở trang Web.
Hết phần 1
Nguồn: Sưu tầm Internet