CSS nhãn nổi

1

2

3

    First Name

4

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

2

2

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 CSS

Kiể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

2

4

5

2

2

2

2

2

2

2

2

2

Nhãn nổi trên tiêu điểm

Chúng tôi cũng muốn làm nổi nhãn bất cứ khi nào người dùng nhấp vào đầu vào. Chúng ta có thể làm điều này bằng cách sử dụng bộ chọn

2

2

1

2

4

Ghi chú. Điều này hoạt động vì nhãn là phần tử tiếp theo ngay sau trường đầu vào. Bộ chọn cộng nhắm mục tiêu phần tử ngay lập tức tiếp theo để nó không hoạt động nếu nhãn được đặt trước đầu vào hoặc phần tử khác được đặt ở giữa hai phần tử

Nhãn nổi với đầu vào của người dùng

Một tính năng khác của nhãn nổi là nó vẫn nổi nếu đầu vào có giá trị, ngay cả khi người dùng không còn tập trung vào đầu vào

Chúng ta có thể đạt được điều này bằng cách sử dụng bộ chọn CSS

2

2

Chúng tôi sử dụng bộ chọn hợp lệ cho các đầu vào bắt buộc để phát hiện xem đầu vào có giá trị hay không.  

1

3

3

4

Với điều này, nhãn vẫn nổi khi đầu vào được tập trung hoặc có giá trị

Thật không may, có một số nhược điểm khi sử dụng bộ chọn hợp lệ. Ví dụ: nếu bộ chọn hợp lệ được sử dụng cho mục nhập email, thì mục nhập được coi là không hợp lệ nếu giá trị không ở định dạng email.  

Chúng ta có thể giải quyết vấn đề này bằng một chút JavaScript

Thêm Trình xử lý sự kiện JavaScript

Chúng tôi sử dụng JavaScript để phát hiện xem đầu vào có giá trị hay không bất cứ khi nào người dùng điều hướng khỏi nó

1

3

2

3

    First Name

4

    First Name

5

    First Name

2

    First Name

2

4

2

4

2

4

Bất cứ khi nào đầu vào mất tiêu điểm, chúng tôi sẽ kiểm tra xem nó có chứa giá trị không. Nếu có, chúng tôi thêm lớp

2

2

1

3

2

3

4

Với điều này, chúng tôi đã triển khai thiết kế nhãn nổi

Đây là CSS hoàn chỉnh để tạo lại giao diện biểu mẫu Thiết kế Vật liệu

1

2

3

5

4

5

5

5

5

2

5

2

2

2

2

5

Nhãn nổi thiết kế Material Design của bạn đã hoàn tất

Như với hầu hết các mẫu thiết kế, các nhãn nổi đã gây ra nhiều cuộc tranh luận. Miễn là bạn làm cho biểu mẫu của mình có thể truy cập và dễ sử dụng, bạn có thể sử dụng bất kỳ mẫu thiết kế nào bạn thích. Hy vọng, hướng dẫn này đóng vai trò là hướng dẫn hữu ích nếu bạn chọn sử dụng nhãn nổi

Thêm hướng dẫn thiết kế biểu mẫu

Tìm hiểu thêm về các mẫu thiết kế biểu mẫu, nhãn nổi, biểu mẫu Material Design và khả năng truy cập biểu mẫu tại đây trên Tuts+

Nhãn nổi là gì?

Làm cách nào để thả nổi trình giữ chỗ trong HTML?