Loading...

HTML Form Elements

A form is a toolbox. Different questions need different controls. This session maps the common pieces; later sessions zoom into inputs, textarea, and select.

Direct answer

Use label + controls such as input, textarea, select, and button. Group related controls with fieldset and a legend. Every meaningful control should have an accessible name (usually via label).

📊 Common form pieces

Element Role
label Names a control for humans and assistive tech
input Many single-line / toggle controls (see Input Types)
textarea Multi-line text
select / option Choose from a list
button Actions (submit/reset/button)
fieldset / legend Group related controls with a title

Mixed controls sketch

html
HTML Code 
<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>

Try it

  1. Build a fieldset with a legend
  2. Add one textarea and one select, each with a label
  3. Add a submit button
  4. Confirm keyboard users can reach each control

Easy mistakes

  • Controls without labels
  • Using a plain div title instead of legend inside fieldset
  • Putting submit buttons outside the form by accident

Summary

  • Match the control to the question type
  • Always label controls
  • fieldset/legend group related fields
  • Deeper details follow in the next lessons

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
5
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial