Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > [Share code] Một vài mẫu form với Bootstrap đẹp tháng 8/2018
[Share code] Một vài mẫu form với Bootstrap đẹp tháng 8/2018
Nguyễn Trung Hiếu
Share Code Web Company 2018

[Share code] Một vài mẫu form với Bootstrap đẹp tháng 8/2018

Hôm nay, sharecodeweb sẽ chia sẻ cho các bạn một vài mẫu form với bootstrap cực đỉnh. Trong đó có cả form liên hệ, form đăng nhập…của nhiều tác giả.

Để tiện theo dõi demo trên codepen, các bạn có thể lựa chọn phần Result. Ngược lại cần tham khảo code thì có thể lựa chọn phần HTML, CSS, JS.

Contact Form with Bootstrap

Đây là mẫu mà mình thấy nhiều anh em sẽ phải hay dùng nhất khi thiết kế web. Code HTML khoa học, có sử dụng bootstrap nên không phải CSS quá nhiều. Trong code cũng có sử dụng jQuery để thực hiện một số thủ thuật liên quan đến gửi email.

See the Pen Contact Form by jordan rhea (@rheajt) on CodePen.

Kỷ niệm thêm một form đăng nhập với bootstrap.

See the Pen Bootstrap form by Alpi Singhal (@Suchika) on CodePen.

Bootstrap form elements

Code tạo và style cho các thành phần trong thẻ form nhìn rất hiện đại. Trong đó có biểu tượng tăng, giảm số lượng; các biểu tượng liên quan đến khởi tạo password; kiểm tra độ mạnh yếu của mật khẩu….

See the Pen Bootstrap form elements by Nikola Tomic (@dzo87bl) on CodePen.

Playing with Bootstrap Combobox

Một mẫu form có combobox sử dụng bootstrap. Các bạn kích thử hai lựa chọn combobox là Sizecolor. Ngoài ra tác giả cũng gợi ý ngay cách sử dụng bên thẻ programatic code để các bạn tiện tham khảo.

See the Pen XzVbep by Charles Brewster (@cbrewster) on CodePen.

React Component for HTML5 Form Validation with Bootstrap

Mẫu form từ HTML5 và có sử dụng jQuery để validation dữ liệu. Form gồm có 2 ô input cho phép nhập email và password. Sau khi nhấn nút submit, dữ liệu sẽ được kiểm tra xem phù hợp với điều kiện không và đưa ra cảnh báo.

See the Pen React Component for HTML5 Form Validation with Bootstrap by Arpy (@_arpy) on CodePen.

Animated Login Form

Mẫu form đăng nhập cơ bản gồm username và password. Cá nhân mình không thích kiểu phối màu này lắm. Nếu có thể các bạn có thể css lại theo ý mình cho đẹp.

See the Pen Animated Login Form by Alex Cornejo (@AlexXxCornejo) on CodePen.

Sliding labels for Bootstrap forms (jQuery)

Mẫu form có hiệu ứng chuyển động của phần nhãn các trường nhập giá trị. Các bạn thử nhấn TAB hoặc kích chuột vào các thẻ input sẽ thấy hiệu ứng thu nhỏ label.

See the Pen Sliding labels for Bootstrap forms (jQuery) by Alessandro Falchi (@afalchi82) on CodePen.

Responsive website – Bootstrap

Và cuối cùng là nguyên cả một mẫu website với Bootstrap luôn nhé anh em. Điểm đặc biệt như anh em thấy là dù độ rộng phần bài viết trên Sharecodeweb rất nhỏ. Tuy nhiên nếu sử dụng Bootstrap thì toàn bộ trang web mà anh em thiết kế sẽ tự động chuyển chế độ responsive như dưới. Rất hay.

See the Pen Responsive website – Bootstrap by Enea Xharja (@eneax) on CodePen.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.705 hits
%d bloggers like this: