FrontPage

Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn CHƯƠNG VI CHƯƠNG VI FORM FORM Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn I. I. GIỚI THIỆU FORM GIỚI THIỆU FORM 1. 1. Form được sử dụng khi cần: Form được sử dụng khi cần: – Thu thập thông tin tên, địa chỉ, số điện thoại, email, …để Thu thập thông tin tên, địa chỉ, số điện thoại, email, …để đăng ký cho người dùng vào một dịch vụ, một sự kiện đăng ký cho người dùng vào một dịch vụ, một sự kiện – Tập hợp thông tin để mua hàng Tập hợp thông tin để mua hàng – Thu thập thông tin phản hồi về một Website Thu thập thông tin phản hồi về một Website – Cung cấp công cụ tìm kiếm trên website Cung cấp công cụ tìm kiếm trên website 2. 2. Cách tạo: Cách tạo: Cú pháp Cú pháp : : <Form Method=(Post, Get) Action=script.url> <Form Method=(Post, Get) Action=script.url> Nội dung của Form Nội dung của Form </Form> </Form> Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn  Trong đó Trong đó : : - - Method Method : xác định phương thức đưa dữ liệu lên máy chủ, có 2 : xác định phương thức đưa dữ liệu lên máy chủ, có 2 giá trị :Post và Get giá trị :Post và Get – Nếu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi chứa Nếu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi chứa trang URL, một dấu hỏi và các giá trị do biểu mẫu tạo ra. trang URL, một dấu hỏi và các giá trị do biểu mẫu tạo ra. Trình duyệt sẽ đổi script của câu hỏi thành kiểu được xác Trình duyệt sẽ đổi script của câu hỏi thành kiểu được xác định trong URL để xử lý. định trong URL để xử lý. – Nếu giá trị là POST thì dữ liệu trên biểu mẫu sẽ được gửi Nếu giá trị là POST thì dữ liệu trên biểu mẫu sẽ được gửi đến script như một khối dữ liệu đến script như một khối dữ liệu  - - Action Action : là địa chỉ của script sẽ thực hiện khi form được : là địa chỉ của script sẽ thực hiện khi form được submit submit I. I. GIỚI THIỆU FORM GIỚI THIỆU FORM Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn II. II. CÁC PHẦN TỬ CỦA FORM CÁC PHẦN TỬ CỦA FORM Các phần tử của form thường sử dụng trên web gồm: Các phần tử của form thường sử dụng trên web gồm: – Input boxes Input boxes : nhập dữ liệu dạng text và number : nhập dữ liệu dạng text và number – Radio buttons Radio buttons : dùng để chọn một tùy chọn trong danh sách : dùng để chọn một tùy chọn trong danh sách – Selection lists Selection lists : dùng cho một danh sách dài các lựa chọn, : dùng cho một danh sách dài các lựa chọn, thường là trong Drop-down list box thường là trong Drop-down list box – Check boxes Check boxes : chỉ định một item được chọn hay không : chỉ định một item được chọn hay không – Text area: Text area: một text box có thể chứa nhiều dòng một text box có thể chứa nhiều dòng – Submit và Reset button Submit và Reset button : để gửi form đến CGI script vừa để : để gửi form đến CGI script vừa để reset form về trạng thái ban đầu reset form về trạng thái ban đầu Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn INPUT BOXES INPUT BOXES Là một hộp dòng đơn dùng để nhập văn bản hoặc số. Để tạo Là một hộp dòng đơn dùng để nhập văn bản hoặc số. Để tạo các input boxes, sử dụng tag <INPUT>, tag <INPUT> còn các input boxes, sử dụng tag <INPUT>, tag <INPUT> còn được sử dụng cho nhiều loại field khác trên form. được sử dụng cho nhiều loại field khác trên form.  Cú pháp Cú pháp : : <FORM> <FORM> <INPUT TYPE=Object NAME=Text> <INPUT TYPE=Object NAME=Text> </FORM> </FORM>  Các giá trị của thuộc tính TYPE Các giá trị của thuộc tính TYPE : : Mặc định giá trị của TYPE là text, nếu trong tag <INPUT> Mặc định giá trị của TYPE là text, nếu trong tag <INPUT> không nhập thuộc tính TYPE thì loại input boxes là text không nhập thuộc tính TYPE thì loại input boxes là text II. II. CÁC PHẦN TỬ CỦA FORM CÁC PHẦN TỬ CỦA FORM Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn 1. 1. Text box Text box : : Hộp văn bản, do người sử dụng nhập vào Hộp văn bản, do người sử dụng nhập vào  Cú pháp Cú pháp : : <Input Type=”Text” Value=”Value” Name=”name” Size=n <Input Type=”Text” Value=”Value” Name=”name” Size=n Maxlength=m> Maxlength=m> – Name : tên dữ liệu đầu vào server Name : tên dữ liệu đầu vào server – Value: Dữ liệu ban đầu có sẳn trong text box Value: Dữ liệu ban đầu có sẳn trong text box – Size: chiều rộng của text box tính bằng số ký tự (mặc định là Size: chiều rộng của text box tính bằng số ký tự (mặc định là 20) 20) – Maxlength: số ký tự tối đa có thể nhập vào text box Maxlength: số ký tự tối đa có thể nhập vào text box II. II. CÁC PHẦN TỬ CỦA FORM CÁC PHẦN TỬ CỦA FORM Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn  Ví dụ: Ví dụ: <html> <html> <head><title>Form</title></head> <head><title>Form</title></head> <body> <body> <form method =post action=“CGI”> <form method =post action=“CGI”> <table> <table> <tr> <tr> <td width=100>UserName </td> <td width=100>UserName </td> <td>< <td>< input type=text name =UserName input type=text name =UserName ></td> ></td> </tr> </tr> <table> <table> </form> </form> </body> </body> </html> </html> II. II. CÁC PHẦN TỬ CỦA FORM CÁC PHẦN TỬ CỦA FORM Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn 2. 2. Tạo hộp Password Tạo hộp Password : : Những ký tự nhập vào hiển thị dưới Những ký tự nhập vào hiển thị dưới dạng dấu chấm , thông tin sẽ không bị mã hoá khi gửi dạng dấu chấm , thông tin sẽ không bị mã hoá khi gửi lên server lên server Cú pháp: Cú pháp: <Input Type=”password” Name=”name” size=n <Input Type=”password” Name=”name” size=n maxlength=n> maxlength=n> – Size Size : chiều rộng của hộp Password, tính bằng ký tự : chiều rộng của hộp Password, tính bằng ký tự – Maxlength Maxlength : Số ký tự tối đa có thể nhập vào hộp Password : Số ký tự tối đa có thể nhập vào hộp Password II. II. CÁC PHẦN TỬ CỦA FORM CÁC PHẦN TỬ CỦA FORM Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn <html> <html> <head><title>Form</title></head> <head><title>Form</title></head> <body> <body> <form><table> <form><table> <tr> <tr> <td>Password: </td> <td>Password: </td> <td>< <td>< input Type='password' input Type='password' name =Password></td> name =Password></td> </tr> </tr> </table></form> </table></form> </body> </body> </html> </html> II. II. CÁC PHẦN TỬ CỦA FORM CÁC PHẦN TỬ CỦA FORM Head Office: 2& 4/30 Tạ Quang Bửu, Bách Khoa, Hà Nội - Branch: 180, Xã Đàn 2, Nguyễn Lương Bằng, Đống Đa, Hà Nội Tel: 844.8683143 & 844.5725452 Fax: 844.8211708 Email: vaip1@vnn.vn 3. 3. Checkbox Checkbox : : Hộp chọn, người xem có thể đánh dấu nhiều Hộp chọn, người xem có thể đánh dấu nhiều checkbox trong cùng 1bộ checkbox trong cùng 1bộ  Cú pháp Cú pháp : : <Input Type=”Checkbox” Name=”Name” Value=”Value” <Input Type=”Checkbox” Name=”Name” Value=”Value” Checked> Nhãn Checked> Nhãn – Name: tên của checkbox Name: tên của checkbox – Value: xác định mỗi giá trị cho mỗi hộp checkbox Value: xác định mỗi giá trị cho mỗi hộp checkbox được gửi cho server khi người xem đánh dấu vào được gửi cho server khi người xem đánh dấu vào checkbox checkbox – Checked: thuộc tính để hộp check box được chọn mặc Checked: thuộc tính để hộp check box được chọn mặc định định II. II. CÁC PHẦN TỬ CỦA FORM CÁC PHẦN TỬ CỦA FORM