HTML en CSS leren: form, input, label, button en de types van een veld

Formulieren

Wie een kapotte lamp wil laten herstellen, moet Walter nu nog bellen, en hij noteert alles op de achterkant van een bierkaartje. Een formulier op de website zou hem veel bierkaartjes besparen.

Een formulier

Een formulier staat in <form>. Elk veld is een <input>, of een <textarea> voor een langere tekst en een <select> met <option>s voor een keuzelijst. Elk veld krijgt een <label>, de tekst erboven: het for van het label is het id van het veld. Wie op het label tikt, komt in het veld, en een schermlezer leest voor wat er gevraagd wordt.

Met type kies je het soort veld: email voor een e-mailadres (een gsm toont dan een toetsenbord met @), tel voor een telefoonnummer, date en number. Een <button> verstuurt het formulier.

In deze cursus verstuurt een formulier nooit iets: je ziet alleen hoe het eruitziet.

index.html

1<link rel="stylesheet" href="style.css">2<main>3  <h1>Meld je toestel aan</h1>4  <form>5    <label for="naam">Naam</label>6    <input id="naam" type="text">7    <label for="email">E-mail</label>8    <input id="email" type="email">9    <label for="toestel">Toestel</label>10    <select id="toestel">11      <option>Fiets</option>12      <option>Lamp of broodrooster</option>13      <option>Kleding</option>14      <option>Computer</option>15    </select>16    <label for="probleem">Wat is er kapot?</label>17    <textarea id="probleem"></textarea>18    <button>Aanmelden</button>19  </form>20</main>

repaircafe.example

Probeer het zelf

Voeg na het e-mailadres een veld voor je telefoonnummer toe, met het label "Telefoon" en het id telefoon, en zet onderaan een knop "Aanmelden".

1<link rel="stylesheet" href="style.css">2<main>3  <form>4    <label for="naam">Naam</label>5    <input id="naam" type="text">6    <label for="email">E-mail</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.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {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/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {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.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {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

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Een formulier

Met type kies je het soort veld: email voor een e-mailadres (een gsm toont dan een toetsenbord met @), tel voor een telefoonnummer, date en number. Een <button> verstuurt het formulier.

In deze cursus verstuurt een formulier nooit iets: je ziet alleen hoe het eruitziet.

index.html

1<link rel="stylesheet" href="style.css">2<main>3  <h1>Meld je toestel aan</h1>4  <form>5    <label for="naam">Naam</label>6    <input id="naam" type="text">7    <label for="email">E-mail</label>8    <input id="email" type="email">9    <label for="toestel">Toestel</label>10    <select id="toestel">11      <option>Fiets</option>12      <option>Lamp of broodrooster</option>13      <option>Kleding</option>14      <option>Computer</option>15    </select>16    <label for="probleem">Wat is er kapot?</label>17    <textarea id="probleem"></textarea>18    <button>Aanmelden</button>19  </form>20</main>

repaircafe.example

Probeer het zelf

Voeg na het e-mailadres een veld voor je telefoonnummer toe, met het label "Telefoon" en het id telefoon, en zet onderaan een knop "Aanmelden".

1<link rel="stylesheet" href="style.css">2<main>3  <form>4    <label for="naam">Naam</label>5    <input id="naam" type="text">6    <label for="email">E-mail</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.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {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/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {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.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {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