01 | A CONVERSATION WITH THE USER

A robotics club needs to know who wants to join, which workshop they prefer and what they hope to build. A form turns those questions into controls people can use.

HTML provides the structure and native controls. A working application also needs somewhere to process the submitted data. A form alone does not save information to a database or send an email.

<form action="/club-signup" method="post">
  <p>
    <label for="student-name">Student name</label>
    <input type="text" id="student-name" name="student_name">
  </p>
  <p>
    <label for="student-email">Email address</label>
    <input type="email" id="student-email" name="email">
  </p>
  <button type="submit">Send application</button>
</form>

Here, action names the destination and method specifies how data is sent. /club-signup is an example endpoint that your server would need to implement. It is not a working service provided by this lesson.

02 | LABELS, IDS AND NAMES

<label for="student-name">Student name</label>
<input type="text" id="student-name" name="student_name">

These attributes have different jobs:

• for on the label matches the control’s id. This associates the label with its input. Clicking the label normally focuses the input.
• id identifies this element in the page. Each id must be unique.
• name supplies the field’s key when its data is submitted.

If Alex enters a name, the submitted entry could be student_name=Alex. The id does not replace name in submitted data. A control without name is usually omitted from the form’s entries.

A placeholder is a temporary hint inside a field, not a replacement for a visible label. It disappears as the user types.

03 | CHOOSE A SUITABLE INPUT TYPE

<label for="contact-email">Email address</label>
<input type="email" id="contact-email" name="email">

<label for="team-size">Team size</label>
<input type="number" id="team-size" name="team_size"
       min="1" max="6" step="1">

<label for="meeting-date">Preferred meeting date</label>
<input type="date" id="meeting-date" name="meeting_date">

type="text" suits a short line of text. email can provide email-oriented input behaviour and basic format checking. number suits quantities, while date provides a date control whose appearance varies by browser.

Use text for identifiers such as a postcode or student code. They are not quantities to calculate with and may contain letters or leading zeros.

min, max and step describe allowed numeric values. required can make a supported control compulsory. The next lesson explores validation in detail. Browser checks do not verify that an email address exists and do not replace server-side validation.

04 | ONE CHOICE OR SEVERAL?

<fieldset>
  <legend>Choose one workshop</legend>
  <label>
    <input type="radio" name="workshop" value="build">
    Robot building
  </label>
  <label>
    <input type="radio" name="workshop" value="code">
    Python coding
  </label>
</fieldset>

<fieldset>
  <legend>Interests: choose any that apply</legend>
  <label>
    <input type="checkbox" name="interest" value="sensors">
    Sensors
  </label>
  <label>
    <input type="checkbox" name="interest" value="design">
    3D design
  </label>
</fieldset>

Radio buttons in the same group share a name, so only one can be selected. Give each choice a different value. Checkboxes support independent selections, so the user can choose several interests or none.

A label can wrap its input, as in these examples, without using for. If you add ids, keep them unique even when the names are shared.

fieldset groups related controls, and legend names the group. Only checked radio buttons and checkboxes contribute entries. If both interests are checked, interest appears twice with different values. The server must handle those repeated entries appropriately.

05 | MENUS AND LONGER RESPONSES

<label for="experience">Coding experience</label>
<select id="experience" name="experience">
  <option value="">Choose an option</option>
  <option value="new">I am new to coding</option>
  <option value="some">I have tried coding</option>
  <option value="confident">I code regularly</option>
</select>

<label for="project-idea">What would you like to build?</label>
<textarea id="project-idea" name="project_idea" rows="4"></textarea>

A select offers a set of options. The visible wording can be friendly while value supplies a short code for processing. “I am new to coding” submits new in this example.

A textarea supports multiple lines and needs a closing tag. Initial text goes between its opening and closing tags. By contrast, an input is a void element and does not have a closing tag.

Keep instructions short and labels descriptive. Choose a control that matches the kind of answer you need.

06 | BUTTONS AND SUBMISSION

<button type="submit">Send application</button>
<button type="button">Show workshop details</button>

A submit button starts form submission, subject to the browser’s validation checks. A button with type="button" has no submission behaviour by default; an action such as revealing details needs programming.

A button inside a form commonly defaults to submit when type is omitted. Write the type explicitly to avoid accidental submissions.

type="reset" restores controls to their initial values, which are not necessarily empty. Reset buttons can discard work accidentally, so include them only when they serve a clear purpose.

Do not nest a form inside another form. Put separate forms alongside one another.

07 | GET AND POST: WHERE DOES THE DATA GO?

With GET, form data is normally added to the destination URL as a query string. This suits many searches and filters. With POST, data is sent in the request body. This is commonly used for actions that create or change data.

<form action="/search" method="get">
  <label for="search-topic">Search lessons</label>
  <input type="search" id="search-topic" name="q">
  <button type="submit">Search</button>
</form>
<!-- A search for binary can produce /search?q=binary -->

POST is not encryption. HTTPS protects data in transit. Servers must still validate input and apply appropriate security controls. A password input masks characters on screen but does not make the whole application secure.

Disabled controls and unnamed controls are generally omitted. Unchecked checkboxes are omitted too. The form’s submitted entries are not simply a copy of every visible thing on the page.

08 | TRY IT: INSPECT WHAT WOULD BE SENT

Use fictional details. This demonstration stays in this page: JavaScript prevents submission and shows the form entries below. It does not send or save them.

Try selecting both interests, then only one. Notice the repeated name and the missing unchecked choice. Click a text label, try keyboard navigation and submit with a required field empty.

The inspection behaviour is supplied by JavaScript. In a real application, the action endpoint receives and processes the data. You will learn more about scripts and servers later.