Dạng css thuần túy

Các biểu mẫu rất cần thiết trong các trang web để thu thập dữ liệu hoặc thông tin cho các mục đích khác nhau. Sử dụng Biểu mẫu CSS thuần túy, chúng ta có thể tạo các loại biểu mẫu khác nhau

Kích thước của đầu vào của các biểu mẫu luôn quan trọng. Vì vậy, đầu vào rất quan trọng trong bất kỳ hình thức trang web nào. Nó được sử dụng để lấy các đầu vào khác nhau từ người dùng, điều cần thiết trong việc thu thập dữ liệu hoặc thông tin. Các phần tử đầu vào có kích thước chiều rộng linh hoạt theo cú pháp tương tự như Pure Grids. Bạn có thể áp dụng lớp pure-input-* cho các phần tử này

Định cỡ đầu vào biểu mẫu CSS thuần túy. Để áp dụng các kích thước khác nhau của các trường nhập liệu, bạn phải có kiến ​​thức về Pure CSS Grid. Các lớp Lưới CSS thuần túy được sử dụng bên trong trường đầu vào để xác định kích thước trường đầu vào

Với CSS, bạn có thể tạo ra các hiệu ứng rất đẹp và thú vị khi kết hợp với HTML và JavaScript, hoặc ngay cả khi chỉ có mình nó, CSS hỗ trợ rất nhiều trong thiết kế giao diện. Bạn sẽ ngạc nhiên về những gì các nhà phát triển có thể tạo ra

Từ các hình ảnh động cuộn đơn giản đến nền phức tạp được xây dựng hoàn toàn bằng CSS, những hiệu ứng này có thể làm cho trang web của bạn trở nên linh hoạt và sáng tạo hơn

Liệu rằng chúng ta có thể biết được một đầu vào trống hay không chỉ với CSS? . Giả sử chúng ta muốn như sau

  • Chúng ta sẽ ẩn danh sách thả xuống khi đầu vào không có giá trị
  • Hiện danh sách thả xuống khi người dùng nhập giá trị

Dạng css thuần túy

Đầu tiên, chúng tôi xây dựng một biểu mẫu HTML với một đầu vào duy nhất

Khi người dùng nhập giá trị vào đầu vào, chúng ta sẽ tạo kiểu cho đầu vào với thuộc tính

2 thành màu xanh lá cây. Dưới đây là ảnh demo

Dạng css thuần túy

Check tra nếu đầu vào trống

Chúng ta sử dụng xác thực biểu mẫu HTML để kiểm tra xem đầu vào trống không. Điều này có nghĩa là chúng ta phải sử dụng thuộc tính

3

Tại thời điểm này, nó hoạt động tốt cho người dùng nhập giá trị vào đầu vào. Đường viền của đầu vào sẽ chuyển sang màu xanh lá cây

Dạng css thuần túy

Tuy nhiên, có vấn đề xảy ra đó là. Nếu người dùng nhập khoảng trắng thì đường viền của đầu vào cũng chuyển màu xanh lá cây

Dạng css thuần túy

Về mặt kỹ thuật, điều này là chính xác. Đầu vào có giá trị bởi vì người dùng đã nhập giá trị cho nó mặc dù đó là ký tự khoảng trắng. Nhưng chúng ta không muốn hiện dropdown (tự động hoàn thành) khi người dùng nhập vào khoảng trống chúng ta cần sử dụng thêm kỹ thuật để làm được điều này

Thêm điều kiện kiểm tra

HTML cung cấp cho chúng ta khả năng xác thực đầu vào bằng các biểu thức chính xác quy định thuộc tính mẫu. Chúng ta sẽ thử sử dụng chúng với thuộc tính

4. Chúng ta không muốn khoảng trắng được chấp nhận hợp lệ, chúng ta sử dụng mẫu
5. This pattern has mean is. Một hoặc nhiều ký tự mà không phải là một khoảng trắng

If user input into a blank space, input not be validate

Dạng css thuần túy

Nhưng khi khoảng trắng được người dùng nhập vào đầu vào, đầu vào sẽ không hợp lệ

Dạng css thuần túy

Do đó chúng ta sẽ bao gồm cả khoảng trắng trong patternpattern. Sự thay thế tốt nhất mà chúng ta không thể nghĩ đến đó là

6. Điều này có nghĩa là 1 hoặc nhiều ký tự không phải khoảng trắng theo sau là 0 hoặc nhiều (bất kỳ) ký tự

________số 8

Dạng css thuần túy

Bây giờ đã hoạt động như chúng ta mong muốn, chúng ta có thể nhập khoảng trắng giữa các từ

Dạng css thuần túy

Kiểu khi đầu vào không hợp lệ

Liệu rằng chúng ta có thể định kiểu cho trạng thái khi đầu vào không hợp lệ? . Nó được sử dụng để kiểm tra khi trình giữ chỗ nào hiển thị

0

Chúng ta cũng cần tạo kiểu cho đầu vào khi đầu vào ở trạng thái hợp lệ

1

Dưới đây là bản demo chi tiết

Chú thích. Trình duyệt Edge không hỗ trợ

7 do đó nó không phải là ý tưởng tốt để phát triển khi ứng dụng được sản xuất

Kết luận

Như chúng ta có thể nhận thấy rằng chúng ta hoàn toàn có thể xác thực biểu mẫu bằng cách sử dụng CSS, nhưng có những vấn đề tiềm ẩn khi xác thực khi liên quan đến các ký tự khoảng trống. Nếu không quan tâm đến vấn đề liên quan đến vấn đề khoảng trắng thì chúng ta hoàn toàn có thể sử dụng một số mẫu sau