Platform under construction

HTML Forms

Intermediate

Form Elements

Learn Form Elements with practical examples for form structure, input behavior, validation, autocomplete, accessibility, backend safety and live practice.

<label>Name</label>
<input>
<textarea></textarea>
<select><option>Choice</option></select>

HTML forms

Form elements work together to create understandable input flows.

HTML forms are built from a small set of controls: input, textarea, select, option, button, label, fieldset, legend, datalist, output and more.

Each element has a job. Textarea is for longer text. Select is for a controlled list. Fieldset groups related controls. Legend names that group.

Choosing the right form element reduces custom code and gives users native browser behavior for free.

label

Connects human-readable text to a control.

input

The most flexible single-line control.

textarea

A multi-line text control for longer messages.

fieldset

Groups related controls under one legend.

Syntax and behavior

Use the element that matches the kind of answer you need.

Do not force every answer into a text input. Browsers already provide controls for options, choices, dates, files and long text.

Different controls for different answers

<form action="/signup" method="post">
  <label for="goal">Goal</label>
  <select id="goal" name="goal">
    <option value="regular">Regular course</option>
    <option value="fast">Fast track</option>
  </select>

  <label for="message">Extra information</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Request access</button>
</form>

Everything forced into text fields

<input name="goal" placeholder="Type regular or fast">
<input name="message" placeholder="Type your full message here">
<span onclick="send()">Send</span>

Rules that matter

Forms should guide users clearly and protect the backend carefully.

Strong form markup is readable, accessible, secure by design and easy to connect to real server-side validation.

Use textarea for longer text

A message box should not be a cramped single-line input.

Use select for controlled choices

If only a few valid options exist, do not ask users to guess the text.

Use fieldset for related options

Radio buttons and checkbox groups become clearer with fieldset and legend.

Use button for actions

Buttons are keyboard-friendly and have native behavior.

Keep labels visible

Visible labels help users scan, correct and complete the form.

Avoid over-custom controls

Native controls are often more robust than hand-built replacements.

Production thinking

Forms connect frontend quality with backend responsibility.

Why does this matter?

This matters because the right element makes the form easier before any styling or JavaScript is added.

Accessibility

Fieldset and legend are especially useful for grouped radio buttons and checkboxes because they announce the question before the options.

Production note

Design systems should style native controls carefully without destroying focus states, labels or keyboard behavior.

SEO note

Useful form labels and supporting text improve page quality and help users understand the purpose of a service page.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Add a fieldset with two radio buttons.
Change the textarea rows value and see how the control changes.
Add one extra option to the select element.

Practice assignment

Do this before moving to the next lesson.

Build a form that uses at least three different form elements.
Explain why each element fits the answer you want.
Test the form using only the keyboard.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(760px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1;
}

p {
  color: #cfd8e6;
  line-height: 1.7;
}

form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

label {
  font-weight: 900;
}

input, select, textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font: inherit;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: 3px solid rgba(140, 255, 193, 0.55);
  outline-offset: 3px;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
}

Live preview

Self-check

Before you continue, prove that you own this lesson.