Trường nhập văn bản
Thu thập văn bản với độ chính xác và tính linh hoạt cao. Từ những tên đơn giản đến các mẫu phức tạp, với tính năng xác thực tích hợp, định dạng thông minh và khả năng tùy chỉnh mạnh mẽ – trường Nhập văn bản thích ứng với mọi trường hợp sử dụng nhờ giới hạn ký tự, định dạng tự động và chế độ mật khẩu bảo mật.
Nền tảng của mọi biểu mẫu WordPress
Hoàn hảo cho:
Các tính năng mạnh mẽ cho mọi trường hợp sử dụng
📏 Điều khiển độ dài thông minh
Giới hạn ký tự tối thiểu và tối đa
Thiết lập giới hạn ngắn nhất và dài nhất cho phép nhập văn bản. Ngăn chặn việc nhập quá ngắn hoặc quá dài bằng tính năng xác thực tích hợp của trình duyệt.
Xác thực thời gian thực
Người dùng sẽ nhận được phản hồi ngay lập tức nếu bài dự thi của họ không đáp ứng yêu cầu về độ dài – không có bất ngờ nào sau khi gửi bài.
Ví dụ:
- Tên người dùng: Tối thiểu 3 ký tự, tối đa 20 ký tự
- Mã bưu chính: Tối thiểu 5 ký tự, tối đa 10 ký tự
- Tên: Tối thiểu 2 ký tự, tối đa 50 ký tự
- Ghi chú: Tối đa 500 ký tự
Tại sao nó quan trọng:
Kiểm soát chất lượng dữ liệu, ngăn chặn thư rác, đảm bảo tính tương thích của cơ sở dữ liệu và hướng dẫn người dùng cung cấp lượng thông tin phù hợp.
✅ Các mẫu xác thực tích hợp sẵn
6 loại xác thực được cấu hình sẵn:
- 1. Không – Chấp nhận bất kỳ văn bản nào (mặc định)
2. Email – Xác thực định dạng email hợp lệ ([email được bảo vệ])
3. URL – Yêu cầu địa chỉ web hợp lệ (https://example.com)
4. Chỉ chữ cái – Chỉ các ký tự chữ cái và khoảng trắng (John Doe)
5. Chỉ có số – Chỉ các chữ số (123456)
6. Chữ và số – Chữ cái và số, không có ký tự đặc biệt (User123)
Thêm các mẫu thiết kế tùy chỉnh:
- Hãy tự định nghĩa quy tắc regex để kiểm tra tính hợp lệ của các định dạng chuyên biệt, ví dụ như:
- Biển số xe: `^[AZ]{3}[0-9]{4}$`
- Mã sản phẩm: `^[AZ]{2}[0-9]{6}$`
- Các định dạng tùy chỉnh độc đáo dành riêng cho doanh nghiệp của bạn
Phản hồi tức thì:
Người dùng sẽ thấy thông báo lỗi rõ ràng nếu dữ liệu nhập vào không khớp với định dạng yêu cầu.
✂️ Tự động cắt bỏ khoảng trắng
Tự động làm sạch dữ liệu
Loại bỏ các khoảng trắng thừa ở đầu và cuối đoạn văn bản. Không còn "John" khi bạn muốn viết "John".
Trường hợp sử dụng:
- Địa chỉ email (không có khoảng trắng ở cuối)
- Tên người dùng (không có khoảng trắng ở đầu)
- Mã tham chiếu (phù hợp chính xác)
- Bất kỳ lĩnh vực nào mà độ chính xác là quan trọng.
Lợi ích:
Giảm thiểu lỗi người dùng, cải thiện tính nhất quán dữ liệu, ngăn ngừa các vấn đề xác thực và đơn giản hóa việc đối sánh và tìm kiếm.
🔒 Chế độ mật khẩu
Che giấu thông tin đầu vào an toàn
Biến bất kỳ trường văn bản nào thành trường mật khẩu. Các ký tự sẽ hiển thị dưới dạng dấu chấm (•••) để bảo vệ thông tin nhạy cảm khỏi những người muốn nhìn trộm mật khẩu.
Hoàn hảo cho:
- Nhập mật khẩu và mã PIN
- Mã bảo mật và mã thông báo
- Số định danh bí mật
- Mã xác thực hai yếu tố
Hành vi thông minh:
Chế độ mật khẩu tự động vô hiệu hóa các tính năng xung đột như chuyển đổi văn bản và các loại nhập liệu đặc biệt để đảm bảo an ninh.
📱 Các loại nhập liệu thông minh
Tối ưu hóa cho thiết bị di động và máy tính để bàn:
- Văn bản thông thường – Nhập văn bản tiêu chuẩn dùng chung
- Tìm kiếm – Bao gồm nút xóa tích hợp (X) để thiết lập lại nhanh chóng.
- Điện thoại – Kích hoạt bàn phím số trên thiết bị di động để nhập số điện thoại dễ dàng hơn.
- URL – Hiển thị bàn phím chuyên dụng cho thiết bị di động với các phím tắt .com, .org
Tại sao nó quan trọng:
Việc sử dụng đúng loại phương thức nhập liệu giúp tăng tốc độ nhập dữ liệu trên thiết bị di động, giảm thiểu lỗi và cải thiện trải nghiệm người dùng trên mọi thiết bị.
🎨 Chuyển đổi văn bản tự động
Định dạng văn bản theo cách người dùng nhập:
- Không chuyển đổi – Văn bản giữ nguyên như đã nhập.
- CHỮ IN HOA – Chuyển đổi tất cả văn bản thành chữ in hoa (JOHN DOE)
- lowercase – Chuyển đổi toàn bộ văn bản thành chữ thường (john doe)
- Viết hoa chữ cái đầu tiên – Chỉ chữ cái đầu tiên viết hoa (John doe)
- Viết hoa chữ cái đầu tiên của mỗi từ (John Doe)
Hoàn hảo cho:
- CHỮ IN HOA: Biển số xe, mã tiểu bang, mã sản phẩm
- chữ thường: Địa chỉ email, tên người dùng
- Viết hoa: Đầu câu, tên riêng
- Viết hoa chữ cái đầu tiên: Tên đầy đủ, địa chỉ, chức danh
Hành vi thông minh:
Quá trình chuyển đổi diễn ra tự động trong khi người dùng gửi dữ liệu, và người dùng vẫn thấy được dữ liệu ban đầu của mình.
🙈 Chế độ trường ẩn
Các trường dữ liệu ẩn
Tạo các trường không hiển thị cho người dùng nhưng vẫn gửi dữ liệu cùng với biểu mẫu. Hoàn hảo cho việc theo dõi, mã giới thiệu và các giá trị hệ thống.
Trường hợp sử dụng:
- Các thông số theo dõi UTM
- Mã định danh nguồn giới thiệu
- Số phiên bản biểu mẫu
- Dấu mốc thời gian
- Siêu dữ liệu ẩn
Cách hoạt động:
Thiết lập "Giá trị ẩn" và giá trị đó sẽ tự động được bao gồm trong mọi lần gửi biểu mẫu mà không làm rối giao diện người dùng của biểu mẫu.
🔀 Logic điều kiện
Khả năng hiển thị trường động
Hiển thị hoặc ẩn các trường văn bản dựa trên các giá trị khác trong biểu mẫu. Tạo các biểu mẫu thông minh tự động điều chỉnh theo dữ liệu người dùng nhập vào.
Các quy tắc logic nâng cao:
- Logic AND – Tất cả các điều kiện phải được đáp ứng
- Logic OR – Bất kỳ điều kiện nào cũng có thể kích hoạt hành động.
- 8 toán tử – Bằng, Không bằng, Lớn hơn, Nhỏ hơn, Chứa, Rỗng, và nhiều toán tử khác
Trường hợp sử dụng:
- Chỉ hiển thị "Tên công ty" khi loại người dùng là "Doanh nghiệp".
- Hiển thị “Nguồn giới thiệu” khi “Bạn biết đến chúng tôi bằng cách nào?” có chứa “Giới thiệu”.
- Ẩn mục “Chi tiết khác” khi tùy chọn chính không trống.
- Hiển thị mã khuyến mãi khi giá trị đơn hàng lớn hơn 100 đô la.
🎯 Trải nghiệm người dùng được nâng cao
Các tính năng thông minh được tích hợp sẵn:
- Giá trị mặc định – Điền trước các trường để tăng tốc độ hoàn thành
- Văn bản giữ chỗ – Hiển thị gợi ý hữu ích trước khi người dùng nhập liệu
- Văn bản trợ giúp – Thêm mô tả để làm rõ những gì cần nhập
- Xác thực bắt buộc – Đặt các trường bắt buộc với các chỉ báo rõ ràng
- Lớp CSS tùy chỉnh – Áp dụng kiểu dáng tùy chỉnh để phù hợp với thương hiệu của bạn
- Hỗ trợ khả năng tiếp cận – Nhãn ARIA dành cho trình đọc màn hình
- Tối ưu hóa cho thiết bị di động – Giao diện cảm ứng thân thiện với bàn phím tương thích.
Thiết lập đơn giản chỉ với 3 bước
Chuẩn bị trường nhập văn bản của bạn chỉ trong vài phút
Thêm trường văn bản
Kéo và thả trường Nhập văn bản từ phần Trường cơ bản vào biểu mẫu của bạn.
Thiết lập xác thực và giới hạn
Chọn loại xác thực (email, URL, thư từ, v.v.), đặt giới hạn ký tự tối thiểu/tối đa và tùy chọn bật chế độ mật khẩu hoặc loại bỏ khoảng trắng.
Cấu hình định dạng
Chọn kiểu nhập liệu để tối ưu hóa cho thiết bị di động, chọn kiểu chuyển đổi văn bản (chữ hoa, chữ thường, v.v.) và đặt giá trị mặc định hoặc ký tự giữ chỗ.
🎉 Vậy là xong! Trường văn bản của bạn đã sẵn sàng với tính năng xác thực và định dạng thông minh.
Ứng dụng trong thế giới thực
Đăng ký người dùng
* Trường tên người dùng có giới hạn độ dài
* Nhập mật khẩu có che giấu
* Tên các trường có định dạng viết hoa đầu câu
* Địa chỉ email đã được xác thực
Hình thức liên lạc
* Họ và tên đầy đủ (viết hoa chữ cái đầu mỗi từ)
* Xác thực email
* Số điện thoại có chức năng nhập số điện thoại
* Trường tin nhắn/bình luận
Thương mại điện tử
* Nhập mã khuyến mãi (chữ in hoa)
* Trường tin nhắn quà tặng
* Hướng dẫn đặc biệt
* Ghi chú vận chuyển
Ứng dụng kinh doanh
* Mã số nhân viên
* Tên các phòng ban
* Số tham chiếu
* Mã nội bộ
Ứng dụng & Đăng ký
* Số giấy phép
* Mã chứng nhận
* Mã số thành viên
* Mã định danh tùy chỉnh
Tìm kiếm & Lọc
* Ô tìm kiếm có nút xóa
* Lọc các trường văn bản
* Các mục từ khóa
* Đầu vào truy vấn
Hoàn thành các tùy chọn trường
Cấu hình cơ bản
- Nhãn trường – Tiêu đề hiển thị phía trên trường văn bản
- Mô tả/Văn bản trợ giúp – Hướng dẫn bổ sung cho người dùng
- Trường bắt buộc – Bắt buộc nhập văn bản
- Văn bản giữ chỗ – Văn bản gợi ý trước khi người dùng nhập liệu
Xác thực độ dài
- Độ dài tối thiểu – Số ký tự ít nhất được cho phép (kiểm tra tính hợp lệ)
- Độ dài tối đa – Số ký tự tối đa được cho phép (giới hạn cứng)
Giá trị mặc định
- Giá trị mặc định – Văn bản được điền sẵn khi biểu mẫu được tải.
- Giá trị ẩn – Giá trị cho các trường ẩn (khi chế độ ẩn được bật)
Bảo mật và quyền riêng tư
- Ô nhập mật khẩu – Che giấu thông tin nhập vào dưới dạng mật khẩu (hiển thị dấu chấm •••)
Trường ẩn – Làm cho trường trở nên vô hình nhưng vẫn bao gồm trong bài nộp
Chất lượng dữ liệu
Cắt bỏ khoảng trắng – Tự động loại bỏ các khoảng trắng thừa ở đầu và cuối.
Quy tắc xác thực
- Loại xác thực
- Không có gì (bất kỳ văn bản nào)
- thư điện tử ([email được bảo vệ])
- URL (https://example.com)
- Chỉ gửi thư (chỉ áp dụng cho bang Arizona)
- Chỉ nhập số (từ 0 đến 9)
- Chữ và số (AZ và 0-9)
- Mẫu tùy chỉnh (biểu thức chính quy)
- Mẫu tùy chỉnh – Biểu thức chính quy để xác thực tùy chỉnh (khi chọn “Tùy chỉnh”)
Các loại đầu vào
- Kiểu đầu vào
- Văn bản thông thường
- Tìm kiếm (với nút xóa)
- Điện thoại (bàn phím số trên điện thoại di động)
- URL (bàn phím chuyên dụng cho thiết bị di động)
Định dạng văn bản
- Chuyển đổi văn bản
- Không có chuyển đổi
- UPPERCASE
- chữ thường
- Viết hoa chữ cái đầu tiên
- Trường hợp tiêu đề
Logic có điều kiện
- Kích hoạt logic điều kiện – Hiển thị/ẩn dựa trên điều kiện
- Loại logic
- Tất cả các điều kiện phải được đáp ứng (VÀ)
- Mọi điều kiện đều có thể được đáp ứng (HOẶC)
- Quy tắc điều kiện
- Hiện/Ẩn – Hành động cần thực hiện
- Trường – Trường nào cần kiểm tra
- Toán tử – Bằng, Không bằng, Chứa, Lớn hơn, Nhỏ hơn, Rỗng, Không rỗng
- Giá trị – Giá trị so sánh
- Nhiều điều kiện – Thêm số lượng quy tắc không giới hạn
Tùy chọn nâng cao
- Lớp CSS tùy chỉnh – Áp dụng kiểu dáng tùy chỉnh
- Thuộc tính trợ năng – Nhãn và mô tả ARIA
Tại sao nên chọn trường nhập liệu văn bản của chúng tôi?
✅ Đa năng – Dùng được cho tên, mã số, mật khẩu và mọi thứ khác.
✅ Xác thực thông minh – Hơn 6 mẫu xác thực cộng với biểu thức chính quy tùy chỉnh
✅ Tối ưu hóa cho thiết bị di động – Bàn phím phù hợp với từng kiểu nhập liệu
✅ Tự động định dạng – Quá trình chuyển đổi văn bản diễn ra tự động
✅ Bảo mật – Chế độ mật khẩu bảo vệ thông tin nhạy cảm
✅ Dữ liệu sạch – Loại bỏ khoảng trắng giúp ngăn ngừa các lỗi thường gặp
✅ Linh hoạt – Trường ẩn, giá trị mặc định, logic điều kiện
✅ Thân thiện với người dùng – Các thông báo xác thực rõ ràng hướng dẫn người dùng
✅ Tích hợp hoàn toàn – Hoạt động liền mạch với tất cả các tính năng của biểu mẫu
Câu Hỏi Thường Gặp
Hỏi: Sự khác biệt giữa độ dài tối thiểu/tối đa và xác thực là gì?
Quy tắc độ dài tối thiểu/tối đa kiểm soát số lượng ký tự được phép. Quy tắc xác thực kiểm soát các ký tự được phép, chẳng hạn như chỉ chữ cái, chỉ số hoặc định dạng email.
Hỏi: Tôi có thể kiểm tra cả độ dài VÀ định dạng cùng lúc không?
Đúng vậy. Kết hợp độ dài tối thiểu/tối đa với các quy tắc xác thực. Ví dụ, đặt độ dài tối thiểu là 3, tối đa là 15 và xác thực chữ số cho trường tên người dùng.
Hỏi: Chế độ mật khẩu hoạt động như thế nào?
Chế độ mật khẩu sẽ che giấu các ký tự bằng dấu chấm, giống như các trường mật khẩu thông thường trên màn hình đăng nhập.
Hỏi: Chức năng “cắt bỏ khoảng trắng” có tác dụng gì?
Nó loại bỏ các khoảng trắng đầu và cuối trước khi gửi để tránh các khoảng trắng không mong muốn làm hỏng quá trình xác thực.
Hỏi: Tôi có thể tạo các mẫu kiểm tra tính hợp lệ tùy chỉnh không?
Có. Hãy sử dụng "Mẫu tùy chỉnh" và thêm biểu thức chính quy để áp đặt bất kỳ cấu trúc nào bạn cần.
Hỏi: Quá trình chuyển đổi văn bản hoạt động như thế nào?
Người dùng nhập liệu như bình thường, và hệ thống sẽ tự động chuyển đổi văn bản khi gửi đi, ví dụ như chuyển sang dạng chữ hoa đầu câu hoặc chữ hoa toàn bộ.
Hỏi: Loại ô nhập tìm kiếm dùng để làm gì?
Nó bổ sung thêm nút xóa (X) tích hợp sẵn để người dùng có thể đặt lại trường ngay lập tức trong khi tìm kiếm.
Hỏi: Tại sao lại sử dụng kiểu nhập liệu “tel”?
Trên thiết bị di động, nó sẽ mở bàn phím số để giúp việc nhập các chữ số kiểu điện thoại dễ dàng hơn.
Hỏi: Tôi có thể sử dụng logic điều kiện với các trường văn bản không?
Đúng vậy. Các điều kiện như “Chứa”, “Bằng” hoặc “Trống” cho phép bạn hiển thị hoặc ẩn các trường dựa trên dữ liệu người dùng nhập vào.
Hỏi: Trường ẩn được dùng để làm gì?
Chúng lưu trữ dữ liệu mà người dùng không nhìn thấy, hữu ích cho việc theo dõi siêu dữ liệu như thẻ UTM hoặc nguồn giới thiệu.
Hỏi: Có thể sử dụng trường văn bản để nhập số không?
Đúng vậy, nhưng hãy sử dụng trường Số để tính toán hoặc xác thực số. Sử dụng trường Văn bản với tùy chọn “Chỉ số” khi bạn cần mã hoặc ID không nên được coi là số.
Hỏi: Các mẫu biểu thức chính quy (regex) có thể chính xác đến mức nào?
Biểu thức chính quy (Regex) có thể áp đặt các mẫu cực kỳ cụ thể. Hãy sử dụng công cụ kiểm tra regex nếu bạn cần xây dựng hoặc xác minh các mẫu phức tạp.
