Đang tải... (xem toàn văn)
HTML 5 là phiên bản kế tiếp và là một phiên bản chuẩn mới.Phần lớn các trình duyệt đều hỗ trợ phần tử và giao diện lập trình ứng dụng (API Application Programming Interface) của HTML 5. HTML có khả năng mở rộng khi được sử dụng với JavaScript, hiển thị dữ liệu người dùng định nghĩa được yêu cầu mỗi khi trang web được tải trong trình duyệt.HTML động sử dụng JavaScript và CSS để làm cho các trang web trở lên động và chuyển đổi cảm quan (look and feelgiao diện) của các trang web.
NexTGen Web Bài 06: Tạo Form HTML Mục tiêu Mô tả HTML5 forms Giải thích control input HTML5 Giải thích số thuộc tính HTML5 Giải thích phần tử HTML5 © Aptech Ltd. HTML5/HTML Forms Giới thiệu Form HTML5 Web form HTML5 khu vực trang web có chứa phần tử đặc biệt thường gọi điều khiển(control). Các điều khiển check box, radio button, text box cung cấp giao diện trực quan để người dùng tương tác với chúng. Người sử dụng cung cấp liệu thông qua điều khiển gửi đến máy chủ để xử lý tiếp. Việc tạo form HTML5 thực dễ dàng cho nhà phát triển Web việc chuẩn hóa chúng điều khiển form phong phú. Nó cung cấp việc kiểm tra liệu hợp lệ phía client, chúng xử lý cách địa(natively) trình duyệt. Điều làm giảm thời gian tải trang loại bỏ cần phải đưa vào trang mã JavaScript lặp lặp lại. Ngay diện trực quan form cải thiện hiển thị thiết bị khác nhau, chẳng hạn iPhone, ipad, hình cảm ứng, trình duyệt. © Aptech Ltd. HTML5/HTML Forms Giới thiệu Form HTML5 © Aptech Ltd. Introduction to the HTML5 / Session Những Webtính Formnăng HTML5 mang lại HTML5 cảiForms tiến lớn liên quan đến việc tạo biểu mẫu cho nhà phát triển Web cho người dùng tương tác với Những thay đổi HTML5 forms: chúng. Các phần tử form Các kiểu input Các thuộc tính Kiểm tra tính hợp lệ dựa trình duyệt Công nghệ CSS3 Forms API © Aptech Ltd. HTML5/HTML Forms Các phần tử HTML5 giới thiệu loạt phần tử mới, chúng mở rộng lựa chọn cho số phần tử liên quan đến input form. Bảng sau liệt kê phần tử HTML5. Kiểu liệu Mô tả progress Đại diện cho tiến trình hoàn thành nhiệm vụ trang meter Đại diện cho quy mô phạm vi biết đến datalist Đại diện cho tập hợp tùy chọn sử dụng với danh sách thuộc tính để làm điều khiển dropdown-list output Đại diện cho kết phép tính © Aptech Ltd. HTML5/HTML Forms Các loại input 1-2 Phần tử input trường liệu cho phép người dùng soạn thảo liệu form. Nó có thuộc tính type điều khiển đặc điểm kiểu liệu phần tử đầu vào. Bảng liệt kê loại input hỗ trợ HTML5. Loại Mô tả email Cho phép nhập liệu kiểu email search Cho nhập liệu tìm kiếm url Cho nhập liệu kiểu url © Aptech Ltd. HTML5/HTML Forms Các loại input 2-2 Loại Mô tả range Đại diện cho giá trị số lựa chọn từ loạt số date Biểu diển điều khiển cho phép nhập giá trị dạng date week Biểu diển điều khiển cho phép nhập giá trị dạng year-week month Biểu diển điều khiển cho phép nhập giá trị dạng year-month time Biểu diễn điều khiển để nhập giá trị dạng hour minute datetime Biểu diển điều khiển cho phép nhập giá trị thời gian đầy đủ gồm ngày timezone(giờ khu vực) datetime- Biểu diển điều khiển cho phép nhập hiển thị thời gian đầy local đủ gồm ngày timezone color Biểu diễn cho điều khiển hiển thị hộp thoại chọn màu sắc © Aptech Ltd. HTML5/HTML Forms Một số thuộc tính HTML5 giới thiệu số thuộc tính sử dụng với phần tử input form. Thuộc tính giúp phần tử thực nhiệm vụ mình. Bảng sau liệt kê thuộc tính HTML5. Mô tả Loại placeholder Đại diện cho gợi ý giúp người dùng nhập liệu xác trường required Bắt buộc phải nhập liệu đầu vào multiple Cho phép nhập nhiều giá trị vào phần tử autofocus Đặt tiêu điểm vào phần tử trang tải Biểu diễn cho biểu thức quy tắc để kiểm tra hợp lệ giá trị nhập vào pattern form © Aptech Ltd. Cho phép phần tử tham chiếu đến form chứa tên HTML5/HTML Forms Một số thuộc tính Thuộc tính Palcehoder Thuộc tính required © Aptech Ltd. Introduction to the HTML5 / Session Multiple 1-2 Thuộc tính multiple cho phép nhập vào nhiều địa email trường. Email Address: © Aptech Ltd. HTML5/HTML Forms Multiple 2-2 Kết © Aptech Ltd. HTML5/HTML Forms Autofocus 1-2 Khi trang load trỏ đặt vào điều khiển Tuy nhiên lúc người dùng chọn điều khiển khác. Chỉ có điều khiển nhận trỏ trang tải lên. Name: First Name © Aptech Ltd. HTML5/HTML Forms Autofocus 2-2 Kết © Aptech Ltd. HTML5/HTML Forms Form Các phiên trước tất điều khiển phải đặt cặp thể mở đóng . Trong HTML5, điều khiển đặt đầu sau thuộc tính form tham chiếu đến form chứa nó. Ví dụ. . . . . . . . . . © Aptech Ltd. . . . HTML5/HTML Forms Thuộc tính Autocomplete 1-2 HTML5 cung cấp thuộc tính autocomplete cho điều khiển để người dùng chọn giá trị có sẵn. Nó phải xác định phần tử form áp dụng cho tất trường input. Phần tử input hỗ trợ autocomplete text, url, tel, password, datepickers, range, and color. Các tính autoComplete bao gồm hai trạng thái mở tắt. Về trạng thái liệu nhạy cảm nhớ trình duyệt. Trạng thái tắt liệu không ghi nhớ. Những liệu nhạy cảm không an toàn để lưu trữ với trình duyệt. Theo mặc định, nhiều trình duyệt có tính autoComplete kích hoạt đó. Các trình duyệt không hỗ trợ autocomplete, bật tắt hành vi cách xác định thuộc tính autoComplete. © Aptech Ltd. HTML5/HTML Forms Thuộc tính Autocomplete 2-2 Ví dụ autocomplete. Ví dụ tắt autocomplete. E-mail: © Aptech Ltd. HTML5/HTML Forms Các phần tử Form HTML5 giới thiệu số phần tử đưa vào trang Web. Những phần tử thiết kế đặc biệt để sử dụng với JavaScript. Khi kết hợp với JavaScript, yếu tố thêm chức năng. Hiện nay, tất trình duyệt không cung cấp hỗ trợ cho thành phần mới. Nếu điều khiển không hỗ trợ trình duyệt, sau hiển thị phần trường văn bản. Datalist Opera cung cấp hỗ trợ cho tất phần tử form. Progress Meter Output © Aptech Ltd. HTML5/HTML Forms Datalist 1-3 Datalist phần tử form cụ thể. Nó cung cấp trường văn với tập hợp danh sách xác định trước tùy chọn hiển thị danh sách thả xuống. Khi trường văn nhận trỏ, danh sách tùy chọn hiển thị cho người dùng. Các phần tử giống với phần tử chuẩn sẵn có HTML trước đó. Sự khác biệt datalist cho phép người dùng nhập liệu họ chọn từ danh sách đề nghị lựa chọn. Danh sách tùy chọn cho phần tử đặt cách sử dụng phần tử option. Sau đó, datalist kết hợp với phần tử đầu vào cách sử dụng thuộc tính list. Giá trị thuộc tính list giá trị thuộc tính id cung cấp với phần tử . © Aptech Ltd. HTML5/HTML Forms Datalist 2-3 Ví dụ Select the mode of payment: © Aptech Ltd. HTML5/HTML Forms Datalist 3-3 Kết quả. © Aptech Ltd. HTML5/HTML Forms Progress Ví dụ Downloading status: © Aptech Ltd. HTML5/HTML Forms Meter Phần tử meter biểu diễn tỉ lệ đo khoảng. Khoảng xác định giá trị max. Ví dụ. Total score of marks: 400 © Aptech Ltd. HTML5/HTML Forms Output 1-2 Phần tử output hiển thị kết tính toán form. Ví dụ Membership Type: Gold - $400 Silver - $500 Platinum - $600 Duration [years]: Annual Payment Fees: $. © Aptech Ltd. HTML5/HTML Forms Output 2-2 Kết © Aptech Ltd. HTML5/HTML Forms Tổng kết HTML5 cung cấp cải tiến tuyệt vời cho Web form. Tạo biểu mẫu thực dễ dàng cho nhà phát triển Web cách tiêu chuẩn hóa chúng với điều khiển biểu mẫu phong phú. HTML5 giới thiệu phần tử form loại input mới, thuộc tính mới, xác nhận dựa trình duyệt, kỹ thuật CSS3, Form API. HTML5 cung cấp loại input email, url, number, range, date, tel, color. Các phần tử giới thiệu HTML5 datalist, progress, meter, output. HTML5 cung cấp vài thuộc tính hỗ trợ kiểm chứng liệu đầu vào mà không cần đến javascript. Trong HTML5 sử dụng loại input cho form để submit. © Aptech Ltd. HTML5/HTML Forms [...]... type="submit" value="submit"/> © Aptech Ltd HTML5 / HTML Forms Date và Time 6-6 Datetime-local Tương tự loại datetime ngoại trừ time zone được thay bằng type="datetime-local" © Aptech Ltd HTML5 / HTML Forms Color Ví dụ Color: © Aptech Ltd HTML5 / HTML Forms Các thuộc tính mới của Form HTML5 cung cấp một số thuộc tính... Ltd HTML5 / HTML Forms Pattern 2-2 Kết quả © Aptech Ltd HTML5 / HTML Forms Multiple 1-2 Thuộc tính multiple cho phép nhập vào nhiều địa chỉ email trong một trường Email Address: © Aptech Ltd HTML5 / HTML Forms... value="submit"/> < /form> © Aptech Ltd HTML5 / HTML Forms URL Ví dụ Enter your Web page address: © Aptech Ltd HTML5 / HTML Forms Telephone Number Ví dụ Telephone Number: ©... maxlength= "10" /> © Aptech Ltd HTML5 / HTML Forms Number Ví dụ Age: © Aptech Ltd HTML5 / HTML Forms Range Ví dụ Survey for packages offered[scale: 1 -10] : ... quả © Aptech Ltd HTML5 / HTML Forms Placeholder 1-2 Ví dụ Name: © Aptech Ltd HTML5 / HTML Forms Placeholder... /> Email: < /form> ……… © Aptech Ltd HTML5 / HTML Forms Forms API HTML5 đã giới thiệu JavaScript API cho các form để tùy biến các kiểm tra hợp lệ và xử lý thực hiện trên form Forms API mới cung cấp nhiều phương thức, các sự kiện, và các thuộc tính mới để thực hiện việc kiểm tra các trường hoặc tính toán phức... chúng © Aptech Ltd HTML5 / HTML Forms Required 1-2 Ví dụ Name: © Aptech Ltd HTML5 / HTML Forms Required 2-2 . Bài 06: Tạo Form HTML NexTGen Web © Aptech Ltd. 2 HTML5 / HTML Forms Mục tiêu Mô tả HTML5 forms Giải thích về các control input mới trong HTML5 Giải thích một số thuộc tính mới trong HTML5 Giải. trên trình duyệt Công nghệ CSS3 Forms API 5 HTML5 / HTML Forms Những tính năng mới trong HTML5 Forms Web Form HTML5 mang lại những cải tiến lớn liên quan đến việc tạo biểu mẫu cho các nhà phát. background-size:10px 10px; background-position: right top; background-repeat: no-repeat; } © Aptech Ltd. 13 HTML5 / HTML Forms Các công nghệ styling CSS 2-2 input:required:invalid { background-size:10px