Thông tin tài liệu
1 BIỂU MẪU- FORM 2 Form dùng để nhận dữ liệu từ phía người dùng. Sau khi người dùng nhập dữ liệu vào form, dữ liệu sẽ được chuyển đến các chương trình xử lý tương ứng Ví dụ: – 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 – Tập hợp thông tin để mua hàng – 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… GIỚI THIỆU FORM 3 Cú pháp: <Form Method=(Post, Get) Action=script.url Name=“ ”> Nội dung của Form </Form> Method : xác định phương thức đưa dữ liệu lên máy chủ, có 2 giá trị Post và Get GET: 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. 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ý. Khối lượng dữ liệu đối số được truyền đi của Form bị giới hạn bởi chiều dài tối đa của một URL trên thanh địa chỉ (tối đa 2048 bytes) POST: dữ liệu trên form sẽ được gửi đến script như một khối dữ liệu. Khối lượng dữ liệu đối số được truyền đi của Form không phụ thuộc vào URL nên không bị giới hạn. Chỉ sử dụng được phương thức truyền POST khi Action chỉ định đến trang web thuộc dạng xử lý trên Server Action : là địa chỉ của script sẽ thực hiện khi form được submit Name: Tên Form, được dùng trong các xử lý trên form GIỚI THIỆU FORM 4 CÁC PHẦN TỬ CỦA FORM Các form bao gồm hai phần tử: các trường trên form và các nút nhấn. Các trường trên form để thu thập thông tin. Những nút nhấn (thường là Submit hoặc Reset) được dùng để gửi thông tin tới máy chủ Web. Người dùng nhập dữ liệu cho form thông qua các box điều khiển thường được gọi là các controls như : textbox, checkbox, radio, listbox, Dữ liệu sẽ được xử lý khi form được submit. 5 INPUT BOXES 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 thẻ <INPUT> Cú pháp: <FORM> <INPUT TYPE=Object NAME=Text> </FORM> Các giá trị của thuộc tính TYPE: Mặc định giá trị của TYPE là text, nếu trong thẻ <INPUT> không nhập thuộc tính TYPE thì loại input boxes là text 6 Text box: Hộp văn bản, do người sử dụng nhập vào Cú pháp: <Input Type=”Text” Value=”Value” Name=”name” Size=n Maxlength=m> Name : tên text box, không được có ký tự đặc biệt 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à 20) Maxlength: số ký tự tối đa có thể nhập vào text box TEXT BOX 7 <HTML> <head><title>Form</title></head> <body> <form method =post action=" WEBBOT-SELF "> <table> <tr> <td width=100>UserName </td> <td><input type=text name =UserName ></td> </tr> <table> </form> </body> </HTML> VÍ DỤ 8 Hộp Password: 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 lên server Cú pháp: <Input Type=”password” Name=”name” size=n maxlength=n> Size : chiều rộng của hộp Password, tính bằng ký tự Maxlength : Số ký tự tối đa có thể nhập vào hộp Password TẠO HỘP PASSWORD 9 <html> <head><title>Form</title></head> <body> <form><table> <tr> <td>Password: </td> <td><input Type='password' name =Password></td> </tr> </table></form> </body> </html> VÍ DỤ 10 Checkbox: Hộp chọn, người xem có thể đánh dấu nhiều checkbox trong cùng 1 bộ Cú pháp: <Input Type=”Checkbox” Name=”Name” Value=”Value” Checked> Nhãn Trong đó: Name: tên của 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 checkbox Checked: thuộc tính để hộp check box được chọn mặc định CHECKBOX [...]... value='postgrad' tabindex='5'> Postgraduate 27 < /FORM> ĐIỀU KHIỂN CÁC PHẦN TỬ TRÊN FORM 1 Định thứ tự Tab: Dùng phím tab để di chuyển giữa các đốitượng trong form, mặc định theo thứ tự của mã HTML, muốn định lại thứ tự ta dùng thuộc tính TabIndex=n trong thẻ tạo các thành phần của form, trong đó n là thứ tự của tab, có giá trị từ 0 đến 32767 Trong một form ta thường định thứ tự tab cho các thành... bằng số ký tự, mặc định là 40 23 Ví dụ: Comments ? 24 < /form> LABEL Label (nhãn): Dùng để tạo nhãn liên kết với thành phần đi kèm Cú pháp: Nội dung label Idname: là giá trị của thuộc tính ID trong thành phần Form tương ứng Ví dụ: Firstname:... < /form> 11 HIDDEN FIELD Hidden field là các field mà người xem không nhìn thấy trên trình duyệt, nhưng vẫn là một phần tử trên form Hidden field dùng để lưu trữ thông tin trong các form trước, các thông tin này cần đi kèm với các dữ liệu trong form hiện hành mà không muốn người xem nhập lại Cú pháp: – Name: tên mô tả ngắn gọn thông tin... < /form> 14 SUBMIT BUTTON Submit Button: Tất cả thông tin của người xem nhập vào sẽ được gửi đến server khi người xem click nút Submit Cú pháp: – – Submit Message: chữ xuất hiện trên Button Name: tên của button 15 RESET BUTTON Reset Button: Thiết lập giá trị ban đầu của tất cả các điều khiển trên form Cú pháp:... Value=”Value” > Option 2 … Trong đó: Option1, option 2 : Các mục trong Menu Name: Tên menu Size: chiều cao của menu tính bằng hàng chữ Multiple: thuộc tính cho phép chọn nhiều đề mục (listbox) Selected: đề mục được chọn mặc định 18 Value: xác định dữ liệu gởi cho server nếu đề mục được chọn VÍ DỤ Dropdown menu ScanMaster... Print/scan 250 < /form> 19 SELECTION LIST Listbox: Nếu thêm thuộc tính Multiple thì ta được dạng listbox ScanMaster ScanMaster II LaserPrint 1000 LaserPrint 5000 Print/scan 150 Print/scan 250 20 < /form> SELECTION LIST Phần...VÍ DỤ Form Hobby: Music Film Sport < /form> 11 HIDDEN FIELD Hidden field... Cú pháp: . thực hiện khi form được submit Name: Tên Form, được dùng trong các xử lý trên form GIỚI THIỆU FORM 4 CÁC PHẦN TỬ CỦA FORM Các form bao gồm hai phần tử: các trường trên form và các. công cụ tìm kiếm trên website… GIỚI THIỆU FORM 3 Cú pháp: < ;Form Method=(Post, Get) Action=script.url Name=“ ”> Nội dung của Form < /Form& gt; Method : xác định phương thức. 1 BIỂU MẪU- FORM 2 Form dùng để nhận dữ liệu từ phía người dùng. Sau khi người dùng nhập dữ liệu vào form, dữ liệu sẽ được chuyển đến các chương trình
Ngày đăng: 08/08/2014, 10:14
Xem thêm: slide bài giảng về biểu mẫu form trong ngôn ngữ thiết kế web, slide bài giảng về biểu mẫu form trong ngôn ngữ thiết kế web
