Các kiểu HTML5 Form Input : Date, Color và Range

Html & Javascript 01-4-2015

Hầu hết các trang web hay blog hiện nay đều sử dụng Form cho mục đích tương tác với người dùng. Các trang web nổi tiếng như Facebook, Twitter, Google.. dùng nó để tạo cho người dùng có thể đăng nhập vào hệ thống, hay chỉ đơn giản là gửi thông tin liên hệ đến người quản trị website. Thật sự Form đóng một vai trò rất quan trọng trong một website.

blogspot hack, html5 tips, jQuery Selectors, thủ thuật html5,thủ thuật jquery

Một web form được xây dựng bởi nhiều thẻ <input> , trước đây , thẻ này chỉ có 1 vài kiểu như là : text, password, radio, checkbox vàsubmit. Và khi HTML5 ra đời thì nó bổ sung thêm cho chúng ta nhiều lựa chọn khác. Trong bài viết này mình chỉ giới thiệu cho các bạn 3 kiểu mới , đó là : Date, Color và Range. Nào chúng ta cùng tìm hiểu xem chúng có thể cho chúng ta những tính năng gì.

1 Date

Cái đầu tiên mà chúng ta cần phải tìm hiểu đó là tính năng chọn ngày tháng trong các form nhập liệu. Khi bạn đăng kí làm thành viên ở một trang web nào đó, khi đến mục nhập ngày tháng , năm sình thì thường có chức năng lịch sẽ được hiển thị dưới dạng pop up, rồi cho phép bạn chọn ngày tháng, năm sinh của mình từ lịch đó. Thông thường, để làm chức năng này,bạn sẽ phải sử dụng thư viện JavaScirpt hay jQuery. Nhưng giờ đây với HTML5 bạn chỉ cần khai báo trong form nhập liệu như sau :

<input type="date">

Ngoài ra bạn cũng có thể chọn lưa chi tiết hơn như sau :

<input type="month">

<input type="week">

<input type="time">

<input type="datetime">

<input type="datetime-local">

Có một điều cần chú ý là không phải tất cả các trình duyệt hiện nay đều hỗ trợ và hiển thị ngày tháng giống nhau. Vì thế khi bạn quyết định sử dụng những tính năng này thì xin kiểm tra trước trên các trình duyệt.

2 Color Picker

Đây là một tính năng thường được dùng trong các ứng dụng web, cho phép người dùng chọn lựa màu theo ý muốn. Để hiểu rõ hơn các bạn xem qua trang CSS3 gradient generator này.
Trước đây khi làm những ứng dụng như thế , chúng ta phải sử dụng JavaScript như jsColor, nhưng bây giờ thì chỉ cần khai báo như thế này :

<input type="color">

Nếu bạn cần ấn định màu mặc định thì :

<input type="color" value="#ff0000">

Các trình duyệt lại một lần nữa không hỗ trợ đồng bộ cho chức năng này. vì thế các bạn cần kiểm tra kỹ trước khi sử dụng chúng. Để kiểm tra tốt nhất, mình xin chia sẻ với các bạn một đoạn code nhỏ về cách sử dụng chức năng này, các bạn chỉ cần copy đoạn code bên dưới và sau đó cho chạy trên các trình duyệt khác nhau, để có thể thấy rõ sự khác biệt:

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Form: Color Picker - sharecode.vn</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

 $(function(){

//Color var color = $('#colorpicker').val();

hexcolor = $('#hexcolor');

hexcolor.html(color);

$('#colorpicker').on('change', function() { hexcolor.html(this.value); }); });

 </script>

</script>

</head>

<body>

<section id="forms">

<h3>Color Picker</h3>

<form action="color_form" method="get" accept-charset="utf-8">

<label for="color">Color</label>

<input type="color" id="colorpicker" name="color" value="#ff0000">

<div id="hexcolor"></div>

</form>

</section>

</body>

</html>

3 Range

Với kiểu khai báo :

<input type="range">

HTML5 sẽ cho phép bạn tạo một slider trên trình duyệt web như hình bên dưới :

blogspot hack, html5 tips, jQuery Selectors, thủ thuật html5,thủ thuật jquery

Bạn cũng có thể chuyển về dạng thẳng đứng như sau :

input[type=range] {

width: 20px;

height: 200px;

-webkit-appearance: slider-vertical;

}

blogspot hack, html5 tips, jQuery Selectors, thủ thuật html5,thủ thuật jquery

Thêm vào đó, bạn có thể chỉ định giá trị thấp nhất (min) và giá trị cao nhất (max). ví dụ :

<input type="range" name="range" min="0" max="225">

Nếu bạn không ấn định giá trị min và max thì mặc định , trình duyệt sẽ ấn định từ 0 – 100.
Sau đây là một ứng dụng nhỏ về cách sử dụng tính năng range này, các bạn copy đoạn code trên và kiểm tra trên nhiều loại trình duyệt để thấy sự khác biệt nhá.

DDDDD; padding: 25px; }

 input { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; margin-bottom: 10px; width: 180px; }

 input[type="color"] { float: left; width: 50px; }

 input[type="range"] { float: left; }

 #hexcolor { background-color: #FFFFFF; border: 1px solid #CCCCCC; float: left; font-size: 10pt; margin-left: 10px; padding: 5px; width: 90px; }

 #output { background-color: #FFFFFF; border: 1px solid #CCCCCC; float: left; font-size: 10pt; margin-left: 10px; padding: 5px; width: 50px; }

 </style>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 <script>

 $(function(){

 Range var val = $('#slider').val();

 output = $('#output');

 output.html(val);

 $('#slider').on('change', function(){ output.html(this.value); });

  

 });

  </script>

  </script>

  </head>

  <body>

  <section id="forms">

  <h3>Range</h3>

  <form action="range_form" method="get" accept-charset="utf-8">

  <div> <h4>Horizontal Slider</h4>

   <label for="range">Range</label>

   <input type="range" id="slider" value="10" name="range">

    <div id="output"></div> </div> </form>

    </section>

    </body>

 </html>

Với sự ra đời của HTML5 đã làm cho công việc trước kia trở nên đơn giản hơn phải không các bạn. Mình hy vọng một ngày không xa, tất cả các trình duyệt sẽ đều hỗ trợ những tính năng mà HTML5 mang lại.