Phần tử HTML ngữ nghĩa chính xác nhất cho gợi ý/ghi chú của trường biểu mẫu là gì?

Question

Nhãn và trường dễ dàng; chúng tôi có <label> và sau đó là trường nhập có liên quan. Nhưng phần tử HTML ngữ nghĩa nhất để sử dụng cho văn bản thông tin nhỏ hơn nằm trong trường là gì?

Answer 1

Tôi không biết một yếu tố cụ thể hoặc thuộc tính để kết nối họ, nhưng bạn có thể làm như vậy bằng cách sử dụng thuộc tính ARIA aria-describedby:

<label for="firstname">First Name</label> 
<input type="text" id="firstname" aria-describedby="firstname-explanation" /> 
<p id="firstname-explanation">e.g. John</p> 

Nhưng trong đó có tất cả mọi thứ trong label dường như tốt với tôi (hoặc cung cấp khả năng tạo kiểu tốt, vì bạn có một vùng chứa - ngữ nghĩa):

<label> 
    <span class="form-item-title">First Name</span> 
    <input type="text" id="firstname" /> 
    <span class="form-item-description">e.g. John</span> 
</label> 

Hoặc bạn thậm chí có thể trộn hai số.

Một cách tiếp cận khác có thể là đưa mô tả vào thuộc tính(hoặc placeholder như được đề xuất bởi @Alohci) của phần tử input (ngữ nghĩa là mô tả nó), nhưng trong trường hợp này bạn phải chèn nó vào đánh dấu qua Javascript (hoặc CSS sử dụng input:after { content : "e.g. " attr(placeholder) } - được đề xuất bởi @Alohci).