HTML · The document layer
How do HTML forms and inputs work together?
Short answer
A form groups controls that submit together. Give each control a name, use the correct method and action, wrap related controls in fieldset and legend, and rely on a submit button rather than click handlers.
A form is a container for controls and a submission target. The browser serialises named controls into the request body or query string, which means an unnamed control contributes nothing.
<form action="/apply" method="post">
<fieldset>
<legend>Contact details</legend>
<label for="email">Email</label>
<input id="email" name="email" type="email" required />
<label for="role">Role</label>
<select id="role" name="role">
<option value="frontend">Frontend</option>
<option value="backend">Backend</option>
</select>
</fieldset>
<button type="submit">Apply</button>
</form>The core pieces
- action is the URL that receives the submission
- method is usually get for searches and post for changes
- name is the key used when the form data is serialised
- fieldset groups related controls and legend names the group
- A submit button triggers validation and submission natively
Using a real form gives you Enter-to-submit, browser validation and a working experience before JavaScript loads. JavaScript can enhance the form, but the native path should still work.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What happens to inputs without a name?
- 2When should a form use get instead of post?
- 3Why use fieldset and legend?
- 4What is the default button type inside a form?
Say it in the interview
A form groups controls and submits them to an action using a method. Every control that should be submitted needs a name, because the browser uses that as the key. I group related fields with fieldset and legend, and I let a real submit button trigger the built-in validation and submission. JavaScript can enhance the experience, but the native form should still work without it.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.