Web Forms
Forms are the way websites collect
information from users — like signing up, searching, or sending feedback. In
HTML, forms are created using the <form> tag with various input types inside it.
1.
Form Tag
The <form> element wraps all your form controls and usually includes
an action (where to send data) and method (GET or POST):
<form
action="/submit" method="post">
<!-- form controls go here -->
</form>
2.
Text Input
Used to accept single-line text from
users.
<label
for="name">Name:</label>
<input
type="text" id="name" name="name" placeholder="Enter
your name">
- type="text":
Defines a text input box.
- id:
Connects the label to the input.
- name: The
name used when submitting form data.
- placeholder:
Text inside the box before typing.
3.
Radio Buttons
Allow users to select one option
from a group.
<p>Choose
your gender:</p>
<input
type="radio" id="male" name="gender" value="male">
<label
for="male">Male</label>
<input
type="radio" id="female" name="gender" value="female">
<label
for="female">Female</label>
- All radio buttons in a group must share the same name.
- Only one radio button with the same name can be
selected at a time.
4.
Checkboxes
Allow users to select multiple
options.
<p>Select
your hobbies:</p>
<input
type="checkbox" id="reading" name="hobby" value="reading">
<label
for="reading">Reading</label>
<input
type="checkbox" id="traveling" name="hobby" value="traveling">
<label
for="traveling">Traveling</label>
Users can check one or more options.
5.
Submit Button
Sends the form data to the server.
<input
type="submit" value="Submit">
Complete
Example Form
<!DOCTYPE
html>
<html>
<head>
<title>Simple HTML Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form action="/submit" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name"
name="name" placeholder="Your full name"><br><br>
<p>Gender:</p>
<input type="radio" id="male"
name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female"
name="gender" value="female">
<label for="female">Female</label><br><br>
<p>Hobbies:</p>
<input type="checkbox" id="reading"
name="hobby" value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="traveling"
name="hobby" value="traveling">
<label for="traveling">Traveling</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
How
to Test in XAMPP/WAMP
- Save this code as form-example.html in your htdocs or www folder.
- Open your browser and visit:
http://localhost/form-example.html
- You will see a simple form with inputs, radio buttons,
checkboxes, and a submit button.
Why
Use Labels?
- The <label> tag improves accessibility.
- Clicking the label text focuses or toggles the
corresponding input.
- Use the for attribute on <label> that matches the id of the input.