Introduction to Forms
Forms allow users to send data to a server or interact with your site. A basic form starts with the <form>
tag.
<form action="/submit" method="post">
...
</form>
action
→ Where the form data is sent.method
→ Usuallyget
orpost
.
Common Form Inputs
Forms use different <input>
types to collect data.
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<label>
<input type="checkbox" name="subscribe"> Subscribe to newsletter
</label>
<label>
<input type="radio" name="gender" value="male"> Male
</label>
<label>
<input type="radio" name="gender" value="female"> Female
</label>
Textarea & Select
<label for="message">Your Message:</label>
<textarea id="message" name="message"></textarea>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
Full Example Form
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Send</button>
</form>
Exercise
Create a sign-up form that includes:
- First Name, Last Name, Email, and Password fields.
- Gender selection with radio buttons.
- A dropdown for choosing a favorite course.
- A submit button.