CSS nhãn nổi
Khi nói đến việc tạo biểu mẫu trên trang web, khả năng truy cập và thiết kế phải đi đôi với nhau. Lý tưởng nhất là mọi trường nhập phải có nhãn liên quan và trình giữ chỗ, nếu cần. Tuy nhiên, từ góc độ thiết kế, điều này có thể khiến một biểu mẫu trông khá nặng văn bản Show
Nhãn dưới dạng trình giữ chỗ, đôi khi được gọi là nhãn nổi, là một lựa chọn thiết kế phổ biến để tạo biểu mẫu tối giản và dễ tiếp cận. Phương pháp này cũng thường được sử dụng trong các hệ thống thiết kế phổ biến như Bootstrap và Material Design (hiển thị bên dưới) Nhãn nổi BootstrapTùy chọn nhãn nổi trên biểu mẫu Material DesignTrong hướng dẫn này, chúng tôi sẽ tạo lại nhãn nổi được sử dụng trong các trường văn bản Thiết kế Vật liệu bằng cách sử dụng CSS và vanilla JavaScript Vật liệu thiết kế nhãn nổiĐây là kết quả cuối cùng trông như thế nào Bắt đầu với đánh dấu HTML biểu mẫuĐầu tiên, chúng tôi tạo đánh dấu cho biểu mẫu Thiết kế Vật liệu của chúng tôi bao gồm nhãn và trường văn bản đầu vào. Chúng tôi sẽ không thực sự sử dụng thư viện Thiết kế Vật liệu để đánh dấu hoặc tạo kiểu, thay vào đó chúng tôi sẽ tự tạo lại giao diện và hành vi 1 5 Điều quan trọng là liên kết nhãn với các trường đầu vào có liên quan của chúng bằng cách sử dụng thuộc tính 223 và 224 của đầu vào. Điều này được sử dụng bởi trình đọc màn hình để truyền đạt các chi tiết của biểu mẫu Sử dụng , chúng ta có thể thấy cách các nhãn và đầu vào được liên kết trong phần đánh dấu biểu mẫu ở trên Mẫu thiết kế vật liệu CSSKiểu dáng quan trọng nhất cho nhãn nổi là làm cho nhãn được định vị tuyệt đối bên trong phần tử cha tương đối. Chúng tôi muốn có thể di chuyển nhãn của mình xung quanh vùng chứa đầu vào mà không làm gián đoạn luồng các phần tử 1 |