Content updated
By the end, you can…
- Combine appropriate controls into a small form.
- Explain browser validation and what submission still needs.
One idea at a time
The earlier forms lesson introduced labels, inputs, and buttons. Now combine them into a small sign-up form. Start with the questions you actually need to ask. A longer form is not automatically better; unnecessary questions add work and can ask for information you do not need.
Use select when a person chooses from a short set of options, textarea for a longer answer, and radio buttons for a single choice among visible options. A fieldset groups related controls and its legend states the question. Every individual control still needs its own label.
required is a boolean attribute: its presence enables the requirement, and removing it disables it. Writing required="false" does not turn it off. It asks the browser to reject an empty control during submission. Input types such as email add format checks. minlength and maxlength can constrain text length where appropriate. Explain requirements visibly rather than leaving the user to discover them only after a failed attempt.
Walk through an example
<form>
<label for="email">Email address (required)</label>
<input id="email" name="email" type="email" required>
<label for="topic">Favorite topic</label>
<select id="topic" name="topic"><option value="plants">Plants</option><option value="cooking">Cooking</option></select>
<label for="message">Message (optional, up to 200 characters)</label>
<textarea id="message" name="message" maxlength="200"></textarea>
<button type="submit">Review details</button>
</form>Each label points to an id; each submitted value has a name. The dropdown submits its selected option's value, which can differ from the words the user sees. The message is optional and has a visible length limit. This example shows the form structure. The interactive preview supplies a small script to stop real submission and show what was entered. That script is not included in this HTML fragment. With action and method omitted, a normal valid submission targets the current page using GET; it can navigate and put field values in the URL. Use the preview for submission tests and pretend values only.
See it happen: try a small change
Submit an empty form, then use learner@example.com and choose a topic. The supplied demo script displays the field names and values locally.
Code to notice
<form>
<label for="email">Email address (required)</label>
<input id="email" name="email" type="email" required>
<label for="topic">Favorite topic</label>
<select id="topic" name="topic">
<option value="plants">Plants</option>
<option value="cooking">Cooking</option>
</select>
<label for="message">Message (optional, up to 200 characters)</label>
<textarea id="message" name="message" maxlength="200">
</textarea>
<button type="submit">Review details</button>
</form>
<p>Demo only: nothing is sent or saved.</p>
<pre id="review" role="status">
</pre>Live result
What changed: The browser checks the email before the demo review runs. The review uses field names, not label text. No network submission occurs.
A browser check is not a working account system
A successful browser check only means the values meet the browser's constraints. It does not confirm that an email address exists, that a message was delivered, or that the server accepted anything. Production services need their own validation and clear success or error responses.
The action attribute names the URL handling a form. GET puts named fields into a query string, the part of an address after ?, such as ?topic=plants. A server is the software that receives and responds to a web request. POST sends fields in the request body, which is common for changes or messages. POST is not encryption; HTTPS protects data in transit. Do not use real passwords or personal information in these exercises.
A reset button restores the initial values and can discard someone’s work unexpectedly. Leave it out unless there is a clear need. A button with type=button does not submit; use type=submit when you intend to request submission and validation. File uploads need additional setup and are outside this beginner exercise.
Try it in your browser
Use the embedded preview for submit experiments: its supplied preview code stops navigation and displays the entered values. In your own HTML file, build the controls and inspect their labels and keyboard order without submitting real details. Copying the HTML does not copy that script: a valid submit can reload the current URL with form fields in it. You do not need to write code to handle submission in this HTML course.
A common wrong turn
Do not copy an action such as submit.php and expect a service to appear. A missing destination produces a failed request, not a saved registration. Keep the exercise local and label its preview as a demonstration.
Change one thing
Submit the preview empty, then with an invalid email, then with a valid-looking address. Change the selected topic and inspect the displayed field names and values.
Your turn: build a club form
Build a local club form with a required email, a two-option topic dropdown, an optional message, and a submit button. Explain what the browser can check and what would require a service.
Try this in your own HTML file, then open the page in a browser. There is no separate checked practice for this task yet.
- Choose clear visible labels and unique ids.
- Test required and email-format checks in the lesson preview using pretend values.
- In your own file, inspect the structure and keyboard order. Do not claim that the form sends or saves data without a working handler.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.