<>Text Inputs là gì?
Text Inputs là thành phần UI cho phép người dùng nhập văn bản vào một trường dữ liệu. Chúng thường xuất hiện trong form đăng nhập, tìm kiếm, nhập thông tin cá nhân, v.v.
📌 Ví dụ về các trường Text Input phổ biến:
✔ Ô nhập tên, email, số điện thoại.
✔ Trường tìm kiếm (search field).
✔ Nhập tin nhắn trong ứng dụng chat.
/Các loại Text Inputs chính 📝
📌 1. Single-line Text Input (Nhập một dòng)
👉 Dùng cho nội dung ngắn, thường là tên, email, số điện thoại.
🔹 Ví dụ sử dụng:
✔ Form đăng ký tài khoản.
✔ Trường tìm kiếm trên website.
📌 2. Multi-line Text Input (Nhập nhiều dòng – Textarea)
👉 Dùng khi cần nhập đoạn văn bản dài như mô tả, bình luận, tin nhắn.
🔹 Ví dụ sử dụng:
✔ Nhập mô tả sản phẩm.
✔ Nhập ghi chú hoặc phản hồi của người dùng.
📌 3. Password Input (Trường nhập mật khẩu 🔒)
👉 Giống như Single-line Text Input nhưng che nội dung đầu vào để bảo mật.
🔹 Ví dụ sử dụng:
✔ Nhập mật khẩu khi đăng nhập.
✔ Nhập mã PIN bảo mật.
📌 4. Search Field (Trường tìm kiếm 🔍)
👉 Trường nhập liệu có chức năng tìm kiếm trong hệ thống.
🔹 Ví dụ sử dụng:
✔ Thanh tìm kiếm trên website hoặc ứng dụng.
✔ Ô tìm kiếm sản phẩm trên e-commerce.
📌 5. Numeric Input (Nhập số 🔢)
👉 Chỉ cho phép nhập số thay vì ký tự văn bản.
🔹 Ví dụ sử dụng:
✔ Nhập số điện thoại, mã OTP, tuổi, giá tiền.
✔ Nhập số lượng sản phẩm trong giỏ hàng.
📌 6. Email Input (Nhập email 📧)
👉 Chỉ chấp nhận địa chỉ email hợp lệ.
🔹 Ví dụ sử dụng:
✔ Form đăng ký hoặc đăng nhập bằng email.
✔ Thu thập email để gửi bản tin (newsletter).
📌 7. Tel Input (Nhập số điện thoại 📱)
👉 Chuyên dùng để nhập số điện thoại, hỗ trợ bàn phím số trên mobile.
🔹 Ví dụ sử dụng:
✔ Đăng ký tài khoản với số điện thoại.
✔ Nhập số điện thoại liên hệ trên website.
📌 8. URL Input (Nhập liên kết 🔗)
👉 Chỉ cho phép nhập URL hợp lệ (bắt đầu bằng http:// hoặc https://).
🔹 Ví dụ sử dụng:
✔ Nhập liên kết trang web cá nhân.
✔ Nhập URL hình ảnh sản phẩm.
/UX Best Practices cho Text Inputs 🎨
✅ Đặt nhãn (Label) rõ ràng
✔ Luôn hiển thị label để người dùng biết họ đang nhập gì.
✔ Không dùng placeholder thay thế label vì dễ biến mất khi nhập.
✅ Cung cấp gợi ý và trạng thái lỗi
✔ Hiển thị mô tả hoặc gợi ý giúp nhập liệu đúng (ví dụ: “Mật khẩu cần ít nhất 8 ký tự”).
✔ Thông báo lỗi ngay lập tức nếu dữ liệu nhập không hợp lệ.
✅ Chọn kích thước phù hợp
✔ Trường nhập phải đủ rộng để hiển thị nội dung đầy đủ.
✔ Tránh làm quá dài nếu chỉ cần nhập nội dung ngắn.
✅ Dễ tương tác trên mobile
✔ Sử dụng bàn phím phù hợp với loại dữ liệu:
– input type="number" → bật bàn phím số.
– input type="email" → bật bàn phím có ký hiệu @hunkydo
✅ Hỗ trợ Auto-fill & Auto-complete
✔ Dùng autocomplete="off" nếu không muốn tự động điền.
✔ Bật autocomplete="email" hoặc autocomplete="tel" để giúp nhập nhanh hơn.
