Tạo Form trên HTML
1. Form là gì?
Để 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ụ người sử dụng 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 người sử dụng đế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 người sử dụng. Form là một cách để
chuyển dữ liệu từ người sử dụng đến cho Web Server xử lý.
Form HTML là một phần của tài liệu, nó chứa các phần tử đặc biệt gọi là các điều khiển.
Các điều khiển được sử dụng để nhập thông tin từ người dùng và cung cấp một số tương
tác. Dữ liệu do người dùng nhập vào có thể được xác nhận hợp lệ nhờ các kịch bản phía
máy khách (client-side scripts) và được chuyển đến máy chủ để xử lý thêm.
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 người sử dụng với các ứng dụn
g Internet / Intranet.
Việc sử dụng form trên World Wide Web khá nhiều và liên tục tăng lên. Sau đây là một số
cách sử dụng thông thường:
- Thu thập tên, địa chỉ, số điện thoại, địa chỉ e-mail và các thông tin khác để người dùng
đăng ký cho một dịch vụ hay một sự kiện nào đó.
- Thu thập thông tin để đăng ký mua một mặt hàng nào đó, ví dụ, khi muốn mua một cuốn
sách trên Internet, ta phải điền tên, địa chỉ gửi thư, phương thức thanh toán và các thông tin
liên quan khác.
- Thu thập thông tin phản hồi về một Website. Hầu hết các site cung cấp một dịch vụ nào
đó đều khuyến khích khách hàng gửi thông tin phản hồi. Ngoài việc xây dựng mối quan hệ
với khách hàng, đây còn là một nguồn thông tin để trao đổi hoặc cải tiến dịch vụ.
- Cung cấp công cụ tìm kiếm cho Website. Các site cung cấp nhiều thông tin khác nhau
thường cung cấp cho người dùng hộp tìm kiếm để cho phép họ tìm kiếm thông tin nhanh hơn.
2. Thẻ tạo Form HTML
Thẻ <FORM> được dùng để tạo một vùng trên trang như một biểu mẫu. Nó chỉ ra cách bố trí
của biểu mẫu.
Trước khi đặt bất kỳ thành phần điều khiển nào trong Form, ta phải tạo Form theo cú pháp
sau:
Thẻ <FORM> bao gồm các thuộc tính sau:
3. Các thành phần trong Form
3.1. Thẻ <INPUT>
Thẻ <INPUT> xác định loại và diện mạo của điều khiển sẽ hiển thị trên biểu mẫu.
Các thuộc tính của thẻ này là:
Loại này tạo một điều khiển nhập văn bản có một dòng.
Cú pháp:
<INPUT type=”TEXT” name=”tentextbox”>
b) Hộp văn bản dạng Password
Điều khiển này giống như điều khiển hộp văn bản nhưng nó không hiển thị ký tự người dùng
nhập vào, thay vào đó nó chỉ hiển thị ký tự dấu “*”. Điều khiển này thường dùng cho mục
đích nhận mật khẩu người dùng.
Cú pháp:
<INPUT type=”PASSWORD” name=”txtpass”>
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) Checkbox (hộp kiểm)
Checkbox là một nút hình vuông được dùng để thể hiện một danh sách cho phép chọn một
hoặc nhiều tùy chọn.
Cú pháp:
<INPUT type=”CHECKBOX” name=”chk”>
d) Radio
Đây là nút hình tròn, khi được chọn sẽ có dấu chấm tròn màu đen trong vòng tròn của
nút. Nút Radio được dùng để hiển thị danh sách chọn lựa.Trong cùng một nhóm sẽ chỉ
có một nút được chọn và tất cả các nút sẽ có cùng tên. Khi một nút được chọn thì nút
được chọn trước đó sẽ tự động được xóa.
Cú pháp:
<INPUT type=”RADIO” name=”rd”>
e) Nút bấm (Button)
Được dùng để tính toán hay sử dụng một số phương thức của Client Script.
Cú pháp:
<INPUT type=”BUTTON” name=”btn”>
f) Nút Submit
Dùng để chuyển dữ liệu (giá trị của các thành phần điều khiển trên Form) về Web Server.
Cú pháp:
<INPUT type=”SUBMIT” name=”sbt” value=”nhãn hiển thị trên nút”>
g) Nút Reset
Được dùng để thiết lập giá trị của các điều khiển về giá trị ban đầu.
Cú pháp:
<INPUT type=”RESET” name=”rst” value=”nhãn hiển thị trên nút”>
Thẻ <TextArea> tạo ra một điều khiển nhập văn bản trên nhiều dòng so với hộp văn bản
nhập một dòng. Ta phải xác định kích thước của textarea, xác định số dòng,
số cột trong textarea và thẻ này phải kết thúc với thẻ đóng </TextArea>.
Cú pháp:
Để giới hạn chiều cao và chiều rộng trình bày trên trang Web của thẻ này, ta sử dụng
các thuộc tính sau: cols=”số ký tự” và rows=”số hàng”.
Ví dụ 5.4: Tạo một hộp văn bản có tên là “ghichu”, số dòng hiển thị là 3 và số cột hiển thị
là 20 như sau:
Đoạn mã:
Phần tử Select được sử dụng để hiển thị một danh sách các lựa chọn cho người dùng. Mỗi
lựa chọn được biểu diễn bởi phần tử Option. Một phần tử Select phải chứa ít nhất một phần
tử Option.
Mỗi lựa chọn trong hộp chọn được lấy giá trị thông qua mô tả văn bản của nó xem có được
chọn hay không.
Cú pháp:
Sử dụng thuộc tính multiple nếu muốn cho người dùng chọn nhiều hơn một tùy chọn.
Nếu muốn phần tử được chọn mặc định trong danh sách, ta khai báo thêm thuộc tính selected
trong thẻ <OPTION>.
a) Trường hợp danh sách này là một combo box ta khai báo như sau:
b) Trường hợp danh sách này là một listbox ta khai báo như sau:
|
0 nhận xét: