### Placeholder HTML: Cái Gì và Cách Sử Dụng

Khi bạn thiết kế một trang web, việc tạo ra một trải nghiệm người dùng mượt mà và thân thiện là rất quan trọng. Một trong những cách để đạt được điều này là sử dụng **placeholder** trong các trường nhập liệu. Nhưng **placeholder** thực sự là gì và cách sử dụng nó như thế nào?

### Placeholder: Trình Dữ Chỗ

Theo từ điển, **placeholder** có nghĩa là “trình dữ chỗ”. Trong HTML, nó chỉ định một gợi ý ngắn mô tả giá trị dự kiến của trường đầu vào. Ví dụ, nếu bạn có một trường nhập email, **placeholder** có thể hiển thị “nhập địa chỉ email của bạn” trước khi người dùng bắt đầu nhập.

### Các Sử Dụng Placeholder

#### Bước 1: Thêm Thuộc Tính Placeholder Trên Thẻ Input

Để thêm một **placeholder** vào một trường nhập liệu, bạn chỉ cần sử dụng thuộc tính `placeholder` trên thẻ `input`.

“`html

“`

| 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: Tùy Chỉnh CSS Cho Placeholder

Bạn cũng có thể tùy chỉnh kiểu cho văn bản giữ chỗ bằng cách sử dụng pseudo-element `::placeholder` trong CSS.

“`css
::placeholder {
color: #666;
font-size: 14px;
}
“`

### Sự Khác Biệt Giữa Placeholder và Data-Placeholder

Có thể bạn đã gặp cả **placeholder** và **data-placeholder** khi làm việc với HTML và JavaScript. Dưới đây là sự khác biệt giữa chúng:

– **Thuộc Tính Placeholder**: Đây là một thuộc tính HTML5 tiêu chuẩn. Nó được sử dụng để chỉ định một gợi ý ngắn mô tả giá trị dự kiến của trường đầu vào.
– **Data-Placeholder**: Đây chỉ là một **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ử, nhưng không thể áp dụng CSS cho nó.

### Ví Dụ Minh Họa

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

“`html

“`

“`css
/* Tùy chỉnh kiểu cho văn bản giữ chỗ */
::placeholder {
color: #666;
font-size: 14px;
}
“`

Trong ví dụ trên, bạn có thể thấy rằng văn bản giữ chỗ được đặt với thuộc tính `placeholder` và có thể được tùy chỉnh bằng CSS. Ngược lại, `data-placeholder` không thể được áp dụng CSS.

### Kết Luận

**Placeholder** là một công cụ hữu ích trong thiết kế web giúp cải thiện trải nghiệm người dùng bằng cách cung cấp gợi ý rõ ràng về những gì người dùng cần nhập vào các trường đầu vào. Bằng cách sử dụng thuộc tính `placeholder` và tùy chỉnh nó với CSS, bạn có thể tạo ra một giao diện thân thiện và dễ sử dụng hơn.

| Thuộc Tính | Mô Tả |
|———————|———————————————————————–|
| **Placeholder** | Thuộc tính HTML5 tiêu chuẩn, chỉ định gợi ý ngắn cho trường đầu vào |
| **Data-Placeholder**| Data thuộc tính HTML5, không thể áp dụng CSS |

Hy vọng thông tin này sẽ giúp bạn hiểu rõ hơn về **placeholder** và cách sử dụng nó hiệu quả trong dự án web của mình.