More Form Controls

After this lesson, you can arrange forms with textarea, select, buttons, and fieldset groups named by legend.

BEGIN WITH A QUESTION

Understanding begins with a question.

Long suggestions are difficult to write in a single-line input. Choosing one topic from a list should not require typing it again. Suitable controls reduce the user’s effort.

Arrange forms with textarea, select, buttons, and fieldset groups named by legend.

UNDERSTAND THE CONCEPT

Long text and fixed choices

Textarea holds multiline messages; write its initial content between its tags, rather than in a value attribute. Select contains option elements for a list of choices. An option’s value defines the data; its text defines the visible label.

Name the group

Fieldset groups related controls. Legend names the group, which is particularly useful for a question with multiple radios. Each control still needs a label; legend does not replace individual labels.

Specify the button type

Button type="submit" initiates form submission, while type="button" has no automatic submission action. Write type explicitly inside a form to make your intent clear. This demonstration has no server; an ordinary button suits a structural example.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<form>
  <fieldset>
    <legend>Reading feedback</legend>
    <label for="topik">Topic</label>
    <select id="topik" name="topik">
      <option value="sains">Science</option>
      <option value="cerita">Stories</option>
    </select>
    <label for="pesan">Your suggestion</label>
    <textarea id="pesan" name="pesan" rows="4"></textarea>
  </fieldset>
  <button type="button">Example demo button</button>
</form>

BROWSER RESULT

Fieldset creates the group; legend names it; select and textarea keep their own labels.

COMMON MISTAKES

<textarea value="Halo"></textarea>

Write initial textarea content between its tags: <textarea>Hello</textarea>.

TRY TOGETHER

Practice clarifies understanding.

Complete the element that names a form group.

<fieldset><>Reading preferences</legend></fieldset>

Show a hint

This element is a child of fieldset, usually its first.

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

WRITE · OBSERVE · UNDERSTAND

Design a suggestion box

Create a fieldset with legend ‘Garden Suggestions’, a textarea named pesan, a select named topik with at least two options with different values, labels for both controls, and a type button button. Put everything inside form.

<h1>Suggestion Box — Demo</h1>
<form>
</form>

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

Textarea handles long text; select and option handle choices.
Fieldset and legend explain the group.
Write button types explicitly.

FormAccessibility

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 °Accessibility °

Library: Three languages behind one page ↗

Next lesson →