Tidy up how the form looks

01 / 06

Give the label its own line

label belongs to the same family as text, so left alone it sits on the same line as the input box.

Give it display: block; and it takes a whole line, dropping the input box below it.

.row label {  display: block;}

02 / 06

Decide how big the boxes are

An input box starts out short, too short for long text to fit. Widen it with width.

Give textarea a height as well and it shows at a glance how many lines you can write.

.row input {  width: 300px;}.row textarea {  width: 300px;  height: 120px;}

03 / 06

Borders and space inside

border and padding work on input boxes too. Space on the inside keeps what you type off the border, so it reads better.

Keep the border a pale grey and it will not fight with the words around it.

.row input {  border: 1px solid #cccccc;  padding: 8px;}

04 / 06

Make the button easy to press

Buttons want to be big, in a colour that stands out. Change the background and text colours, and puff it up with padding.

The gap between items comes right in one go if you write margin-bottom on the .row you wrapped them in. Have a go.

.btn {  background-color: #ff6600;  color: white;  padding: 12px;}

05 / 06

Watch how width and padding interact

Set width: 300px; and padding: 8px; together and the box actually ends up wider than 300px. By default, padding and border pile on top of width instead of eating into it.

The box-sizing: border-box; from an earlier chapter fixes this. With it set, adding padding no longer changes the box's outer width — it stays 300px.

.row input {  box-sizing: border-box;  width: 300px;  padding: 8px;}

06 / 06

Remember the form will get tapped, not clicked

Like the rest of this app, forms get used on phones a lot. Unlike a mouse pointer, a finger is not precise.

Aim for buttons and input boxes tall enough for a fingertip to land on — roughly 44px or more. Generous padding naturally gets you close to that.

.btn {  padding: 14px 20px;  min-height: 44px;}