Learn HTML and CSS: form, input, label, button and the types of a field

Forms

Anyone who wants a broken lamp fixed still has to phone Walter, and he writes everything down on the back of a beer mat. A form on the website would save him a lot of beer mats.

A form

A form goes in <form>. Every field is an <input>, or a <textarea> for a longer text and a <select> with <option>s for a drop-down list. Every field gets a <label>, the text above it: the label's for is the field's id. Whoever taps the label lands in the field, and a screen reader reads out what's being asked.

With type you choose the kind of field: email for an email address (a phone then shows a keyboard with @), tel for a phone number, date and number. A <button> sends the form.

In this course a form never sends anything: you only see how it looks.

index.html

1<link rel="stylesheet" href="style.css">2<main>3  <h1>Sign up your device</h1>4  <form>5    <label for="name">Name</label>6    <input id="name" type="text">7    <label for="email">Email</label>8    <input id="email" type="email">9    <label for="device">Device</label>10    <select id="device">11      <option>Bike</option>12      <option>Lamp or toaster</option>13      <option>Clothes</option>14      <option>Computer</option>15    </select>16    <label for="problem">What's broken?</label>17    <textarea id="problem"></textarea>18    <button>Sign up</button>19  </form>20</main>

repaircafe.example

Try it yourself

After the email address, add a field for your phone number, with the label "Phone" and the id phone, and put a "Sign up" button at the bottom.

1<link rel="stylesheet" href="style.css">2<main>3  <form>4    <label for="name">Name</label>5    <input id="name" type="text">6    <label for="email">Email</label>7    <input id="email" type="email">8  </form>9</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

A form

With type you choose the kind of field: email for an email address (a phone then shows a keyboard with @), tel for a phone number, date and number. A <button> sends the form.

In this course a form never sends anything: you only see how it looks.

index.html

1<link rel="stylesheet" href="style.css">2<main>3  <h1>Sign up your device</h1>4  <form>5    <label for="name">Name</label>6    <input id="name" type="text">7    <label for="email">Email</label>8    <input id="email" type="email">9    <label for="device">Device</label>10    <select id="device">11      <option>Bike</option>12      <option>Lamp or toaster</option>13      <option>Clothes</option>14      <option>Computer</option>15    </select>16    <label for="problem">What's broken?</label>17    <textarea id="problem"></textarea>18    <button>Sign up</button>19  </form>20</main>

repaircafe.example

Try it yourself

After the email address, add a field for your phone number, with the label "Phone" and the id phone, and put a "Sign up" button at the bottom.

1<link rel="stylesheet" href="style.css">2<main>3  <form>4    <label for="name">Name</label>5    <input id="name" type="text">6    <label for="email">Email</label>7    <input id="email" type="email">8  </form>9</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example