Form thông tin khách hàng 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ụng 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

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:

<FORM name=”myForm”>

<!-- Thành phần điều khiển đặt ở đây -->

</FORM>

Thẻ <FORM> bao gồm các thuộc tính sau:

THUỘC TÍNH

MÔ TẢ

Name

Đặt tên cho Form

Action

Thuộc tính này xác định trang Script sẽ xử lý những dữ liệu nhập vào  từ  Form

Cú pháp là: Action=”URL”

Method

Thuộc tính này xác định phương thức dữ liệu được gửi đến máy chủ. Nó cũng xác định giao thức được sử dụng khi máy khách gửi dữ liệu lên cho máy chủ. Nếu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi có chứa địa chỉ URL của trang, một dấu chấm hỏi và các giá trị do biểu mẫu tạo ra. Trình duyệt sẽ trả lại câu hỏi cho kịch bản được xác định trong URL để xử lý. Nếu giá trị là POST, thì dữ liệu trên biểu mẫu được gửi đến kịch bản xử lý như một khối dữ liệu.

Cú pháp là: Method=(GET | POST)

Bảng 5.1: Các thuộc tính của thẻ form

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à:

THUỘC TÍNH

MÔ TẢ

Type

Thuộc tính này xác định loại điều khiển. Có thể nhận giá trị sau: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, HIDDEN và BUTTON. Mặc định là TEXT

Name

Thuộc tính này chỉ tên của điều khiển. Ví dụ nếu có nhiều hộp văn bản (text box) trên một biểu mẫu thì bạn nên sử dụng tên để xác định chúng (text1, text2,…). Phạm vi hoặt động của thuộc tính name nằm trong thẻ <FORM>

Value

Đây là thuộc tính tùy chọn, nó xác định giá trị khởi tạo của điều khiển

Size

Thuộc tính này xác định độ rộng ban đầu của điều khiển

Maxlength

Thuộc tính này được sử dụng để xác định số ký tự lớn nhất có thể nhập vào phần tử TEXT hoặc PASSWORD. Mặc định là không giới hạn

Checked

Đây là thuộc tính logic để xác định nút có được chọn hay không. Thuộc tính này được sử dụng khi kiểu nhập là RADIO hay CHECKBOX

Src

Src=”URL”. Thuộc tính này được dùng khi ta muốn sử dụng một ảnh trong kiểu INPUT. Nó xác định vị trí của ảnh

Bảng 5.2: Các thuộc tính của thẻ <input>

a) Hộp văn bản

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”>

5.3.2. Vùng văn bản (TextArea)

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:

<TextArea name=”txta”>

Giá trị khởi tạo cho vùng văn bản

</TextArea>

Để 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ự”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ã:

<TextArea name=”ghichu” rows=”3” cols=”20”>

</TextArea>

5.3.3. Thành phần lựa chọn (Select)

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:

<SELECT name=”slt” size=”số tùy chọn trong danh sách” multiple>

     <OPTION> Tên sẽ xuất hiện trong danh sách chọn </option>

     …...

</SELECT>

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:

<SELECT name=”slt” size=”1” >

     <OPTION> Tên sẽ xuất hiện trong danh sách chọn </option>

     …...

</SELECT>

b) Trường hợp danh sách này là một listbox ta khai báo như sau:

<SELECT name=”slt” size=”một số >1” >

     <OPTION> Tên sẽ xuất hiện trong danh sách chọn </option>

     …...

</SELECT>