Forms & Labels

After this lesson, you can create a form with labels connected to controls through for and id.

BEGIN WITH A QUESTION

Understanding begins with a question.

An empty box appears without explanation. Should you enter a name, email, or age? A label removes the guesswork and remains visible after typing begins.

Create a form with labels connected to controls through for and id.

UNDERSTAND THE CONCEPT

Form groups fields

Form wraps controls that collect data. Input creates a simple field. Label gives that field a readable name. Controls should make sense without relying solely on color or position.

Connect for to id

In <label for="nama">Name</label>, for must match the target input’s id. Clicking the label focuses the associated control. Unique ids keep the relationship unambiguous. Another valid approach is placing the input directly inside its label.

Placeholder does not replace a label

A placeholder is an example hint that disappears when someone types. A label is still needed. All forms in this course are demonstrations; the preview prevents data submission and there is no backend.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<form>
  <label for="nama">Nickname</label>
  <input id="nama" name="nama" type="text" placeholder="Example: Rani">
  <p>Demonstration form; data is not sent.</p>
  <button type="button">Example button</button>
</form>

BROWSER RESULT

For and id both use nama. Name becomes the form data key; the next lesson explains it.

COMMON MISTAKES

<label for="nama">Name</label>
<input id="email" type="text">

The label points to nama, but the input has id email. Match the values to connect the label to the control.

TRY TOGETHER

Practice clarifies understanding.

Connect the label to input id="peserta".

<label for="">Participant name</label>
<input id="peserta" type="text">

Show a hint

Copy the input’s id value.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

A club introduction form

Inside form, create a text input named nama and an email input named email. Give each a unique id and a connected label. Explain that this is a demo form and use a type="button" button.

<h1>Meet the Club</h1>
<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
</form>

index.htmlHTMLLn 1, Col 15 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Labels explain fields and must connect to their controls.
For matches id, rather than name.
A placeholder is only an example; the demo form does not send data.

FormAccessibility

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Form label °HTML form °Accessibility °

Library: Three languages behind one page ↗

Next lesson →