Web Development - HTML Forms
HTML Forms
HTML forms are used to collect user input. They are an essential part of most websites - for login pages, search bars, contact forms, and much more.
Key idea: When a form is submitted, the browser sends name=value pairs. Make sure each field you care about has a name attribute.
The <form> Element
A form is defined with the <form> element.
It can contain various types of input fields like text boxes, checkboxes, and buttons.
Example
Simple HTML form:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<input type="submit" value="Submit">
</form>
Try it Yourself »
The <label> tag defines a label for an input field, making it more accessible.
Accessibility: Match for on the label with the input's id so clicking the text focuses the field. Use real labels; placeholders are not labels.
Input Types
The <input> element has many types, such as text, password, checkbox, and submit:
Example
Common input types:
<form>
Name:<br>
<input type="text" name="name" required><br>
Password:<br>
<input type="password" name="password" required><br>
<input type="submit" value="Login">
</form>
Try it Yourself »
Built-in help: Types like email, number, and date give you basic validation and mobile-friendly keyboards for free.
Radio Buttons
Radio buttons let users select only one option from a group.
They share the same name attribute.
Example
Radio buttons:
<form>
<input type="radio" id="html" name="fav_language" value="HTML" checked>
<label for="html">HTML</label>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>
<input type="radio" id="js" name="fav_language" value="JavaScript">
<label for="js">JavaScript</label>
<input type="submit" value="Submit">
</form>
Try it Yourself »
One choice only: Radios with the same name act as a single group. Each option needs a meaningful value.
Checkboxes
Checkboxes allow users to select one or more options.
Example
Checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Many choices: Multiple checked boxes with the same name submit multiple values. (Servers often read this as a list.)
Select Dropdown
The <select> element creates a dropdown list.
Each option is defined with an <option> tag.
Example
Select dropdown:
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi" selected>Audi</option>
</select>
<input type="submit" value="Submit">
</form>
Try it Yourself »
Values vs text: The server receives the value of the selected option (not its visible text). If value is omitted, the text is used.
Text Area
The <textarea> element allows users to enter multiple lines of text.
Example
Textarea field:
<form>
<label for="message">Your message:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
<input type="submit" value="Send">
</form>
Try it Yourself »
Don't forget: Like other controls, <textarea> must have a name to submit its content.
Grouping Form Elements
You can group related inputs with the <fieldset> and <legend> elements.
Example
Form group:
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email">
<input type="submit" value="Submit">
</fieldset>
</form>
Try it Yourself »
Action and Method
The action attribute defines where to send the form data.
The method attribute defines how the data is sent (GET or POST).
Example
Form with action and method:
<form action="/submit_form.php" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required>
<input type="submit" value="Submit">
</form>
Try it Yourself »
GET vs POST: GET shows data in the URL (good for search), while POST sends data in the request body (use for logins and anything sensitive). Always use HTTPS.
Best Practices
- Always include
<label>elements for accessibility. - Use meaningful
nameattributes for form data. - Use
POSTfor sensitive data (like passwords). - Group related inputs with
<fieldset>.
Summary
<form>- defines a form.<input>- creates form fields.<label>- labels for inputs.<select>,<textarea>- advanced inputs.actionandmethod- control how data is sent.
Next, you'll learn about HTML Semantic Elements - tags like <header>, <footer>, and <article> that make your pages easier to understand.
