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

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.
Nội dung trích xuất từ tài liệu:
Bài giảng Lập trình mạng: Bài 2 - Đoàn Thiện NgânFRAME – 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 FrameFrame: công cụ chia cửa sổ trình duyệt thành các vùng riêngbiệ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.MaleFemale 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 ButtonButton: 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ú ý: T ...