Bài giảng Thiết kế Web: Chương 6 - Từ Thị Xuân Hiền

Bài giảng Thiết kế Web - Chương 6 giới thiệu về form trong trang Web. Trong một trang web, form được sử dụng khi cần 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; hay thu thập thông tin phản hồi về một Website;... Trong chương này sẽ hướng dẫn cách tạo form. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.

CHƯƠNG VI FORM I GIỚI THIỆU FORM Form sử dụng cần: – 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 dịch vụ, kiện – Tập hợp thông tin để mua hàng – Thu thập thông tin phản hồi Website – Cung cấp cơng cụ tìm kiếm website Cách tạo: Cú pháp: Nội dung Form   Trong đó: -Method: xác định phương thức đưa liệu lên máy chủ, có giá trị :Post Get – Nếu giá trị GET trình duyệt tạo câu hỏi chứa trang URL, dấu hỏi giá trị biểu mẫu tạo Trình duyệt đổi script câu hỏi thành kiểu xác định URL để xử lý – Nếu giá trị POST liệu biểu mẫu gửi đến script khối liệu -Action: địa script thực form submit II CÁC PHẦN TỬ CỦA FORM Các phần tử form thường sử dụng web gồm: – Input boxes: nhập liệu dạng text number – Radio buttons: dùng để chọn tùy chọn danh sách – Selection lists: dùng cho danh sách dài lựa chọn, thường Drop-down list box – Check boxes: định item chọn hay khơng – Text area: text box chứa nhiều dòng – Submit Reset button: để gửi form đến CGI script vừa để reset form trạng thái ban đầu INPUT BOXES   Là hộp dòng đơn dùng để nhập văn số Để tạo input boxes, sử dụng tag , tag sử dụng cho nhiều loại field khác form Cú pháp: Các giá trị thuộc tính TYPE: Mặc định giá trị TYPE text, tag không nhập thuộc tính TYPE loại input boxes text Text box: Hộp văn bản, người sử dụng nhập vào  Cú pháp: – Name : tên liệu đầu vào server – Value: Dữ liệu ban đầu có sẳn text box – Size: chiều rộng text box tính số ký tự (mặc định 20) – Maxlength: số ký tự tối đa nhập vào text box  Ví dụ: Form UserName Tạo hộp Password: Những ký tự nhập vào hiển thị dạng dấu chấm , thơng tin khơng bị mã hố gửi lên server Cú pháp: – – Size: chiều rộng hộp Password, tính ký tự Maxlength: Số ký tự tối đa nhập vào hộp Password Form Password:  Checkbox: Hộp chọn, người xem đánh dấu nhiều checkbox 1bộ Cú pháp: Nhãn – Name: tên checkbox – Value: xác định giá trị cho hộp checkbox gửi cho server người xem đánh dấu vào checkbox – Checked: thuộc tính để hộp check box chọn mặc định Ví dụ: Form User for Home Business Government Educational Institution Other   Submit Button: Tất thông tin người xem nhập vào gửi đến server người xem click nút Submit Cú pháp: – Submit Message: Là chữ xuất Button – Name: tên button Reset Button: Thiết lập giá trị ban đầu tất điều khiển form Cú pháp: Có thể tạo nút Reset Submit hình ảnh với cú pháp: Nhãn chữ lề trái Nhãn chữ lề phải   Button: Nút dùng để thực lệnh người sửn dụng đưa Cú pháp: Hidden: field mà người xem khơng nhìn thấy trình duyệt, phần tử form Hidden field dùng để lưu trữ thông tin form trước, thông tin cần kèm với liệu form 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 cần lưu trữ – Value: Thông tin cần lưu trữ SELECTION LIST Drop down menu: Cú pháp: Option Option … Nhãn:Giới thiệu Menu Name: tên liệu đầu vào server Size: chiều cao menu tính hàng chữ Multiple: thuộc tính cho phép chọn nhiều đề mục (listbox) Selected: đề mục chọn mặc định Value: xác định liệu gởi cho server đề mục chọn  Ví dụ: Dropdown menu ScanMaster ScanMaster II LaserPrint 1000 LaserPrint 5000 Print/scan 150 Print/scan 250 Lixbox: Nếu thêm thuộc tính Multiple ta dạng listbox ScanMaster ScanMaster II LaserPrint 1000 LaserPrint 5000 Print/scan 150 Print/scan 250  Phần tử OPTGROUP: sử dụng để nhóm chọn lựa thành nhóm riêng dropdown menu listbox Cú pháp: option1 option1 option1 … … TEXTAREA TextArea: Hộp văn cho phép nhập nhiều dòng  Cú pháp: Default text – Rows: số dịng nhập vào TextArea (mặc định 4) – Cols: độ rộng textarea, tính số ký tự, mặc định 40 – Wrap: dòng chữ tự động dàn lề vùng text area, Value: virtual,physical Ví dụ: Comments ?  Nhãn: Dùng để tạo nhãn liên kết với thành phần kèm Cú pháp: Nội dung label Idname: giá trị thụơc tính ID thành phần Form tương ứng Ví dụ: Firsname: Last name: Label FIELDSET Nhóm đối tượng giống vào phần logic Cú pháp: Chú thích Các thành phần nhóm -Tag: tạo thích cho nhóm -Align=left, right: vị trí thích Ví dụ: Position Application for the post of: Educational Qualifications Graduate Postgraduate  Điều khiển phần tử form Định thứ tự Tab:  Dùng phím tab để di chuyển đốitượng form, mặc định theo thứ tự mã HTML, muốn định lại thứ tự ta dùng thuộc tính TabIndex=n tag tạo thành phần form, n thứ tự tab, có giá trị từ đến 32767  Trong form ta thường định thứ tự tab cho thành phần : textbox, password, checkbox, radio button, textarea, menu button Tạo phím tắt:  Cách tạo: Trong tag tạo phần tử form ta dùng thuộc tính Accesskey=”Phím tắt”  Sử dụng phím tắt: Nhấn tổ hợp phím Alt+Phím tắt ... Chú thích Các thành phần nhóm -Tag: tạo thích cho nhóm -Align=left, right: vị trí thích Ví dụ: Position... lại thứ tự ta dùng thuộc tính TabIndex=n tag tạo thành phần form, n thứ tự tab, có giá trị từ đến 32 767  Trong form ta thường định thứ tự tab cho thành phần : textbox, password, checkbox, radio... dùng để chọn tùy chọn danh sách – Selection lists: dùng cho danh sách dài lựa chọn, thường Drop-down list box – Check boxes: định item chọn hay không – Text area: text box chứa nhiều dịng – Submit