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ị
Đầ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
Input
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
Input
2 thành màu xanh lá cây. Dưới đây là ảnh demoCheck 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
Input
3
Input
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
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
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
Input
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
Input
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
Input
If user input into a blank space, input not be validate
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ệ
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à
Input
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ố 8Bâ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ừ
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ị
Input
0Chú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ệ
Input
1Dưới đây là bản demo chi tiết
Chú thích. Trình duyệt Edge không hỗ trợ
Input
7 do đó nó không phải là ý tưởng tốt để phát triển khi ứng dụng được sản xuấtKế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