Nhìn vào các dạng đầu vào của HTML5 Kiểu ngày, màu sắc và phạm vi
Các hình thức được tìm thấy ở khắp mọi nơi trên các trang web. Facebook, Twitter, Google - chỉ để đặt tên cho một vài người - yêu cầu chúng tôi đăng nhập hoặc đăng ký vào trang web thông qua một biểu mẫu, trên thực tế chúng tôi cũng sử dụng một biểu mẫu để tweet và cập nhật trạng thái trong các trang xã hội. Nói ngắn gọn, biểu mẫu là một phần rất quan trọng để có thể tương tác với một trang web.
Một hình thức web được xây dựng với đầu vào, trước đây, chúng tôi chỉ có một vài tùy chọn cho các loại đầu vào; nhu la bản văn, mật khẩu, radio, hộp kiểm và Gửi đi. Bây giờ, HTML5 đi kèm với những cải tiến tuyệt vời và giới thiệu nhiều loại đầu vào mới trong thông số kỹ thuật.
Vì vậy, trong bài đăng này, chúng tôi sẽ đào sâu vào một số phần thú vị mới từ Biểu mẫu HTML5 rằng chúng tôi nghĩ bạn nên thử chúng; hãy kiểm tra chúng.
Bảng chọn ngày
Điều đầu tiên chúng tôi muốn xem xét là người chọn ngày. Chọn ngày là một điều phổ biến bạn có thể tìm thấy trong mẫu đăng ký, đặc biệt là trong một số trang web hoặc ứng dụng như đặt vé máy bay và khách sạn.
Có nhiều Thư viện JavaScript để tạo bộ chọn ngày. Giờ đây, chúng ta cũng có thể tạo một cách dễ dàng hơn nhiều với đầu vào HTML5 ngày, như sau;
Các bảng chọn ngày trong HTML5 về cơ bản hoạt động rất giống với cách các Thư viện JavaScript đã làm; Khi chúng tôi tập trung vào lĩnh vực, lịch sẽ bật ra và sau đó chúng tôi có thể điều hướng qua các tháng và năm để chọn ngày.
Tuy nhiên, mỗi trình duyệt hiện hỗ trợ ngày loại đầu vào cụ thể là Chrome, Opera và Safari hiển thị loại đầu vào này hơi khác một chút có thể dẫn đến sự cố không thống nhất trong trải nghiệm người dùng và đây là giao diện của nó;
Một số khác biệt đáng chú ý bạn có thể thấy trong nháy mắt từ ảnh chụp màn hình ở trên; Opera sử dụng tên viết tắt ba chữ cái tiếng Anh cho tên ngày - Sun, Mon, Thu, v.v., trong khi Chrome sử dụng ngôn ngữ địa phương của tôi, Safari - mặt khác - hoạt động khá kỳ lạ, nó không hiển thị lịch ở tất cả.
Ngoài ra còn có một số mới đầu vào loại để chọn ngày hoặc thời gian cụ thể hơn; tháng, tuần, thời gian, ngày giờ và datetime-local, mà chúng tôi chắc chắn rằng bản thân từ khóa khá dễ hiểu để nói nó làm gì.
Bạn có thể xem tất cả chúng hoạt động từ liên kết bên dưới, nhưng hãy đảm bảo bạn xem nó trong Opera 11 trở lên, vì, tại văn bản, đây là trình duyệt duy nhất hỗ trợ tất cả các loại đầu vào đó.
- Trình diễn hẹn hò
Bộ chọn màu
Bộ chọn màu thường là cần thiết trong một số ứng dụng dựa trên web nhất định, chẳng hạn như trình tạo gradient CSS3 này, nhưng tất cả các nhà phát triển web thời gian này vẫn dựa vào Thư viện JavaScript, chẳng hạn như jsColor, để thực hiện công việc. Nhưng bây giờ chúng ta có thể tạo một trình chọn màu trình duyệt riêng với HTML5 màu kiểu đầu vào;
Một lần nữa, các trình duyệt, trong trường hợp này là Chrome và Opera, hiển thị loại đầu vào này hơi khác nhau;
Opera trước tiên hiển thị tùy chọn màu cơ bản khi nhấp cũng như định dạng hex của màu được chọn hiện tại trong danh sách thả xuống, trong khi Chrome sẽ trực tiếp bật bảng màu trong cửa sổ mới khi nhấp vào.
Hơn nữa, chúng ta cũng có thể đặt màu mặc định với giá trị thuộc tính, như sau;
Theo cách đó, khi nó được xem trong các trình duyệt không được hỗ trợ, đầu vào sẽ xuống cấp trong một trường văn bản và giá trị mặc định sẽ hiển thị có thể đưa ra một loại gợi ý cho người dùng những gì nên nhập vào trường.
Hiển thị giá trị màu
Thay vì mở Photoshop chỉ để sao chép lục giác định dạng màu, bạn thực sự có thể tạo một công cụ đơn giản dựa trên loại đầu vào này để thực hiện công việc, vì màu được tạo đã ở dạng thập lục phân, điều này sẽ thực sự dễ dàng;
Đầu tiên, chúng tôi thêm id tô màu vào đầu vào và chúng tôi cũng thêm một khoảng trống div với id lục giác bên cạnh nó để chứa giá trị.
Chúng tôi cần jQuery liên kết trong cái đầu tài liệu của chúng tôi. Sau đó, chúng tôi lưu trữ giá trị màu sắc và mới được thêm vào div trong một biến, như vậy;
var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); Lấy giá trị ban đầu từ #colorpicker;
hexcolor.html (màu);
Thay đổi và cuối cùng thay đổi giá trị khi màu được chọn cũng được thay đổi;
$ ('# colorpicker'). on ('thay đổi', function () hexcolor.html (this.value);); Đó là nó; bây giờ hãy xem nó hoạt động.
- Trình diễn màu
Phạm vi
Các phạm vi kiểu đầu vào cho phép chúng ta thêm một thanh trượt trong trình duyệt để chọn số trong phạm vi mà chúng ta cũng có thể tìm thấy trong jQuery UI.
Đoạn trích trên là cơ bản để thực hiện phạm vi kiểu đầu vào. Chúng tôi cũng có thể thay đổi hướng trượt sang dọc bằng CSS, như sau;
đầu vào [loại = phạm vi] width: 20px; chiều cao: 200px; -webkit-ngoại hình: thanh trượt dọc;
Ngoài ra, chúng ta có thể thiết lập tối thiểu và tối đa phạm vi của các số, ví dụ;
Trong đoạn trích dưới đây, chúng tôi đặt tối thiểu đến không và 225 cho tối đa Khi chúng không được chỉ định rõ ràng, theo mặc định, trình duyệt sẽ lấy 0 tối thiểu để 100 tối đa.
Hiển thị số
Mặc dù có một ràng buộc, số này là vô hình, chúng ta không thể thấy số / giá trị được tạo từ thanh trượt trong trình duyệt. Để hiển thị số lượng chúng ta cần thêm một chút JavaScript hoặc jQuery và đây là cách chúng tôi làm điều đó;
Đầu tiên chúng ta thêm một khoảng trống div bên cạnh đầu vào, tạo kiểu div đủ để nó trông giống như một cái hộp.
Sau đó đặt đoạn mã sau sẽ làm giống như đoạn mã trên trong bộ chọn màu, ngoại trừ bây giờ chúng ta nhận được giá trị từ thanh trượt.
$ (function () var val = $ ('# slide'). val (); output = $ ('# output'); output.html (val); $ ('# slide'). Change (function ( ) output.html (this.value););); Bây giờ, bạn có thể xem bản demo. Xin nhắc lại, hãy xem bản demo trong các trình duyệt này - Chrome, Opera và Safari, vì Firefox và IE không hỗ trợ phạm vi loại đầu vào tại thời điểm này.
- Giới thiệu phạm vi
Từ cuối cùng
Rõ ràng là HTML5 làm cho cuộc sống của chúng ta dễ dàng hơn rất nhiều bằng cách giới thiệu nhiều loại đầu vào mới. Nhưng như bất kỳ tính năng HTML5 nào khác, sự hỗ trợ rất hạn chế, đặc biệt là trong các trình duyệt cũ hơn, vì vậy chúng tôi nên sử dụng các tính năng mới này một cách thận trọng, đặc biệt là các loại đầu vào mới mà chúng tôi đã thảo luận trong bài đăng này; Ngày, Màu sắc và Phạm vi.
Nhưng cuối cùng chúng tôi hy vọng rằng bây giờ bạn có cái nhìn sâu sắc hơn về Biểu mẫu HTML5. Cảm ơn bạn đã đọc bài viết này, và chúng tôi hy vọng bạn thích nó.
- Bản giới thiệu
- Tải xuống nguồn
Đọc thêm
Dưới đây là một vài liên kết hữu ích để bạn tìm hiểu sâu hơn về Biểu mẫu HTML.
- Các tính năng biểu mẫu mới trong HTML5 - Opera Dev.
- Trạng thái hiện tại của các hình thức HTML5 - Wufoo
- Thuộc tính biểu mẫu HTML5 - w3school.org
- Khi nào tôi có thể sử dụng biểu mẫu HTML5? - CanIUse.com
