Tạo ô nhập liệu 1 dòng (Single-line Text Input)

Trong xây dựng các biểu mẫu (forms) trên website, việc thu thập thông tin ngắn gọn từ người dùng như tên, email hay số điện thoại là nhu cầu cơ bản nhất. Để làm điều này, chúng ta sử dụng thẻ <input> với thuộc tính type="text".

1. Cách sử dụng thẻ <input> cơ bản

Thẻ <input> là một thẻ tự đóng (không cần thẻ đóng </input>). Để tạo ô nhập liệu 1 dòng, bạn chỉ cần thiết lập thuộc tính type là text.


<label for="username">Tên người dùng:</label>
<input type="text" id="username" name="username">

2. Các thuộc tính quan trọng cần biết

Để ô nhập liệu trở nên chuyên nghiệp và hữu ích hơn, bạn có thể kết hợp thêm các thuộc tính sau:

  • placeholder: Hiển thị văn bản gợi ý mờ bên trong ô khi chưa nhập liệu.

  • value: Giá trị mặc định hiển thị sẵn trong ô.

  • maxlength: Giới hạn số ký tự tối đa người dùng có thể nhập.

  • required: Bắt buộc người dùng phải nhập dữ liệu trước khi gửi form.

  • readonly: Chỉ cho phép đọc, không thể chỉnh sửa nội dung.

3. Ví dụ thực tế

Hãy xem đoạn mã dưới đây để hiểu cách kết hợp các thuộc tính trên vào một biểu mẫu thực tế:


<form>
  <label for="fullname">Họ và tên:</label><br>
  <input type="text" id="fullname" name="fullname" placeholder="Nhập tên của bạn" required maxlength="50">
</form>

4. So sánh các loại ô nhập liệu văn bản phổ biến

Loại (type) Mục đích sử dụng Đặc điểm text Dữ liệu văn bản thông thường Mặc định, không kiểm tra định dạng. email Địa chỉ email Tự động kiểm tra cú pháp email trên trình duyệt. password Mật khẩu Ẩn ký tự dưới dạng dấu chấm hoặc dấu sao. tel Số điện thoại Tối ưu hóa bàn phím số trên thiết bị di động.

5. Tích hợp CodePen

Bạn có thể xem trực quan cách các ô nhập liệu hoạt động tại đây:

See the Pen HTML Form - Ô nhập liệu INPUT 1 dòng by kellyfire611 (@kellyfire611) on CodePen.

Tóm tắt

Việc tạo ô nhập liệu 1 dòng rất đơn giản với thẻ <input type="text">. Để đạt hiệu quả cao nhất, hãy luôn nhớ:

  1. Sử dụng thẻ <label> đi kèm để cải thiện khả năng truy cập.

  2. Sử dụng placeholder để hướng dẫn người dùng nhập liệu đúng cách.

  3. Sử dụng các loại type phù hợp (email, tel, password) để cải thiện trải nghiệm người dùng trên thiết bị di động.

Kết luận: Thẻ <input> là nền tảng của mọi tương tác người dùng trên web. Việc làm chủ các thuộc tính cơ bản này sẽ giúp bạn tạo ra những biểu mẫu chuyên nghiệp và thân thiện hơn.