Text Inputs and Labels
The <input> tag is the most used tag in forms. It creates a field where the user can type. There are several types — let's look at the most common ones.
type="text"
The basic text field. For names, usernames, anything short and plain.
<input type="text" name="username" placeholder="Enter your name">
Attributes worth knowing:
- type="text" — makes it a plain text box
- name="username" — the key that identifies this field when the form is submitted. Your Python code uses this to find the value.
- placeholder="..." — light grey hint text that disappears when the user starts typing
type="email"
Works like a text field, but the browser checks that what was typed looks like a valid email address before allowing submit.
<input type="email" name="email" placeholder="you@example.com">
On mobile, it also brings up a keyboard with @ easily accessible.
type="password"
Hides the characters as the user types — shows dots or asterisks instead.
<input type="password" name="password" placeholder="Enter your password">
Labels — <label>
A <label> describes what an input is for. Always use one for each input.
<label for="username">Your name</label>
<input type="text" id="username" name="username">
The for attribute on the label must match the id on the input. That connection means clicking the label text focuses the input — which is great for usability.
Notice two separate attributes on the input: id (used by the label to find it) and name (used by Python to receive the value).
Putting it together
A login form with proper labels:
<form>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="you@example.com">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Your password">
<button type="submit">Log In</button>
</form>
Challenge
Build a signup form in portfolio.html with three fields:
- Full name (text)
- Email (email)
- Password (password)
Give each input a <label> with a matching for and id. Add a submit button that says "Create Account". Open it in your browser — does it look like a real signup form?