The online home of Daniel Winer

Basic "Stacked" Form - All inputs below the labels

Name Email address Your message

Which is better? The Simpsons Family Guy Southpark

What kind of things would you like to to receive alerts about? Parties with free beer Car keys with built-in GPS tracking Smart phone apps to help you find your car Self driving cars for returning from events with free beer

Favourite beer Heineken Carlsberg Stella Artois Cronenberg Guiness Amstel Corona

Send Cancel

---

Horizontal form - All inputs and labels inline

Name

Email

Your message

Favourite beer

Heineken Carlsberg Stella Artois Cronenberg Guiness Amstel Corona

Which is better?

The Simpsons Family Guy Southpark

Send

---

Help messages - form hints

Stacked

Name Please enter your full name Email address Must be a valid email address

Stacked with messages inline

Name

Please enter your full name

Email address

Must be a valid email address

Horizontal form

Name

Please enter your full name

Email address

Must be a valid email address Login

Horizontal form with help below

Name

Please enter your full name

Email address

Must be a valid email address

Help appears on :focus - CSS only!

Name Please enter your full name Email address Must be a valid email address

Name

Please enter your full name

Email address

Must be a valid email address

---

Dimensions

Size 1

Size 2

Size 3

Size 4

Size 5

Size 6

Size 7

Size 8

Size 9

Size 10

Size 11

Size 12

Mini

Small

Medium

(default)

Large

Xlarge

---

Prepended and appended inputs

Prepend

Amount

$ How much would you like to donate?

With number input

Amount

$ How much would you like to donate?

Append

Amount

€ How much would you like to donate?

Both

Amount

$ .00 How much would you like to donate?

Stacked form

Amount

$ .00 How much would you like to donate?

---

Search

Go

---

Validation and error messages

Stacked

Email address Please use a valid email address

Horizontal

Email address

Please use a valid email address

Checkbox

I agree to the terms and conditions

---

Log in form

Log in

---

Required fields

Stacked form

Email

Horizontal form

Email

---

Exceptions

Stacked form with horizontal inputs

Which is better? The Simpsons Family Guy Southpark

Day Monday Month January

Horizontal form with inputs below

Which of the following beers is your favourite?

Heineken Carlsberg Stella Artois Cronenberg Guiness Amstel Corona

What kind of things would you like to to receive alerts about?

Parties with free beer Car keys with built-in GPS tracking Smart phone apps to help you find your car Self driving cars for returning from events with free beer

Horizontal form with stacked inputs

What kind of things would you like to to receive alerts about?

Parties with free beer Car keys with built-in GPS tracking Smart phone apps to help you find your car Self driving cars for returning from events with free beer

---

Fieldsets and legends

Account details

Username

Must be at least five characters

Password

Must contain one number and one capital letter

Repeat password

Email address

Must be a valid email address

Address

First name

Last name

Address

City

Postcode

Country

Spain United Kingdom

---

Buttons

Standard position

Email address Password Login

Email address

Password

Login

Right aligned

Email address Password

Login

Email address

Password

Login