Bài giảng Lập trình mạng: Bài 2 - Đoàn Thiện Ngân

Chia sẻ: 5A4F5AFSDG 5A4F5AFSDG | Ngày: | Loại File: PDF | Số trang:22

Thêm vào BST

Báo xấu

38
lượt xem 3
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài 2 giới thiệu về Frame và HTML Form. Nội dung chính trong chương này gồm có: Frame, tạo frame, frame trong dòng – phần tử iframe, HTML form, tạo form, các điều khiển trên form, textfield, password field, textarea, checkbox,... Mời các bạn tham khảo.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Lập trình mạng: Bài 2 - Đoàn Thiện Ngân

FRAME – HTML FORM GV: ĐOÀN THIỆN NGÂN
Nội dung • Chương 3: Frame và HTML Form • Frame • Form üAttributes üElements LTM1 – FRAME & HTML FORM – 2/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 – 3/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 – 4/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 – 5/22
Frame trong dòng – Phần tử iframe • Thẻ được sử dụng để tạo frame trong dòng văn bản Nội dung hiển thị khi trình duyệt không hỗ trợ frame LTM1 – FRAME & HTML FORM – 6/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 – 7/22
Tạo form • Thẻ form … … • 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 – 8/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 – 9/22
Textfield • Textfield: nhập văn bản đơn dòng, thẻ với thuộc tính type="text": LTM1 – FRAME & HTML FORM – 10/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": LTM1 – FRAME & HTML FORM – 11/22
Textarea • Textarea: nhập văn bản nhiều dòng, thẻ văn bản LTM1 – FRAME & HTML FORM – 12/22
Checkbox • Checkbox: thẻ với type="checkbox": LTM1 – FRAME & HTML FORM – 13/22
Radio button • Radio button: thẻ với type="radio": • Để 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 – 14/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 – 15/22
Button Button: Thẻ với type tương ứng • 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 – 16/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 – 17/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 – 18/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ể: v Click chuột vào phần tử. v Di 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. v Nhấn phím tắt tương ứng với điều khiển để đặt focus nhanh LTM1 – FRAME & HTML FORM – 19/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 – 20/22