HTML5 FlexBox Form Layout

The example demonstrates a simple responsive form layout.

User:

Email:

Password:

Remember me

Web Page

Name:

ReadOnly:

Disabled:

Personal information Form 1

First Name:

Last Name:

Age:

Gender: Male Female

E-mail(s):

Mobile:

Web Site:

Hobbies:

Reading

Coding

Cooking

Drawing

Singing

Please, tell us your favorite:

Fruit (input): Fruit (datalist):

How many can you eat?

Count:

Decimal:

Personal Information Form 2

Color pickers:

Warning!

Color input widget support is currently not very good. There is no support in IE, and Safari currently doesn't support it either. The other major browsers do support it.

Success!

Open the codepen in IE 10 & 11 to see the implemented solution.

Color:

Sliders:

#000000

Spinboxes:

#000000

Send us a Message:

Date and time pickers:

Warning!

The date, datetime-local, time, month and week input widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in IE and Safari has patchy support. To check out how they behave - uncomment the 5 flex-container-s below.

Success!

You can find below date and time input widgets examples and as well as full calendar widget suitable for mobile and desktop uses.

Datedropper:

Timedropper:

Calendar:

Send us file(s):

Image(s):

No files currently selected for upload

Audio(s):

Video(s):

Progress:

Image button:

Academic information Form

Degree:

Student ID:

Class(es) attended:

Payment Form 1 credit card icons

Thank you for choosing us!
Please, fill in the form to complete the purchase.
Required fields are followed by *.

Name:*

E-mail:*

Mobile:

Promo code:

Address 1:*

Address 2:
Optional

Zip code:*

Country:*

City:
Optional

Card type:*

Card number:*

Security Code:*

Expiration:*