Примеры верстки формы css

85 Stylish CSS forms

Here is a collection of some of the most stylish CSS forms made with just HTML and CSS.

You may also like

• CSS Contact Forms
• 75 CSS Text Animations You Can Use
• 15 Amazing CSS Animated Background for you to try
• 57 Beautiful CSS Cards examples to improve your UI
• 19 Cool CSS Loading Animation to inspire you
• 17 Fancy CSS Search Boxes
• 21 Modern CSS menu examples
• 23 Fantastic CSS Hover Effects
• 19 CSS Border Animations you can implement
• 15 Stylised CSS Tables
• 13 Pure CSS Dropdown Menus
• 15 Creative CSS Filter Examples
• 35 Unique CSS Text Effects
• 15 CSS Sliders you can use
• 21 New Bootstrap Login Forms for you
• 19 Bootstrap Profiles you can use for yourself
• 13 Material Design Login Forms
• 35 Cool CSS Select Boxes
• 15 CSS Range Sliders you can use today
• 35 Creative use of CSS clip-path examples
• 29 Unique CSS Toggle Switches
• 41 Beautiful CSS Animation Examples

Animated Login Form

Dev: Alvaro Montoro

Animated Login Form

Dev: Alex Cornejo

Simple Login Form Animated

Dev: Himanshu C

Animated-Login-Form

See the Pen Animated-Login-Form by Swarup Kumar Kuila (@uiswarup) on CodePen.

Dev: Swarup Kumar Kuila

Animated Login Form

Dev: Stack Findover

Animated Login Form

Dev: Torben Colding

Neumorphic form

Dev: Pratham

Neumorphic form

Dev: Philip Lahner

Simple Sign In Form

Dev: John Bowie

Minimal Sign-In Form With Bulma.io

Dev: Paul Barker

Login Screen Animation

Dev: Johan Fagerbeg

Placeholders

Dev: Mikael Ainalem

See the Pen Subscribe by Omar Dsooky (@linux) on CodePen.

Dev: Omar Dsooky

Day 001 Login Form

Dev: Mohan Khadka

See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.

Dev: Tyler Fry

Card component with floating labels

Dev: Håvard Brynjulfsen

Login form. Svg animation

Dev: @BrawadaCom

Abstract Sign Up Form – Day 2 – 100 DAYS – 2020

Dev: Ricky Eckhardt

Login Form with floating placeholder and light button

Dev: Soufiane Khalfaoui HaSsani

Log In / Sign Up – Pure CSS

Dev: Ivan Grozdic

See the Pen Login by Marco Biedermann (@marcobiedermann) on CodePen.

Dev: Marco Biedermann

Animated Login Form

Dev: Munsif Mujtaba

Placeholders

See the Pen Placeholders by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Neumorphism Login Form

Dev: Ricardo Oliva Alonso

Dev: Mike Young

Login form using HTML5 and CSS3

Dev: Brad Bodine

Sleek Login Form

Dev: Tony Banik

CSS Newsletter with Animated Floating Input Labels

Dev: Bilal.Rizwaan

Newsletter Form Dribble to HTML

Red Newsletter Form

Dev: Sazzad

See the Pen form by Arefeh hatami (@arefeh_htmi) on CodePen.

Dev: Arefeh hatami

Pupassure Sign Up Form

Dev: Ricky Eckhardt

Less annoying form

See the Pen Less annoying form by Andy Fitzsimon (@andyfitz) on CodePen.

Dev: Andy Fitzsimon

Transparent Material Login Form

Dev: alphardex

POP ART Button

Dev: Ahmad Nasr

Login form UI Design

Dev: Chouaib Belagoun

Sign-Up/Login Form

Multi Step Form with Progress Bar using jQuery and CSS3

Dev: Atakan Goktepe

Credit Card Form

Dev: Muhammed Erdem

Snake highlight

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Material Login Form

Dev: Andy Tran

Login Form – Modal

Dev: Andy Tran

Google Material Design Input Boxes

Dev: Chris Sev

Log in/Sign up screen animation

Dev: Josh Sorosky

Interactive Sign Up Form

See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.

Dev: Riccardo Pasianotto

Double slider Sign in/up Form

Dev: Florin Pop

Credit Card Payment Form

Dev: Adam Quinlan

Slide Sign In/Sign Up form

Dev: Danielkvist

Flat Login Form

Dev: Andy Tran

Material Design Login Form

Dev: Josh Adamous

Form fields with material design and video background, in pure CSS

Dev: Jon Uhlmann

RESPONSIVE MATERIAL DESIGN CONTACT FORM

Dev: Nikhil Krishnan

Material VCard

See the Pen Material VCard by Rian Ariona (@ariona) on CodePen.

Dev: Rian Ariona

Registration Form

Dev: afirulaf

Login/Registration Form Transition

Dev: Nikolay Talanov

Expanding Contact Form

Dev: Joe Harry

Responsive Signup/Login form

Dev: Mohamed Hasan

Interactive Form

See the Pen Interactive Form by Emmanuel Pilande (@epilande) on CodePen.

Dev: Emmanuel Pilande

Log in / Sign up

Dev: @BrawadaCom

Login/signup form animation

Dev: Shayan

Step by step register form

Dev: Jerome Renders

Elegant Login Form

See the Pen Elegant Login Form by Victor Hugo Matias (@reidark) on CodePen.

Dev: Victor Hugo Matias

MINIMALISTIC FORM

Dev: Matheus Marsiglio

Credit Card Checkout

Dev: Fabio Ottaviani

Form Design

See the Pen Form Design by Timurtek Bizel (@Timurtek) on CodePen.

Dev: Timurtek Bizel

One line Signup

Dev: Vineeth.TR

Animated Login Form

Spectre sign up form

Dev: Alex Devero

No Questions Asked Form & Magic Focus

Dev: Michal Niewitala

Obnoxious errors

Dev: Maria cheline

Flexbox Form

See the Pen Flexbox Form by Katherine Kato (@kathykato) on CodePen.

Dev: Katherine Kato

Invision login – dribbble remake

Dev: Mikael Ainalem

Emoji Form Validation

Dev: Marco Biedermann

Sign Up Form

Dev: Johnny Bui

CSS Snackables

Credit Card Payment Form

Dev: Jade Preis

Signup form UI

Dev: Tyler Johnson

Step by Step Form Interaction

Dev: balapa

Step By Step Form

Dev: DevTips

Step By Step Form

See the Pen Step by step form by Jonathan H (@Dunner) on CodePen.

Dev: Jonathan H

Single input 3D form

See the Pen Single input 3D form by Son Tran-Nguyen (@sntran) on CodePen.

Dev: Son Tran-Nguyen

Step by step form [KO]

See the Pen Step by step form [KO] by Thays Dos Santos Neves (@thayssn) on CodePen.

Dev: Thays Dos Santos Neves

Step by step form

See the Pen step by step form by Senhor Sulaiman (@zenu) on CodePen.

Dev: Senhor Sulaiman

Contact Form

See the Pen Contact Form by Aina Requena (she/her) (@ainarela) on CodePen.

Dev: Aina Requena

Источник

CSS Forms

The look of an HTML form can be greatly improved with CSS:

Styling Input Fields

Use the width property to determine the width of the input field:

Example

The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:

• input[type=text] — will only select text fields
• input[type=password] — will only select password fields
• input[type=number] — will only select number fields
• etc..

Padded Inputs

Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin , to add more space outside of them:

Example

Note that we have set the box-sizing property to border-box . This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.

Bordered Inputs

Use the border property to change the border size and color, and use the border-radius property to add rounded corners:

Example

If you only want a bottom border, use the border-bottom property:

Example

Colored Inputs

Use the background-color property to add a background color to the input, and the color property to change the text color:

Example

Focused Inputs

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus:

Example

Example

Input with icon/image

If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:

Example

input[type=text] <
background-color: white;
background-image: url(‘searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
>

Animated Search Input

In this example we use the CSS transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter.

Example

input[type=text] <
transition: width 0.4s ease-in-out;
>

input[type=text]:focus width: 100%;
>

Styling Textareas

Tip: Use the resize property to prevent textareas from being resized (disable the «grabber» in the bottom right corner):

Example

textarea <
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
>

Styling Select Menus

Example

select <
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
>

Styling Input Buttons

Example

input[type=button], input[type=submit], input[type=reset] <
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
>

/* Tip: use width: 100% for full-width buttons */

For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.

Responsive Form

Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.

Advanced: The following example uses media queries to create a responsive form. You will learn more about this in a later chapter.

Aligned Form

An example of how to style labels together with inputs to create a horizontal aligned form:

Источник