Tìm hiểm Frame – HTML form

FRAME – HTML FORM GV: ĐOÀN THIỆN NGÂN LTM1 – FRAME & HTML FORM – 2/22 Nội dung • Chương 3: Frame và HTML Form • Frame • Form üAttributes üElements LTM1 – FRAME & HTML FORM – 3/22 Frame Frame: công cụ chia cửa sổ trình duyệt thành các vùng riêng biệt và độc lập. Mỗi vùng hiển thị một tài liệu riêng và có thể có thanh cuộn đi kèm. • Trang web thường được phân thành ba vùng frame: 1. Header: frame thể hiện trang tiêu đề gồm tên công ty, logo, khẩu ngữ công ty, 2. Liên kết: frame bên trái thể hiện trang gồm các liên kết chính trong website. 3. Nội dung: thể hiện nội dung của trang đang được liên kết. • Lợi điểm của frame: các phần tách bạch rõ ràng, khi cần hiệu chỉnh trang, ta chỉ cần tập trung vào phần nội dung cần chỉnh sửa, mà không làm ảnh hưởng đến các vùng khác. • Hạn chế: frame tạo cho người dùng cảm giác không gian trang chật hẹp. LTM1 – FRAME & HTML FORM – 4/22 Tạo frame • Khai báo cấu trúc frame: • Với mỗi frameset, ta chỉ có thể phân frameset theo một tiêu chí, hoặc phân theo cột, hoặc phân theo dòng. •Để phân trang web thành nhiều frame, theo cả dòng và cột, sử dụng cấu trúc frameset lồng nhau. VD-3.3 LTM1 – FRAME & HTML FORM – 5/22 Phần tử noframes • Thẻ được sử dụng nhằm đề phòng trường hợp trình duyệt không hỗ trợ frame. • Phần nội dung nằm giữa thẻ đóng và thẻ mở của sẽ được hiển thị, thông báo cho người dùng biết do trình duyệt của họ không hỗ trợ frame nên trang web không hiển thị đúng. • Thẻ được đặt bên trong thẻ . nội-dung-thay-thế LTM1 – FRAME & HTML FORM – 6/22 Frame trong dòng – Phần tử iframe • Thẻ được sử dụng để tạo frame trong dòng văn bản <iframe src="url" width="value" height="value" scrolling="value" name="value"> Nội dung hiển thị khi trình duyệt không hỗ trợ frame LTM1 – FRAME & HTML FORM – 7/22 HTML Form • HTML Form (biểu mẫu) tập hợp các phần tử và thuộc tính, để thu thập dữ liệu từ người dùng. • Một số dạng form thường gặp trên Internet: • Form tìm kiếm: cho phép người dùng nhập tiêu chuẩn tìm kiếm. • Form thu thập dữ liệu: cho phép người dùng nhập các thông tin cá nhân khi đăng kí thành viên của website. • Form đăng nhập: yêu cầu người dùng nhập username và password. • Form phản hồi thông tin, đóng góp ý kiến cho website.ập dữ liệu từ người dùng. LTM1 – FRAME & HTML FORM – 8/22 Tạo form • Thẻ form <form action="url" method="get|post" name="tên-form" target= "_blank | _self | tênframe"> • action: url thể hiện địa chỉ của form handler (sẽ rõ hơn trong LTM2). • method (Cần web server - httpd để thấy hoạt động chính xác của thuộc tính method) Ømethod=get: dữ liệu chuyển đi được gắn vào cuối url của action Ømethod=post: dữ liệu chuyển đi của form được đưa vào HTTP header LTM1 – FRAME & HTML FORM – 9/22 Các điều khiển trên form •Điều khiển nhập liệu: Textfield, Password field, Textarea •Điều khiển chọn lựa: Radio button, Checkbox •Điều khiển nút nhấn: Submit Button, Reset Button, Image Button • Danh sách chọn: DropdownList LTM1 – FRAME & HTML FORM – 10/22 Textfield • Textfield: nhập văn bản đơn dòng, thẻ với thuộc tính type="text": <input type="text" name="tên" value="giá trị" size=n maxlength=n disabled readonly> LTM1 – FRAME & HTML FORM – 11/22 Password field • Password field: tương tự như Textfield, nhưng nội dung nhập vào được che bằng các bullet. • Password field: thẻ , thuộc tính type="password": <input type="password" name="tên" value="giá trị" size=n maxlength=n> LTM1 – FRAME & HTML FORM – 12/22 Textarea • Textarea: nhập văn bản nhiều dòng, thẻ <textarea cols=m rows=n name="tên" wrap="soft/hard/off"> văn bản LTM1 – FRAME & HTML FORM – 13/22 Checkbox • Checkbox: thẻ với type="checkbox": <input type="checkbox" name="tên" value="giá-trị" checked> LTM1 – FRAME & HTML FORM – 14/22 Radio button • Radio button: thẻ với type="radio": <input type="radio" name="tên" value="giá-trị" checked> •Để chọn được một giá trị duy nhất trong nhóm (radio button list), các nút radio phải có tên giống nhau. Male Female LTM1 – FRAME & HTML FORM – 15/22 Dropdown-list • Thẻ tạo DropdownList (danh sách các tùy chọn). • Mỗi chọn lựa trong DropdownList là một phần tử . • Một DropdownList phải có ít nhất một tùy chọn option. chọn lựa1 chọn lựa2 LTM1 – FRAME & HTML FORM – 16/22 Button Button: Thẻ với type tương ứng <input type="button/ submit/ reset/ image" name="tên" value ="giá trị"> • type=button: thường được dùng để kích hoạt các hàm Javascript. • type=submit: để submit form. • type=reset: reset form về các giá trị khởi tạo ban đầu. • type=image: dạng ảnh, ta cần chỉ định thêm url của file ảnh thông qua thuộc tính src • Chú ý: Thẻ LTM1 – FRAME & HTML FORM – 17/22 Label • Phần tử : gắn nhãn cho phần tử điều khiển. • Khi click chuột vào nhãn thì phần tử điều khiển tương ứng sẽ nhận focus. •Để tạo nhãn cho một phần tử điều khiển, trước tiên, phải xác định giá trị cho thuộc tính id của điều khiển. Sau đó, khai báo nhãn cho phần tử này. nhãn LTM1 – FRAME & HTML FORM – 18/22 Fieldset • Ta có thể gom nhóm các phần tử điều khiển, đặt tên cho nhóm và bao quanh chúng một đường viền bằng thẻ : tiêu đề của nhóm điều khiển VD-3.17 LTM1 – FRAME & HTML FORM – 19/22 Focus • Khi nhập dữ liệu cho form, tại mỗi thời điểm, chỉ có một phần tử điều khiển ở trạng thái hoạt động, hay còn được gọi là nhận tiêu điểm – focus. •Để đặt tiêu điểm cho một phần tử điều khiển, ta có thể: vClick chuột vào phần tử. vDi chuyển phím tab trên bàn phím cho đến khi phần tử điều khiển mong muốn nhận được tiêu điểm. vNhấn phím tắt tương ứng với điều khiển để đặt focus nhanh LTM1 – FRAME & HTML FORM – 20/22 Thuộc tính tabindex • Thuộc tính tabindex của phần tử xác định trình tự phần tử nhận focus thông qua bàn phím. •Điều hướng bắt đầu với phần tử có trị tabindex thấp nhất. • Nếu ta gán cùng trị tabindex cho hơn một phần tử, thì các phần tử đó sẽ nhận focus theo thứ tự xuất hiện của chúng trong tài liệu. • VD-3.18 LTM1 – FRAME & HTML FORM – 21/22 Phím truy cập nhanh • Thuộc tính accesskey thiết lập phím truy cập nhanh cho phần tử điều khiển. • Phím truy cập là một ký tự đơn và được dùng kết hợp với phím Alt. • Khi người dùng nhấn phím truy cập, phần tử sẽ nhận focus và bắt đầu hoạt động. Username: <input type="text" name="username" accesskey="U" /> <input type="submit" name="btnSubmit" value="OK" accesskey="O" /> LTM1 – FRAME & HTML FORM – 22/22 ??? • Khác biệt giữa 2 method: post và get? • Các thuộc tính thông dụng của form. • Các phần tử điều khiển thông dụng của form. • Khác biệt giữa Checkbox List và Radio Button List? • Khác biệt giữa các loại button?