The form Element
The <form> element wraps a group of related input controls. The action attribute specifies where the form data is sent, and method specifies how (GET or POST).
Basic Form
<form action="/submit" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
<button type="submit">Submit</button>
</form>Key form Attributes
| Attribute | Purpose |
|---|---|
| action | URL the form data is submitted to |
| method | "get" appends data to the URL, "post" sends it in the request body |
| name | Identifies each field’s data when submitted |
Labels
The <label> element describes an input field. Associating a label with its input using a matching for/id pair makes the input clickable via its label and is essential for accessibility.
Label and Input
<label for="email">Email Address</label>
<input type="email" id="email" name="email" />Common Form Controls
Beyond text inputs, forms can include textareas for multi-line text, select dropdowns for choosing from a list, and buttons for submitting or resetting.
Textarea and Select
<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>
<label for="country">Country</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="in">India</option>
<option value="uk">United Kingdom</option>
</select>Grouping Fields with fieldset
<fieldset> groups related controls together, and <legend> provides a caption for the group — useful for radio button groups or sections of a longer form.
fieldset and legend
<fieldset>
<legend>Preferred Contact Method</legend>
<label><input type="radio" name="contact" value="email" /> Email</label>
<label><input type="radio" name="contact" value="phone" /> Phone</label>
</fieldset>Never Skip Labels
An <input> without an associated <label> is a common accessibility failure — screen reader users won’t know what the field is for. A placeholder is not a substitute for a label.
Best Practice
Always pair every input with a <label>, use the correct input type for the data being collected, and group related fields with <fieldset> for longer forms.