Loading…
Forms are how users send data to a website — logging in, signing up, searching, filling out a survey, placing an order. Almost every website you use daily has at least one form. In this exercise you will build your first form from scratch.
<form> ElementEvery form starts with the <form> tag. It is a container that groups all the input fields together:
<form>
<!-- input fields go here -->
</form>
The <input> element creates a field where users can type. It is self-closing (no closing tag):
<input type="text" name="username" placeholder="Enter your name">
| Attribute | Purpose |
|---|---|
type | What kind of input — text, email, password, etc. |
name | The field's name — used when the data is sent to a server |
placeholder | Ghost text that disappears when the user starts typing |
Every input must have a <label>. Labels tell users (and screen readers) what each field is for:
<label for="email">Email:</label>
<input type="email" id="email" name="email">
The for attribute on the label must match the id on the input. This connection lets users click the label to focus the input — very helpful on mobile!
<button type="submit">Send</button>
Create a contact form with:
<form> wrapper<label> with text "Name:" linked to an input with id="name"<input> with type="text", id="name", and name="name"<label> with text "Email:" linked to an input with id="email"<input> with type="email", id="email", and name="email"<button type="submit"> with text "Send"