Khi chúng tôi xây dựng biểu mẫu, chúng tôi muốn làm cho chúng trở nên độc đáo và hấp dẫn đối với khách hàng hoặc khách hàng của chúng tôi. Đúng là cách chúng tôi trình bày biểu mẫu của mình làm cho trải nghiệm người dùng tốt hơn nhiều. Để tạo kiểu cho các biểu mẫu của chúng tôi, chúng tôi sử dụng nhiều bộ chọn loại đầu vào CSS.
Cú pháp và Ví dụ
Trong khi bạn đọc bài viết này, hãy tham khảo Codepen đi kèm.
Tôi giả sử rằng bạn đã có một số kinh nghiệm xây dựng biểu mẫu bằng HTML, vì vậy tôi sẽ không trình bày chi tiết về HTML.
Không có bất kỳ kiểu dáng nào, biểu mẫu của chúng tôi trông giống như sau:
Nếu chúng ta ở những năm 1990, điều này sẽ không tệ như vậy, ý tôi là hãy xem trang chủ của Netscape (một trình duyệt phổ biến của thập niên 90).
Nhưng chúng tôi không ở trong những năm 90. May mắn thay, ngày nay chúng ta có CSS và chúng ta có thể tạo kiểu đầu vào chỉ với cú pháp đơn giản sau:
input[type="<type>"] {
/* styles here */
}
Kiểu đầu vào văn bản
Điều đầu tiên chúng ta có thể làm là định dạng kích thước phông chữ của đầu vào và nhãn của chúng ta. Chúng tôi có thể chọn chúng theo từ khóa dễ dàng như sau:
input, label {
font-size: 2rem;
padding: 1rem;
}
Điều này sẽ làm cho văn bản của chúng tôi dễ đọc hơn và cung cấp một số khoảng trống giữa các đầu vào. Sau đó, hãy tiếp tục và tạo kiểu cho kiểu nhập văn bản có tên cũng như email của chúng tôi.
input[type="text"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
input[type="email"] {
border: 0;
border-left: 0.3rem solid mediumspringgreen;
border-radius: 0.5rem;
}
Mẹo ở đây là chúng ta loại bỏ các đường viền và chỉ thêm đường viền cụ thể mà chúng ta cần. Đối với email của chúng tôi, chúng tôi đã thêm một số bán kính vào đường viền của chúng tôi để làm cho nó trông tròn hơn. Với rất ít mã, chúng tôi đã thực hiện một số cải tiến tốt.
Lưu ý:Trình đơn thả xuống
Một đầu vào khác mà chúng ta có thể tạo kiểu là danh sách thả xuống. Nhưng có một cảnh báo. Nếu chúng ta input[type="select"] nó sẽ không chọn trình đơn thả xuống của chúng tôi. Chúng ta phải sử dụng select từ khóa để chọn danh sách thả xuống.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
select {
padding: 2rem;
font-size: 2rem;
width: 25rem;
border: none;
border-bottom: 0.3rem solid mediumspringgreen;
}
Các kiểu đầu vào khác
Bây giờ bạn sẽ có các đầu vào tạo kiểu. Ngoài ra, có vẻ như chúng ta đã có một kiểu mẫu. Hãy tiếp tục và thêm mẫu kiểu của chúng tôi vào đầu vào số và ngày.
input[type="number"], input[type="date"] {
border: 0;
border-bottom: 0.3rem solid mediumspringgreen;
}
Chỉ với một vài nét vẽ CSS và bằng cách sử dụng các bộ chọn rất dễ dàng, chúng tôi có thể mang đến một cái nhìn mới mẻ cho các đầu vào của mình!
Đây chỉ là bước khởi đầu, vì vậy hãy tưởng tượng bạn có thể hoàn thành những gì khác.
Trên thực tế, tôi đã bỏ dở một số đầu vào tại Codepen. Vì vậy, hãy tiếp tục và áp dụng bất kỳ phong cách nào bạn muốn. Bạn đã biết làm thế nào để làm điều đó. Bắt đầu!