Khi xây dựng một trang web có biểu mẫu đăng ký, tính năng đăng nhập, tìm kiếm hay khảo sát người dùng, bạn sẽ không thể bỏ qua thẻ input trong HTML. Đây chính là cầu nối quan trọng giữa người dùng và hệ thống, giúp thu thập thông tin một cách nhanh chóng, chính xác và linh hoạt. Với hàng loạt kiểu dữ liệu và thuộc tính hỗ trợ, thẻ input không chỉ đơn giản là ô nhập liệu mà còn là công cụ mạnh mẽ để tối ưu trải nghiệm người dùng trên mọi thiết bị. Trong bài viết này, hãy cùng khám phá chi tiết cú pháp, cách sử dụng, các thuộc tính quan trọng cùng những bí quyết để khai thác tối đa sức mạnh của thẻ HTML input trong thiết kế web hiện đại nhé.
- Thẻ input trong HTML là gì?
- Cú pháp cơ bản của thẻ input
- Các thuộc tính của thẻ input trong HTML
- 1. Thuộc tính type (Loại)
- 2. Thuộc tính name (Tên)
- 3. Thuộc tính id (Mã định danh)
- 4. Thuộc tính placeholder (Văn bản gợi ý)
- 5. Thuộc tính value (Giá trị)
- 6. Thuộc tính required (Bắt buộc)
- 7. Thuộc tính disabled (Vô hiệu hóa)
- 8. Thuộc tính readonly (Chỉ đọc)
- 9. Thuộc tính maxlength, minlength, min, max
- 10. Thuộc tính pattern (Mẫu biểu thức chính quy)
- 11. Thuộc tính step (Bước nhảy)
- 12. Thuộc tính autocomplete (Tự động hoàn thành)
- Những trường hợp sử dụng thẻ HTML input hiệu quả
- Bí quyết tối ưu trải nghiệm người dùng website với thẻ input
Thẻ input trong HTML là gì?
Thẻ input là một phần tử HTML được sử dụng để tạo các trường nhập liệu tương tác, cho phép người dùng nhập dữ liệu hoặc chọn các tùy chọn khác nhau trên một biểu mẫu web. Nói cách khác, đây là cánh cổng để người dùng tương tác và gửi thông tin đến website của bạn, ví dụ như tên đăng nhập, mật khẩu, địa chỉ email hoặc các lựa chọn trong một cuộc khảo sát.
Cú pháp cơ bản của thẻ input
Thẻ input HTML là một thẻ đơn (self-closing tag) - tức là không cần thẻ đóng và thường được sử dụng bên trong các biểu mẫu (web form). Cú pháp chung của thẻ này có dạng như sau:
< input type="value" name="value" id="value" placeholder="value" / >
Hoặc bạn cũng có thể bỏ dấu gạch chéo cuối cùng:
< input type="value" name="value" id="value" placeholder="value" >
Ví dụ:
< input type="text" name="fullname" placeholder="Nhập họ tên của bạn" >
Các thuộc tính của thẻ input trong HTML
Thẻ input trở nên mạnh mẽ và linh hoạt chính là nhờ hệ thống thuộc tính phong phú. Dưới đây là các thuộc tính của thẻ input trong HTML vô cùng quan trọng và thường xuyên được sử dụng mà bạn nên nằm lòng.
1. Thuộc tính type (Loại)
Thuộc tính type là thuộc tính cốt lõi và quan trọng nhất của thẻ HTML input. Nó xác định loại trường nhập liệu mà bạn muốn hiển thị, từ đó định hình hành vi và giao diện của input.
Cú pháp: type="giá_trị"
Các giá trị phổ biến của thuộc tính type bao gồm:
- Type="text": Tạo ra một trường nhập văn bản một dòng. Đây là loại input mặc định và được sử dụng rộng rãi nhất cho các thông tin như tên, địa chỉ. Ví dụ: < input type="text" name="username" placeholder="Nhập tên của bạn" >
- Type="password": Tạo ra một trường nhập mật khẩu, các ký tự nhập vào sẽ được ẩn đi (thường hiển thị dưới dạng dấu chấm hoặc dấu sao) để bảo mật. Ví dụ: < input type="password" name="password" placeholder="Mật khẩu" >
- Type="email": Dành cho việc nhập địa chỉ email. Trình duyệt có thể tự động kiểm tra định dạng email cơ bản khi biểu mẫu được gửi. Ví dụ: < input type="email" name="email" placeholder="Địa chỉ email của bạn" >
- Type="number": Tạo một trường cho phép nhập số. Trình duyệt thường cung cấp các mũi tên nhỏ để tăng hoặc giảm giá trị. Ví dụ: < input type="number" name="age" min="1" max="100" placeholder="Tuổi của bạn" >.
- Type="checkbox": Tạo một hộp kiểm, cho phép người dùng chọn nhiều lựa chọn từ một danh sách.
- Type="radio": Tạo một nút chọn, cho phép người dùng chọn chỉ một lựa chọn duy nhất từ một nhóm các lựa chọn. Các radio button trong cùng một nhóm phải có cùng thuộc tính.
- Type="submit": Tạo một nút dùng để gửi dữ liệu của biểu mẫu đến máy chủ.
- Type="button": Tạo một nút bấm đa năng. Nút này không có hành động mặc định nào khi nhấp vào, bạn cần sử dụng JavaScript để gán chức năng cho nó.
- Type="file": Cho phép người dùng chọn một hoặc nhiều tệp tin từ máy tính của họ để tải lên.
- Type="date": Cung cấp một bộ chọn ngày tháng tiện lợi cho người dùng.
2. Thuộc tính name (Tên)
Thuộc tính name là thuộc tính cực kỳ quan trọng khi bạn muốn dữ liệu từ trường input được gửi đến máy chủ. Khi một biểu mẫu được gửi đi, dữ liệu của mỗi trường input sẽ được gửi kèm với tên được chỉ định trong thuộc tính name. Máy chủ sẽ sử dụng tên này để nhận diện và xử lý dữ liệu.
Cú pháp: name="tên_trường_dữ_liệu"
Ví dụ:
< input type="text" name="hoTenNguoiDung" / >
< input type="password" name="matKhau" / >
Trong ví dụ trên, khi biểu mẫu được gửi, máy chủ sẽ nhận được dữ liệu của trường văn bản dưới tên hoTenNguoiDung và dữ liệu của trường mật khẩu dưới tên matKhau.
- Lưu ý quan trọng: Đối với các trường radio button, tất cả các nút trong cùng một nhóm (chỉ được chọn một) phải có cùng thuộc tính name.
3. Thuộc tính id (Mã định danh)
Thuộc tính id dùng để cung cấp một mã định danh duy nhất cho một phần tử HTML trên trang. Mỗi id trên cùng một trang HTML phải là duy nhất. Mặc dù không bắt buộc để gửi dữ liệu đến máy chủ, id lại rất quan trọng cho việc gắn label hoặc thao tác bằng JavaScript.
Cú pháp: id="mã_định_danh_duy_nhat"
Ví dụ:
< label for="tenDangNhap">Tên đăng nhập: < /label >
< input type="text" id="tenDangNhap" name="username" / >
< label for="matKhau">Mật khẩu:< /label >
< input type="password" id="matKhau" name="password" / >
4. Thuộc tính placeholder (Văn bản gợi ý)
Thuộc tính placeholder không phải là thuộc tính bắt buộc, nhưng nó rất hữu ích để cung cấp một gợi ý ngắn gọn hoặc mô tả về dữ liệu mong muốn trong trường input khi trường đó còn trống. Văn bản này sẽ biến mất ngay khi người dùng bắt đầu nhập liệu.
Cú pháp: placeholder="văn_bản_gợi_ý"
Ví dụ:
< input type="text" name="hoTen" placeholder="VD: Nguyễn Văn A" / >
< input type="email" name="email" placeholder="email@example.com" / >
5. Thuộc tính value (Giá trị)
Thuộc tính value xác định giá trị ban đầu (mặc định) của trường input hoặc giá trị mà trường đó sẽ gửi đi khi biểu mẫu được submit.
Cú pháp: value="giá_trị_ban_đầu_hoặc_gửi_đi"
Ví dụ:
- Với type="text", type="email", etc.: Đặt giá trị mặc định cho trường nhập liệu < input type="text" name="ten" value="Nguyen Van A" >
- Với type="submit", type="button", type="reset": Bạn cần xác định văn bản hiển thị trên nút < input type="submit" value="Đăng nhập" >
- Với type="checkbox", type="radio": Xác định giá trị sẽ được gửi đi nếu tùy chọn đó được chọn.
< input type="checkbox" name="dongY" value="da_dong_y" > Tôi đồng ý với điều khoản
< input type="radio" name="kichCo" value="L" > Large
6. Thuộc tính required (Bắt buộc)
Thuộc tính required là một thuộc tính boolean. Khi nó hiện diện, trường input đó trở thành bắt buộc phải điền. Trình duyệt sẽ ngăn không cho biểu mẫu được gửi đi nếu trường này trống, và hiển thị thông báo lỗi mặc định.
Cú pháp: required (không cần gán giá trị)
Ví dụ:
< input type="text" name="username" required >
< input type="email" name="email" required placeholder="Bắt buộc" >
7. Thuộc tính disabled (Vô hiệu hóa)
Thuộc tính disabled là một thuộc tính boolean. Khi nó hiện diện, trường input đó sẽ bị vô hiệu hóa, người dùng không thể tương tác (nhập liệu, chọn) và giá trị của nó sẽ không được gửi khi biểu mẫu được submit.
Ví dụ:
< input type="text" name="maDonHang" value="DH20250702" disabled >
< input type="submit" value="Gửi" disabled >
Thuộc tính disabled thường được dùng khi bạn muốn hiển thị thông tin nhưng không cho phép chỉnh sửa, hoặc khi một nút cần được vô hiệu hóa cho đến khi các điều kiện nhất định được đáp ứng.
8. Thuộc tính readonly (Chỉ đọc)
Thuộc tính readonly cũng là một thuộc tính boolean. Khi nó hiện diện, trường input đó sẽ chỉ ở chế độ đọc, người dùng không thể chỉnh sửa giá trị của nó. Tuy nhiên, khác với disabled, giá trị của trường readonly vẫn sẽ được gửi khi biểu mẫu được submit. Thuộc tính readonly thường được dùng cho các trường có giá trị đã được xác định trước và không cần người dùng thay đổi, nhưng vẫn cần dữ liệu đó được gửi đi.
Ví dụ:
< input type="text" name="ngayTao" value="02/07/2025" readonly >
9. Thuộc tính maxlength, minlength, min, max
Các thuộc tính này dùng để đặt giới hạn cho giá trị nhập vào, giúp kiểm soát dữ liệu đầu vào ngay từ phía người dùng.
- Maxlength: Giới hạn số ký tự tối đa mà người dùng có thể nhập vào các trường text, password, email, tel, url, search.
- Minlength: Giới hạn số ký tự tối thiểu mà người dùng phải nhập vào các trường text, password, email, tel, url, search.
- Min: Đặt giá trị tối thiểu cho các trường number, range, date, datetime-local, month, week, time.
- Max: Đặt giá trị tối đa cho các trường number, range, date, datetime-local, month, week, time.
10. Thuộc tính pattern (Mẫu biểu thức chính quy)
Thuộc tính pattern cho phép bạn định nghĩa một biểu thức chính quy (regular expression) mà giá trị của trường input phải khớp với nó để được coi là hợp lệ. Thuộc tính này thường sẽ hoạt động với các loại type = "text", search, url, tel, email và password.
Cú pháp: pattern="biểu_thức_chính_quy"
Ví dụ: < input type="text" name="maSP" pattern="[A-Z]{3}[0-9]{4}" title="Mã sản phẩm phải có 3 chữ cái viết hoa và 4 chữ số (ví dụ: ABC1234)" >
Trong ví dụ này, pattern="[A-Z]{3}[0-9]{4}" yêu cầu giá trị phải bắt đầu bằng 3 chữ cái viết hoa, sau đó là 4 chữ số. Thuộc tính title thường được dùng để cung cấp gợi ý cho người dùng nếu dữ liệu không khớp với pattern.
11. Thuộc tính step (Bước nhảy)
Thuộc tính step xác định khoảng cách "bước nhảy" hợp lệ giữa các giá trị cho các trường số (number, range) hoặc thời gian (date, datetime-local, month, week, time).
Cú pháp: step="giá_trị_bước_nhảy"
Ví dụ: < input type="number" name="soLuong" step="5" min="0" max="100" >
Trong ví dụ trên, với step="5", người dùng có thể nhập 0, 5, 10, ... 100. Nếu họ nhập một số không chia hết cho 5 (ví dụ 7), trình duyệt sẽ báo lỗi khi submit.
12. Thuộc tính autocomplete (Tự động hoàn thành)
Thuộc tính autocomplete kiểm soát việc trình duyệt có nên tự động điền các giá trị đã nhập trước đó vào trường input hay không. Điều này giúp người dùng tiết kiệm thời gian.
Cú pháp: autocomplete="on|off|tên_trường_thông_tin"
Ví dụ:
- Autocomplete="on" cho phép trình duyệt tự động điền (mặc định): < input type="text" name="diaChi" autocomplete="on" >
- Autocomplete="off" tắt tính năng tự động điền cho trường đó: < input type="password" name="newPassword" autocomplete="off" >
- Autocomplete="email" gợi ý email đã lưu: < input type="email" name="userEmail" autocomplete="email" >
Những trường hợp sử dụng thẻ HTML input hiệu quả
Thẻ input không chỉ là thành phần cơ bản trong biểu mẫu mà còn là công cụ cực kỳ linh hoạt, hỗ trợ nhiều loại tương tác khác nhau giữa người dùng và website. Tùy theo mục đích sử dụng, bạn có thể chọn kiểu input (qua thuộc tính type) phù hợp để tối ưu trải nghiệm người dùng và đảm bảo dữ liệu được nhập đúng định dạng.
1. Tạo biểu mẫu đăng ký/đăng nhập
Đây có lẽ là ứng dụng phổ biến và quen thuộc nhất của thẻ input trong HTML. Hầu như mọi trang web đều yêu cầu người dùng đăng ký hoặc đăng nhập để truy cập các tính năng hoặc nội dung cá nhân.
Các loại input thường dùng:
- type="text" – Nhập tên hoặc username
- type="email" – Nhập địa chỉ email
- type="password" – Nhập và xác nhận mật khẩu
- type="checkbox" – Ghi nhớ đăng nhập
- type="submit" – Gửi biểu mẫu
Ví dụ:
< form action="/login" method="post" >
< label for="loginEmail" > Địa chỉ Email:< /label >
< input type="email" id="loginEmail" name="email" placeholder="example@domain.com" required autocomplete="username" >
< br > < br >
< label for="loginPassword">Mật khẩu:< /label >
< input type="password" id="loginPassword" name="password" placeholder="********" required autocomplete="current-password" >
< br > < br >
< input type="submit" value="Đăng Nhập" >
< /form >
2. Xây dựng bộ lọc và tìm kiếm
Chức năng tìm kiếm và bộ lọc nâng cao là không thể thiếu trên các trang web có nhiều nội dung hoặc sản phẩm (ví dụ: website tin tức, thương mại điện tử). Lúc này, thẻ input HTML cung cấp các công cụ cần thiết để người dùng nhập từ khóa và tinh chỉnh kết quả.
Các loại input thường dùng bao gồm:
- Trường tìm kiếm: Input type="search" được khuyến khích vì nó có thể cung cấp các tính năng bổ sung của trình duyệt như nút xóa nội dung hoặc biểu tượng kính lúp trên một số trình duyệt/thiết bị. Nếu không, input type="text" cũng hoàn toàn đáp ứng được.
- Bộ lọc bằng hộp kiểm: Type="checkbox" dùng để cho phép người dùng chọn nhiều tiêu chí lọc cùng lúc (ví dụ: chọn nhiều nhãn hiệu, nhiều kích cỡ, nhiều màu sắc).
- Bộ lọc bằng nút chọn: Type="radio" dùng khi người dùng chỉ được phép chọn một tiêu chí lọc trong một nhóm (ví dụ: Sắp xếp theo giá Tăng dần/Giảm dần, lọc theo trạng thái "Còn hàng"/"Hết hàng").
- Bộ lọc giá trị số: Input type="number" cho phép nhập khoảng giá trị số chính xác (ví dụ: "Giá từ... đến...") và input type="range" giúp tạo thanh trượt để chọn giá trị trong một khoảng xác định (thường dùng cho khoảng giá, kích thước).
Ví dụ:
< form action="/products" method="get" >
< input type="search" name="q" placeholder="Tìm kiếm sản phẩm..." autofocus >
< input type="submit" value="Tìm" >
< h4 >Thương hiệu:< /h4 >
< input type="checkbox" name="brand" value="Apple" > Apple
< input type="checkbox" name="brand" value="Samsung" > Samsung
< input type="checkbox" name="brand" value="Xiaomi" > Xiaomi
< h4 > Sắp xếp theo: < /h4 >
< input type="radio" name="sortBy" value="price_asc" > Giá tăng dần
< input type="radio" name="sortBy" value="price_desc" > Giá giảm dần
< h4 > Khoảng giá: < /h4 >
< label for="minPrice" > Từ: < /label >
< input type="number" id="minPrice" name="min_price" min="0" placeholder="0" >
< label for="maxPrice" > Đến: < /label >
< input type="number" id="maxPrice" name="max_price" min="0" placeholder="1000" >
< input type="submit" value="Lọc" >
< /form >
3. Thu thập dữ liệu khảo sát
Thẻ input là công cụ lý tưởng để tạo các cuộc khảo sát, thăm dò ý kiến hoặc biểu mẫu phản hồi, nơi bạn cần thu thập các loại dữ liệu khác nhau từ người dùng. Nhờ thẻ input, bạn có thể xây dựng các biểu mẫu khảo sát đơn giản mà chuyên nghiệp, giúp doanh nghiệp cải thiện sản phẩm/dịch vụ.
Ví dụ:
< p >Bạn hài lòng với dịch vụ? < /p >
< input type="radio" name="satisfaction" value="yes" > Có
< input type="radio" name="satisfaction" value="no" > Không
< p >Ý kiến đóng góp: < /p >
< input type="text" placeholder="Nhập ý kiến của bạn" >
4. Tải tệp tin lên hệ thống
Tính năng tải tệp tin lên là cần thiết cho các ứng dụng như tải ảnh đại diện, tải tài liệu đính kèm, tải sản phẩm,…. Thẻ input type="file" là lựa chọn duy nhất cho mục đích này.
Ví dụ:
< form action="/upload" method="post" enctype="multipart/form-data" >
< h3 > Tải ảnh đại diện của bạn: < /h3 >
< input type="file" name="profilePicture" accept="image/*" required >
< br > < br >
< h3 > Tải tài liệu đính kèm (PDF, Word):< /h3 >
< input type="file" name="attachments" accept=".pdf,.doc,.docx" multiple >
< br > < br >
< input type="submit" value="Tải lên" >
< /form >
Bí quyết tối ưu trải nghiệm người dùng website với thẻ input
Tối ưu hóa trải nghiệm người dùng với thẻ input không chỉ nằm ở việc sử dụng đúng loại input, mà còn là sự kết hợp giữa thiết kế giao diện, logic kiểm tra dữ liệu, tính năng bảo mật và khả năng thích ứng trên nhiều thiết bị. Khi bạn chú trọng đến từng chi tiết này, người dùng sẽ cảm nhận được sự chuyên nghiệp và dễ chịu khi sử dụng website của bạn.
1. Sử dụng thẻ label
Thẻ label giúp người dùng biết rõ họ đang nhập gì vào mỗi ô. Nó cũng hỗ trợ khả năng truy cập cho người dùng dùng screen reader và tăng diện tích bấm khi thao tác.
Lợi ích:
- Tăng khả năng hiểu và định hướng nhanh cho người dùng.
- Cải thiện khả năng truy cập (accessibility).
- Nhấn vào nội dung label sẽ tự động focus vào input tương ứng.
Cách sử dụng: Liên kết label với input thông qua thuộc tính for của label và thuộc tính id của input. Giá trị của for phải trùng với id của input.
Ví dụ:
< label for="email">Email: < /label >
< input type="email" id="email" name="email" >
2. Validation HTML5
HTML5 cung cấp các thuộc tính validation (kiểm tra hợp lệ) ngay tại trình duyệt, giúp bạn xác thực dữ liệu đầu vào mà không cần viết quá nhiều JavaScript phức tạp. Điều này cung cấp phản hồi tức thì cho người dùng.
Lợi ích:
- Tăng tính tương tác, phản hồi nhanh.
- Giảm tải xử lý cho server.
- Hạn chế lỗi do nhập sai định dạng.
Ví dụ:
< input type="email" required placeholder="Nhập email hợp lệ" >
3. CSS cho input
Styling input bằng CSS giúp biểu mẫu của bạn trông chuyên nghiệp, hiện đại và phù hợp với tổng thể thiết kế của website, cải thiện đáng kể tính thẩm mỹ và trải nghiệm trực quan.
Lợi ích:
- Giao diện thân thiện, dễ thao tác.
- Thể hiện rõ trạng thái: focus, lỗi, thành công,…
- Giữ chân người dùng lâu hơn với trải nghiệm tốt.
Ví dụ:
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
}
input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0,123,255,0.5);
}
4. JavaScript và input
Trong khi HTML5 validation cung cấp các kiểm tra cơ bản, JavaScript cho phép bạn thêm logic kiểm tra phức tạp hơn, phản hồi động và các tương tác tùy chỉnh cho input.
Lợi ích:
- Giảm thao tác không cần thiết.
- Tăng độ linh hoạt và cá nhân hóa.
- Trải nghiệm mượt mà và tức thời.
Ví dụ:
document.getElementById("password").addEventListener("input", function() {
if (this.value.length < 6) {
this.style.borderColor = "red";
} else {
this.style.borderColor = "green";
}
});
5. Tối ưu hóa cho thiết bị di động
Hơn 60% người dùng duyệt web trên thiết bị di động. Do đó, input cần được thiết kế để hiển thị đúng bàn phím và đủ lớn để dễ chạm.
- Sử dụng type phù hợp: type="tel" (tự động hiển thị bàn phím số điện thoại trên di động), type="email" (tự động hiển thị bàn phím có ký tự @ và .), type="url" (tự động hiển thị bàn phím có ký tự / và .com), type="date", type="time" (kích hoạt bộ chọn ngày/giờ tích hợp sẵn của hệ điều hành).
- Kích thước và khoảng cách: Đảm bảo các trường input và label đủ lớn để dễ dàng chạm vào bằng ngón tay. Giữ khoảng cách đủ giữa các trường để tránh ấn nhầm.
- Autocomplete: Tận dụng tối đa thuộc tính autocomplete để giảm thiểu việc gõ phím trên di động.
- Thiết kế đáp ứng (responsive design): Sử dụng CSS để đảm bảo biểu mẫu hiển thị tốt trên mọi kích thước màn hình. Ví dụ: width: 100%; box-sizing: border-box; cho các trường nhập liệu.
6. Kiểm tra dữ liệu phía client kết hợp server
Đây là một nguyên tắc vàng trong phát triển web. Không bao giờ tin tưởng hoàn toàn dữ liệu từ phía client (trình duyệt).
- Client-side validation (Phía client): Bạn nên sử dụng HTML5 validation và JavaScript để cung cấp phản hồi tức thì cho người dùng.
- Server-side validation (Phía server): Bất kỳ dữ liệu nào nhận được từ biểu mẫu phải được kiểm tra và xác thực lại hoàn toàn trên máy chủ trước khi xử lý (lưu vào database, hiển thị,...).
Ví dụ: Nếu bạn có một trường input type="number" với min="18". Phía client sẽ báo lỗi nếu người dùng nhập <18. Tuy nhiên, một kẻ tấn công vẫn có thể gửi một yêu cầu HTTP trực tiếp đến server với giá trị <18. Do đó, server cần kiểm tra lại if (age < 18) trước khi xử lý.
Thẻ input trong HTML không chỉ là thành phần cốt lõi trong việc xây dựng biểu mẫu mà còn đóng vai trò then chốt trong việc tạo ra trải nghiệm người dùng mượt mà, hiệu quả và an toàn trên website. Khi được sử dụng đúng cách, kết hợp linh hoạt giữa các thuộc tính HTML5, CSS, JavaScript và các phương pháp bảo mật như Phương Nam Vina đã gợi ý, thẻ input sẽ giúp bạn thu thập dữ liệu chính xác, tương tác chuyên nghiệp và tăng tính thân thiện với người dùng.
