Placeholder và Data-placeholder ?

Placehodel: Trình dữ chỗ ( theo từ điển). Thuộc placeholde tính chỉ định một gợi ý ngắn mô tả giá trị dự kiến của trường đầu vào (ví dụ: giá trị mẫu hoặc mô tả ngắn về định dạng dự kiến). Gợi ý ngắn được hiển thị trong trường nhập liệu trước khi người dùng

Placehodel: Trình dữ chỗ ( theo từ điển).

Thuộc placeholde tính chỉ định một gợi ý ngắn mô tả giá trị dự kiến của trường đầu vào (ví dụ: giá trị mẫu hoặc mô tả ngắn về định dạng dự kiến).

Gợi ý ngắn được hiển thị trong trường nhập liệu trước khi người dùng nhập giá trị.

1. Các sử dụng placeholder

Bước 1: Thêm thuộc tính placeholder trên thẻ input

Cú pháp:

<input placeholder="value">

Giá trị thuộc tính:

Value Mô tả
Text Chỉ định một gợi ý ngắn mô tả giá trị dự kiến của trường đầu vào

Bước 2: Thêm trên CSS

::placeholder {
  css declarations;
}

2 . Sự khác nhau giữa placeholder và data-placeholder

  • Thuộc tính placeholder là một thuộc tính HTML5 tiêu chuẩn
  • data-placeholder chỉ là data- thuộc tính HTML5 được sử dụng bởi một số plugin javascript. Data là dữ liệu chung được đính kèm với phần tử.

Hãy thử ví dụ dưới đây để rõ sự khác biệt:

=> Bộ ::placeholder chọn chọn các thành phần biểu mẫu có văn bản giữ chỗ và cho phép bạn tạo kiểu cho văn bản giữ chỗ.
Văn bản trình giữ chỗ được đặt với thuộc tính trình giữ chỗ, chỉ định một gợi ý mô tả giá trị dự kiến của trường nhập.

=> data-placeholder là dữ liệu Data là dữ liệu chung được đính kèm với phần tử. Không thể CSS cho nó.

Nguồn: viblo.asia

Bài viết liên quan

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con

Khi nào nên dùng main, section, article, header, footer, và aside trong HTML5

HTML5 đã giới thiệu các thẻ ngữ nghĩa giúp cấu trúc nội dung web một cách có

So sánh Webhook và API: Khi nào nên sử dụng?

Trong lĩnh vực công nghệ thông tin và phát triển phần mềm, Webhook và API là hai th