Styling a form

Read first Task 35

Inputs need a label, a border, 44px height and an error state that is not colour alone.

Task

What should accompany a red error border?

The editor already contains a starting point. Change it until every check passes — the Next task button unlocks when it does.

What you start with

<form>
  <label for="e">Email</label>
  <input id="e" type="email">
</form>

Syntax reference

<style>
  input{min-height:44px;border:1px solid #c9c9cf;border-radius:8px;padding:0 12px;width:100%}
</style>
<form><label for="e">Email</label><input id="e" type="email"></form>

Read it, then write it yourself. Copy-paste teaches nothing.

HTML & CSS 1 automatic check Components

Code editor Ctrl + Enter runs

<form>
  <label for="e">Email</label>
  <input id="e" type="email">
</form>

Run your code to see the output and the checks.

Your result

Submit your code to see results

Write your code in the middle column and press Run code.

Checks on this task:

Check 1

One correct answer:

<style>
  input{min-height:44px;border:1px solid #c9c9cf;border-radius:8px;padding:0 12px;width:100%}
</style>
<form><label for="e">Email</label><input id="e" type="email"></form>

Track progress

0 of 56 tasks complete

Next task unlocks when every check passes.

← Previous

Next task (pass every check first)

Styling a form

Styling a form

Task

Why this works