CSS thuộc về một lớp ngôn ngữ duy nhất, được gọi là ngôn ngữ bảng định kiểu. Nó chủ yếu được sử dụng để xác định bản trình bày trang web của bạn. Mặc dù HTML cho phép bạn chỉ định cách cấu trúc trang của bạn, nhưng CSS được sử dụng để tạo kiểu cho nó. Nếu không, bạn sẽ kết thúc với một trang web khá kém hấp dẫn.

Tập trung vào CSS là một trong những cách tốt hơn để cải thiện sự hấp dẫn của trang web của bạn, đặc biệt là khi nói đến việc nâng cao trải nghiệm người dùng của bạn. Bằng cách này, bạn cũng có thể tăng lưu lượng truy cập của mình. Đối với người mới bắt đầu, bạn có thể sử dụng biểu mẫu xếp chồng lên nhau.

Biểu mẫu xếp chồng lên nhau là gì?

Một biểu mẫu xếp chồng cho phép bạn tạo một biểu mẫu chuyên biệt, nơi bạn có thể đặt các nhãn và thông tin đầu vào của mình chồng lên nhau, thay vì đặt chúng theo một mẫu nằm ngang.

Đây là cách bạn có thể làm điều đó.

Mã HTML

Sử dụng phần tử HTML, <form> , để xử lý thông tin của bạn. Thêm nhãn cho các trường liên quan và gán các trường đầu vào có liên quan. Trong ví dụ này, chúng tôi yêu cầu người dùng cung cấp tên đầy đủ và địa chỉ email của họ cùng với văn bản loại đầu vào của biểu mẫu , trong khi menu thả xuống được tạo thông qua id chọn để giúp họ chọn ngành của mình.

The specified language : HTML does not exist'

Code generation failed!!

'

Tuy nhiên, việc chạy đoạn mã này sẽ chỉ tạo ra một dạng nhạt nhẽo mà không xếp chồng các trường theo chiều dọc. Và đó là nơi bạn sẽ phải thêm CSS.

Mã phần CSS

Bây giờ, hãy tạo một biểu định kiểu riêng và thêm nó vào HTML của bạn trước thẻ body:

The specified language : CSS does not exist'

Code generation failed!!

'

Tiếp theo, chọn nội dung, loại đầu vào và vùng chứa HTML của bạn và tạo kiểu cho chúng thông qua CSS. Điều này sẽ bao gồm việc thử nghiệm với các thuộc tính CSS khác nhau , chẳng hạn như họ phông chữ, chiều rộng, phần đệm, lề, hiển thị, đường viền, v.v. và thêm các giá trị ưa thích của bạn. Bằng cách này, bạn sẽ có một biểu mẫu xếp chồng lên nhau phù hợp với sở thích chính xác của bạn. Đây là một ví dụ.

The specified language : CSS does not exist'

Code generation failed!!

'

Kiểm tra đầu ra bên dưới.

Bây giờ bạn có thể tạo một biểu mẫu xếp chồng lên nhau trong CSS

Với bài viết này, bạn đã học cách tạo một biểu mẫu xếp chồng lên nhau trong CSS. Với thực hành, bạn sẽ có thể tinh chỉnh các biểu mẫu của mình và làm cho trang web của bạn thân thiện hơn với người dùng.

Tên của trò chơi lập trình là “thực hành”. Rèn luyện kỹ năng CSS của bạn ngày này qua ngày khác với các dự án triển lãm để trở thành một nhà thiết kế web sành điệu và nhà phát triển web hiệu quả hơn.

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/create-stacked-form-css/