Inputs & Field Values

After this lesson, you can choose type, name, value, radio, and checkbox according to the information requested.

BEGIN WITH A QUESTION

Understanding begins with a question.

Email, participant counts, time preferences, and consent are different kinds of information. One text box type is not always the most helpful choice.

Choose type, name, value, radio, and checkbox according to the information requested.

UNDERSTAND THE CONCEPT

Type adapts the control

Use text for general text, email for email addresses, and number for quantities used in calculations. Do not use number for phone numbers or postal codes: leading zeros and formatting are not numeric quantities. Input types can affect device keyboards and browser validation.

Id, name, and value have different jobs

Id identifies the element and connects its label. Name is the data key when the form is serialized. Value is its data value, such as name="sesi" value="pagi". Controls without name are generally excluded from ordinary form submission.

One choice or several?

Radio inputs sharing a name form a group with one selected option. Give each radio a distinct value and unique id. Checkbox suits independent choices; unchecked checkboxes are excluded from ordinary form data. The boolean checked attribute can set an initial choice.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<form>
  <label for="jumlah">Participant count</label>
  <input id="jumlah" name="jumlah" type="number" value="1">
  <p>Choose a session:</p>
  <label><input type="radio" name="sesi" value="pagi"> Morning</label>
  <label><input type="radio" name="sesi" value="sore"> Afternoon</label>
  <label><input type="checkbox" name="kabar" value="ya"> Receive updates</label>
</form>

BROWSER RESULT

The radios share name sesi, but have different values. The kabar checkbox is independent. Every choice still has a label.

COMMON MISTAKES

<input type="radio" name="pagi" value="pagi">
<input type="radio" name="sore" value="sore">

Different names create separate radio groups that can be selected simultaneously. Use the same name for a single session choice.

TRY TOGETHER

Practice clarifies understanding.

01 Which attribute must match on the ‘Morning’ and ‘Afternoon’ radios to allow only one choice?

idnamevalue

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

WRITE · OBSERVE · UNDERSTAND

Choose a learning session

Create a form with an email input (name email), a number input (name peserta), two radios named sesi with values pagi and sore, and a checkbox named pengingat with value ya. Every control needs a label.

<h1>Session Preferences — Demo</h1>
<form>
  <!-- Match control types to the data -->
</form>

index.htmlHTMLLn 1, Col 14 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.

Type adapts the field to its data.
Name is a data key; id identifies the element.
Radios in one group share a name; checkboxes are independent choices.

FormAttribute

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

Connect with other concepts

HTML form °Form label °HTML attribute °

Library: Three languages behind one page ↗

Next lesson →