Collection of free hand-picked CSS Forms. All the collections are Included with the demos and source codes.
About the Code
Interactive Form
Interactive input form built with just CSS. Abusing focus state & labels to handle transitions & navigation.
Navigate between inputs using Tab (Next) & Shift + Tab (Prev).
Pure CSS. No JS included.
More info: Link
Dependency: –
About the Code
Pure CSS Steps
The “Step By Step” pattern is usually 100% developed with JavaScript but you can use CSS too.
Enjoy this example of “what can be done” just with SASS, simulating a “sign-up” process.
More info: Link
Dependency: –
About the Code
Colourful Registration Form
Using only HTML and CSS here is a colorfully styled form. The simplicity yet the stylish appeal of this form can be used virtually anywhere for more than just registrations.
More info: Link
Dependency: –
About the Code
Flat Responsive Form using CSS3 & HTML5
Flat Responsive Form using CSS3 & HTML5 with image background. I’m only sending the PHP and the AJAX validation to people who are willing to make a donation. Sorry for this but I spent a long time making it and get requests on a daily basis.
More info: Link
Dependency: –
About the Code
Log In CSS Forms
Log In Forms
More info: Link
Dependency: CSS – bootstrap.min.css, all.min.css, font-awesome-animation.min.css JS – jquery.min.js
About the Code
Calm breeze login screen
A ultra simple login screen on a calm breezy day,
More info: Link
Dependency: jquery.min.js
About the Code
React Daily UI – 002 – Checkout
Day 2 of the ReactJS DailyUI project. I’m going to be making 100 different React pens over the next 100 days, in order to get better.
Today I’m building a checkout card for a hotel stay. Cool.
More info: Link
Dependency: font-awesome.min.css, JS – react-with-addons-0.14.7.js, react-dom.min.js, zepto.min.js
About the Code
Credit Card Recovery Form: Step 1
More info: Link
Dependency: Google Fonts 1, Google Fonts2
About the Code
Simple register css form
This Pen has no libraries except fonts
The answers are stored in the questions array
More info: Link
Dependency: ionicons.min.css, font family:Roboto:400,700
About the Code
Login Form CSS only validation
Combining multiple concepts together of visible password, CSS Validation, Sibling Selectors, checkbox hacks this enables a CSS only validation for a login form.
:invalid:not(:focus):not(:placeholder-shown)
This also has the show/hide pattern using CSS with a checkbox hack withtext-security: disc
More info: Link
Dependency: –
Discussion about this post