17/04/2017 07:33:31 PM

Phần mềm

Tìm hiểu các kiểu HTML5 Form Input : Date, Color và Range

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.

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 :

<inputtype="date">

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

<inputtype="month">

<inputtype="week">

<inputtype="time">

<inputtype="datetime">

<inputtype="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.

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.

Trước đây, 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 :

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

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. <!DOCTYPEhtml>

<html>

<head>

<title>HTML5 Form: Color Picker - thuthuatweb.net</title>

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

$(function(){

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

hexcolor = $('#hexcolor');

hexcolor.html(color);

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

</script>

</head>

<body>

<sectionid="forms">

<h3>Color Picker</h3>

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

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

<inputtype="color"id="colorpicker"name="color"value="#ff0000">

<divid="hexcolor"></div>

</form>

</section>

</body>

</html>

3 Range

Với kiểu khai báo :

<inputtype="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 :

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;

}

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ụ :

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.<!DOCTYPEhtml>

<html>

<head>

<title>HTML5 Form - thuthuatweb.net</title>

<styletype="text/css">

.cf:before, .cf:after { content: " "; display: table; }

.cf:after { clear: both; }

.cf { }

html { background-color: #EAEAEA; }

h3 { background-color: #000000; clear: both; color: #FFFFFF; margin: 0; padding: 25px; width: 370px; }

h4 { clear: both; width: 100%; }

label { display: inline-block; float: left; font-size: 10pt; margin-top: 5px; width: 110px; }

section { border-radius: 5px 5px 5px 5px; margin: 50px auto; overflow: hidden; width: 420px; }

form { background-color: #DDDDDD; 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>

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

$(function(){

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

output = $('#output');

output.html(val);

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

});

</script>

</head>

<body>

<sectionid="forms">

<h3>Range</h3>

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

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

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

<inputtype="range"id="slider"value="10"name="range">

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

</section>

</body>

</html>

» Tin mới nhất:

Từ WebAssembly đến Bun: Cuộc Cách Mạng Mới Trong Lập Trình (18/04/2025)
LÀM THẾ NÀO ĐỂ TRỞ THÀNH CHUYÊN VIÊN BACK-END JAVA? (18/03/2025)
Làm thế nào để trở thành Java Developer giỏi (17/01/2025)
Công nghệ Web3 là gì? (18/11/2024)
TÌM HIỂU VỀ HỆ THỐNG TRỢ LÝ ẢO (18/09/2024)

» Các tin khác:

12 Tính năng về HTML5 (17/04/2017)
Công nghệ thành phần phân tán WCF (16/10/2015)
Công nghệ thành phần COM (16/10/2015)
CÁC GIAI ĐOẠN CỦA CHU TRÌNH PHÁT TRIỂN PHẦN MỀM VỚI MÔ HÌNH HƯỚNG ĐỐI TƯỢNG (18/04/2015)
CÁC ƯU ĐIỂM CỦA PHƯƠNG PHÁP HƯỚNG ĐỐI TƯỢNG (18/04/2015)
Những phần mềm miễn phí xử lý đồng loạt ảnh (14/06/2013)

Hôm nay, ngày

10/07/2025

Tuần học:

Sinh viên tiêu biểu

video

Số lượt truy cập: 10122270