HTML Forms
Forms collect information from visitors, such as a name, a phone number or a message.
The form Element
All form fields go inside a <form> element. The action attribute says where the data is sent, and method says how (get or post).
Example
<form action="/register" method="post">
...form fields...
</form>A form needs a server program (in PHP, Node.js, Python and so on) to actually receive and save the data. HTML only builds the form itself.
Text Fields and Labels
<input type="text"> makes a one-line text box. <label> gives it a visible name. Connect them by giving the input an id and the label a matching for.
Example
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" placeholder="e.g. Ayesha"><br><br>
<label for="city">City:</label><br>
<input type="text" id="city" name="city" value="Karachi">
</form>
</body>
</html>| Attribute | Purpose |
|---|---|
name | The name sent to the server with the value. Without it, the field is not sent |
id | Connects the field to its label |
value | A starting value |
placeholder | A grey hint shown while the field is empty |
Clicking a connected label puts the cursor in its field, and screen readers read the label aloud.
Radio Buttons and Checkboxes
Radio buttons let the visitor choose one option. All radios in a group share the same name. Checkboxes let them choose zero or more.
Example
<!DOCTYPE html>
<html>
<body>
<form>
<p>Preferred batch:</p>
<input type="radio" id="morning" name="batch" value="morning">
<label for="morning">Morning</label><br>
<input type="radio" id="evening" name="batch" value="evening" checked>
<label for="evening">Evening</label>
<p>Courses you are interested in:</p>
<input type="checkbox" id="html" name="course" value="html">
<label for="html">HTML</label><br>
<input type="checkbox" id="design" name="course" value="design">
<label for="design">Graphic Design</label>
</form>
</body>
</html>Dropdowns and Text Areas
<select> with <option> items makes a dropdown list. <textarea> makes a box for longer, multi-line text.
Example
<!DOCTYPE html>
<html>
<body>
<form>
<label for="course">Course:</label>
<select id="course" name="course">
<option value="web">Web Development</option>
<option value="seo">SEO</option>
<option value="ai">AI</option>
</select>
<br><br>
<label for="msg">Message:</label><br>
<textarea id="msg" name="msg" rows="4" cols="30">Please call me after 5 pm.</textarea>
</form>
</body>
</html>The Submit Button
A <button type="submit"> (or <input type="submit">) sends the form. Here is a complete contact form:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Contact Us</h2>
<form action="/contact" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="phone">Phone:</label><br>
<input type="tel" id="phone" name="phone"><br><br>
<button type="submit">Send</button>
</form>
</body>
</html>The required attribute stops the form from being sent while the name is empty. Try it.
get or post?
| Method | How data travels | Use for |
|---|---|---|
get | Added to the URL, like ?q=html | Searches and filters |
post | Hidden inside the request | Sign-ups, logins, messages |
Exercise
Exercise
Several radio buttons should let the user pick only one option. What must they share?