Codepen CSS nhóm đầu vào
|
Xin chào các bạn, trong bài viết này, chúng ta sẽ tìm hiểu cách tạo hộp nhập liệu trong HTML và tôi cũng đã liệt kê hơn 15 ví dụ về mã HTML và Hộp nhập CSS miễn phí được chọn lọc thủ công tốt nhất. Hãy xem những Thiết kế đầu vào tuyệt vời này hiện có trên CodePen Show
Cách tạo hộp nhập liệu trong HTMLNếu chúng tôi muốn tạo hộp nhập liệu trong tài liệu Html để người dùng chèn các ký tự trên trang web thì chúng tôi phải làm theo các bước được đưa ra bên dưới. Sử dụng các bước này, bất kỳ ai cũng có thể tạo hộp nhập liệu Bước 1 — Tạo một dự án mớiTrong bước này, chúng ta cần tạo một thư mục dự án mới và các tệp (chỉ mục. html, kiểu. css ) để tạo hộp Nhập liệu. Trong bước tiếp theo, bạn sẽ bắt đầu tạo cấu trúc của trang web Bước 2 — Thiết lập cấu trúc cơ bảnTrong bước này, chúng tôi sẽ thêm mã HTML để tạo cấu trúc cơ bản của dự án
Đây là cấu trúc cơ bản của hầu hết các trang web sử dụng HTML. Bước 3 - Thêm kiểu cho các lớpTrong bước này, chúng ta sẽ thêm các kiểu vào lớp phần Kiểu bên trong. tập tin css * {
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
}
#Kết quả cuối cùngDưới đây là các loại đầu vào khác nhau mà bạn có thể sử dụng trong HTMLNếu bạn muốn tìm hiểu thêm về HTML thì đây là hướng dẫn đầy đủ về HTML cho người mới bắt đầu HTML là gì? Bộ sưu tập thiết kế hộp đầu vào CSS tốt nhấtTrong bộ sưu tập này, tôi đã liệt kê hơn 15 hộp nhập HTML tốt nhất, hãy xem những Thiết kế đầu vào tuyệt vời này như. #1Hộp văn bản CSS 3D thuần túy, #2Hộp nhập văn bản giữ chỗ, #3Hộp nhập có hoạt ảnh báo lỗi mật khẩu, và nhiều hơn nữa #1 Hộp văn bản CSS 3D thuần túyHộp văn bản CSS 3D thuần túy do Jouan Marcel phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Jouan MarcelĐược tạo trên. Ngày 17 tháng 12 năm 2019Làm bằng. HTML(Pug) & CSS(Saas)Liên kết Demo. Mã nguồn / DemoTags. Hộp văn bản CSS 3D thuần túy#2 Hộp nhập văn bản giữ chỗHộp nhập văn bản nhập văn bản giữ chỗ do Michael Smart phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn #3 Ô nhập liệu có hoạt ảnh lỗi mật khẩuHộp nhập liệu có hoạt ảnh lỗi mật khẩu do Himalaya Singh phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Himalaya SinghĐược tạo trên. Ngày 15 tháng 10 năm 2018Làm bằng. HTML, CSS & JSDemo Link. Mã nguồn / DemoTags. Hộp nhập liệu có hoạt ảnh lỗi mật khẩu#4 Hộp nhập xác thực độngHộp nhập xác thực hoạt hình, được phát triển bởi Jhey. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. JheyĐược tạo trên. Ngày 1 tháng 5 năm 2020Làm bằng. HTML(Pug) & CSSDemo Link. Mã nguồn / DemoTags. Hộp nhập xác thực#5 Nhóm đầu vào. tập trung vào bên trongNhóm hộp nhập CSS do Aaron Iker phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Aaron IkerĐược tạo trên. Ngày 15 tháng 8 năm 2019Làm bằng. Liên kết trình diễn HTML & CSS(SCSS). Mã nguồn / DemoTags. Nhóm hộp nhập liệu#6 Trường văn bản đầu vào tài liệuTrường văn bản nhập tài liệu, được phát triển bởi Fatma. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. FatmaĐược tạo trên. Ngày 15 tháng 8 năm 2019Làm bằng. HTML & CSSLiên kết giới thiệu. Mã nguồn / DemoTags. Trường văn bản nhập tài liệu#7 Hộp nhập CSS kiểu WebflowHộp nhập liệu CSS kiểu Webflow do Phil Rose phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Phil RoseĐược tạo trên. Tháng Tám 22, 2015Làm bằng. Liên kết trình diễn HTML & CSS(SCSS). Mã nguồn / DemoTags. Hộp nhập CSS kiểu Webflow#8 Trường nhập liệu có hoạt ảnh xác thực EmailHoạt ảnh xác thực trường nhập với email do Aaron Iker phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn #9 Hộp đầu vào lấy cảm hứng từ GoogleHộp nhập liệu lấy cảm hứng từ Google do Nikolaj Rasch phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Nikolaj RaschTạo trên. Ngày 9 tháng 5 năm 2020Làm bằng. Liên kết demo HTML, CSS(SCSS) và jS. Mã nguồn / DemoTags. Hộp đầu vào lấy cảm hứng từ Google#10 Đầu vào có nhãn nổiĐầu vào có nhãn nổi do Hernan Almeida phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Hernan AlmeidaĐược tạo trên. May 11, 2016Làm bằng. Liên kết demo HTML, CSS(SCSS) và jS. Mã nguồn / DemoTags. Đầu vào có nhãn nổi#11 Thiết kế đầu vào biểu mẫu khi Hover và FocusThiết kế đầu vào biểu mẫu onHover và onFocus, được phát triển bởi MAHESH AMBURE. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. MAHESH AMBUREĐược tạo trên. Tháng Một 24, 2018Làm bằng. HTML & CSSLiên kết giới thiệu. Mã nguồn / DemoTags. Thiết kế đầu vào biểu mẫu#12 Trường đầu vào hoạt hình ưa thíchTrường đầu vào hoạt hình ưa thích, được phát triển bởi Andy Pagès. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Andy PagesĐược tạo vào. Tháng Tám 19, 2016Làm bằng. Liên kết demo HTML, CSS(SCSS) và JS. Mã nguồn / DemoTags. Thiết kế đầu vào biểu mẫu#13 Đầu vào chữ số chấmDot Digit Input, được phát triển bởi Godje. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. GodjeTạo trên. Ngày 23 tháng 4 năm 2017Làm bằng. Liên kết demo HTML, CSS(Sass) & JS. Mã nguồn / DemoTags. Đầu vào chữ số chấm#14 Nhóm đầu vào BootstrapNhóm hộp nhập Bootstrap do ysds phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. ysdsĐược tạo vào. Ngày 29 tháng 12 năm 2017Làm bằng. HTML & CSSLiên kết giới thiệu. Mã nguồn / DemoTags. Nhóm hộp đầu vào Bootstrap#15 Thiết kế đầu vào ưa thích CSS thuần túyPure CSS Fancy Input Design, được phát triển bởi Praveen Bisht. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Praveen BishtĐược tạo trên. Tháng Bảy 3, 2018Làm bằng. HTML(Pug) & CSS(SCSS)Liên kết Demo. Mã nguồn / DemoTags. Thiết kế đầu vào ưa thích CSS thuần túy#16 Hộp nhập liệu hoạt hình khi di chuộtHộp nhập liệu hoạt hình khi di chuột do Catherine Vidos phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn Tác giả. Catherine VidosĐược tạo trên. Ngày 26 tháng 2 năm 2021Làm bằng. Liên kết trình diễn HTML & CSS(SCSS). Mã nguồn / DemoTags. Hộp đầu vào di chuột hoạt hình#17 Đầu vào Bootstrap với Bộ đếm ký tự, được phát triển bởi MohammadReza Kootvaal. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn |
