A. Sau khi đọc và xem bài viết và hướng dẫn sau đây, bạn sẽ có thể tạo một biểu mẫu hoặc trang đăng nhập có biểu tượng trong trường nhập liệu
Xin chào các độc giả, hôm nay trong blog này tôi sẽ tạo một biểu mẫu đăng nhập có biểu tượng bằng HTML và CSS. Trong một blog trước đây, tôi đã chia sẻ Cách tạo biểu mẫu đăng ký đáp ứng và bây giờ chúng ta hãy vào biểu mẫu đăng nhập
Mẫu đăng nhập hoặc trang là gì?
Theo cách dễ hiểu nhất, chúng ta có thể nói, biểu mẫu đăng nhập có nghĩa là một biểu mẫu nhập nơi người dùng cần nhập thông tin nhận dạng của họ [số điện thoại hoặc địa chỉ email và mật khẩu] để vào trang web cụ thể. Tất cả người dùng có địa chỉ email hoặc điện thoại và mật khẩu duy nhất của họ.
Như bạn có thể thấy trên hình ảnh đã cho của Biểu mẫu đăng nhập của chúng tôi với biểu tượng. Ở trên cùng, tôi đã thêm hai nút đăng nhập mạng xã hội, ở dưới cùng, tôi đã tạo hai trường nhập liệu với biểu tượng phông chữ tuyệt vời. Bạn cũng có thể thêm hình ảnh của các biểu tượng, tùy bạn. Bằng cách đưa ra vị trí tuyệt đối, chúng tôi có thể quảng cáo
Làm thế nào để bạn đặt một biểu tượng trong Trường đầu vào?
Sau đây là mã CSS để đặt các biểu tượng bên trong các tệp đầu vào và hãy nhớ rằng trường đầu vào phải tương đối
- Chức vụ. tuyệt đối;
- hàng đầu. 50%;
- trái. 10px;
- biến đổi. dịchY[-50%];
Để lấy ví dụ thực tế về biểu mẫu đăng nhập này và cách tất cả mã hoạt động, tôi khuyên bạn nên xem video hướng dẫn sau đây về biểu mẫu đăng nhập có biểu tượng
Biểu mẫu đăng nhập với các biểu tượng sử dụng HTML và CSS. Video hướng dẫn
Như bạn đã thấy trên video hướng dẫn cụ thể về biểu mẫu đăng nhập động với các biểu tượng phông chữ tuyệt vời và nút đăng nhập mạng xã hội. Tôi sẽ cung cấp liên kết CDN của phông chữ tuyệt vời bên dưới. Để tạo thiết kế biểu mẫu đăng nhập này, tôi chỉ sử dụng HTML và CSS
Nếu bạn có kiến thức tổng quát về HTML & CSS thì bạn có thể dễ dàng tạo ra loại trang đăng nhập này. Bạn nào cảm thấy khó làm dạng này thì đừng lo mình có cung cấp toàn bộ file mã nguồn bên dưới. Bạn cũng có thể tải xuống trực tiếp tất cả các tệp mã nguồn
bạn có thể thích điều này
- Biểu mẫu đăng nhập hoạt hình HTML & CSS
- Biểu mẫu đăng nhập đáp ứng HTML & CSS
- Biểu mẫu đăng nhập với hoạt ảnh nhãn nổi
- Thiết kế thẻ hồ sơ với các biểu tượng phương tiện truyền thông xã hội
Biểu mẫu đăng nhập có biểu tượng bằng HTML và CSS. Mã nguồn miễn phí
Để dán các mã đã cho của Biểu mẫu đăng nhập bằng Biểu tượng này, bạn cần tạo hai tệp, một tệp là tệp HTML và tệp kia là tệp CSS. Sau khi tạo hai tệp này, bạn có thể sao chép-dán các mã đã cho vào tệp của mình. Nhấp vào nút tải xuống sau để tải xuống tệp mã nguồn