Chào anh em!

Trong thế giới HTML, nếu phải bình chọn ra một thẻ (tag) có khả năng "biến hình" vi diệu nhất, đa năng nhất và được sử dụng nhiều nhất, thì ngôi vương chắc chắn phải thuộc về thẻ <input>.

Điều làm nên sự kỳ diệu của thẻ <input> không nằm ở cái tên của nó, mà nằm ở một thuộc tính duy nhất: type. Chỉ cần thay đổi giá trị của type, bạn có thể biến một ô nhập chữ bình thường thành một bảng chọn màu, một công cụ chọn ngày tháng, hay một thanh trượt điệu đà.

Hôm nay, chúng ta hãy cùng lướt qua những giá trị đáng đồng tiền bát gạo nhất của thuộc tính type và cách HTML5 đã thay đổi cuộc chơi form nhập liệu như thế nào nhé.

1. Nhóm kinh điển: Những gương mặt thân quen

Đây là những giá trị mà bất kỳ ai gõ dòng code HTML đầu tiên cũng đều biết đến:

• type="text": Giá trị mặc định. Một ô nhập liệu một dòng văn bản bình thường.
• type="password": Kẻ bảo vệ bí mật. Mọi ký tự bạn gõ vào sẽ biến thành các dấu chấm tròn • hoặc dấu sao * để chống nhìn trộm.
• type="radio": Lựa chọn độc tôn. Cho phép người dùng chọn MỘT giá trị duy nhất trong một nhóm (ví dụ: Giới tính Nam/Nữ). Nhớ gom nhóm chúng lại bằng chung một thuộc tính name nhé.
• type="checkbox": Lựa chọn đa luồng. Cho phép tick chọn nhiều giá trị cùng lúc (ví dụ: Sở thích).

2. Cuộc cách mạng HTML5: "Nịnh" thiết bị di động và tự động Validate

Trước HTML5, để bắt người dùng phải nhập đúng định dạng email hoặc số điện thoại, lập trình viên phải viết những đoạn regex JavaScript dài ngoằng. HTML5 ra đời và mang theo những type mới giải quyết bài toán này ngay từ tầng giao diện, đồng thời tối ưu hóa cực tốt cho trải nghiệm gõ phím trên Mobile.

• type="email": Trình duyệt sẽ tự động kiểm tra xem chuỗi nhập vào có dấu @ và tên miền hay không. Trên điện thoại, bàn phím ảo sẽ tự động hiển thị thêm phím @ và .com để người dùng gõ nhanh hơn.
• type="number": Chỉ cho phép nhập số. Nó tự động sinh ra hai nút mũi tên nhỏ (spinner) để tăng/giảm giá trị. Bàn phím điện thoại sẽ tự động mở bàn phím số (Numpad) thay vì bàn phím chữ.
• type="tel": Dành riêng cho số điện thoại. Bàn phím di động sẽ lập tức chuyển sang chế độ gọi điện (chỉ có số và các dấu +, *, #).
• type="url": Tự động validate định dạng đường dẫn web (phải có http:// hoặc https://). Bàn phím điện thoại sẽ ưu tiên hiển thị dấu / và phím .com.

Mẹo UI/UX: Việc sử dụng đúng type cho các trường dữ liệu là nguyên tắc tối thượng trong thiết kế Mobile Web, giúp giảm thiểu sự ức chế của người dùng khi phải chuyển đổi qua lại giữa các chế độ bàn phím.

3. Nhóm UI Widgets: Khi HTML "cướp" việc của JavaScript

Ngày xưa, muốn làm một bộ chọn ngày tháng (Datepicker), chúng ta phải nhúng nguyên một bộ thư viện jQuery UI nặng nề. Bây giờ, thuộc tính type đã "gánh" hết:

• type="date": Trình duyệt tự động bung ra một bộ lịch (Calendar) cực kỳ mượt mà và chuẩn native theo hệ điều hành (Windows, iOS, Android).
• type="time": Cung cấp giao diện chọn giờ/phút/giây chuẩn xác.
• type="color": Mở ra một bảng pha màu (Color Picker) của hệ điều hành, trả về mã màu HEX (ví dụ: #ff0000).
• type="range": Biến ô nhập liệu thành một thanh trượt (Slider) điệu đà. Cực kỳ hữu dụng cho các tính năng như chỉnh âm lượng, độ sáng hoặc chọn tầm giá.

4. Kẻ ẩn danh vĩ đại: type="hidden"

Dù không hề hiển thị bất cứ thứ gì lên màn hình, type="hidden" lại là một trong những giá trị được các Backend Developer sử dụng nhiều nhất.

Nó dùng để âm thầm chứa những dữ liệu quan trọng mà hệ thống cần truyền đi khi submit Form, nhưng không muốn người dùng nhìn thấy hoặc chỉnh sửa trực tiếp trên giao diện.

Ứng dụng thực tế:

• Lưu trữ ID của bản ghi đang được chỉnh sửa.
• Lưu trữ mã bảo mật CSRF Token để chống giả mạo request.
• Chuyển tiếp các thông số tracking, UTM source từ trang này sang trang khác.

Lời kết

Thuộc tính type của thẻ <input> là một minh chứng hoàn hảo cho sự tiến hóa của trình duyệt Web. Bằng cách tận dụng đúng và đủ các giá trị của nó, lập trình viên không chỉ giảm bớt được hàng trăm dòng code JavaScript thừa thãi, mà còn mang lại một trải nghiệm tương tác (UX) tự nhiên, mượt mà và an toàn nhất cho người dùng cuối.

Hãy rà soát lại các Form nhập liệu trong dự án của bạn, xem đã tối ưu hóa thuộc tính type chưa nhé!