Capturing user data with forms
Forms are how users send data to your site – sign-ups, logins, contact messages, search boxes, checkout details. This page walks through the HTML tags that build a form and the input types you will use most often.
The anatomy of an HTML form
A form is wrapped in a <form> tag. Inside it, input fields, checkboxes, buttons, and the rest collect data from the user. When the form is submitted, that data is sent to a server for processing.
Basic form structure
Minimal example:
<form action="/submit-data" method="post">
<!-- Input fields go here -->
<input type="submit" value="Submit">
</form>action: the URL that receives the form data on submit.method: the HTTP method – usuallygetorpost.
Different types of input elements
HTML gives you a fair range of input types for different kinds of data.
Text fields
<input type="text"> is the basic single-line text input.
<label for="name">Name:</label>
<input type="text" id="name" name="name">Password fields
<input type="password"> hides what the user types.
<label for="password">Password:</label>
<input type="password" id="password" name="password">Radio buttons
Radio buttons let the user pick one option from a set.
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>Checkboxes
Checkboxes allow multiple selections.
<label><input type="checkbox" name="interest" value="coding"> Coding</label>
<label><input type="checkbox" name="interest" value="music"> Music</label>Dropdown lists
Use <select> with nested <option> tags for a drop-down list.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<!-- More options -->
</select>Textarea
For longer text – comments, messages – use <textarea>.
<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea>Submit button
Something has to send the form:
<input type="submit" value="Submit">HTML5 form extras
HTML5 added a few attributes that save you from writing validation JavaScript for common cases.
Placeholder attribute
placeholder shows hint text inside an empty field.
<input type="text" placeholder="Enter your name">Required attribute
required stops submission until the field is filled in.
<input type="text" name="email" required>Other HTML5 input types
Types like email, tel, number, and date add basic validation and show a sensible keyboard on mobile.
<input type="email" name="email">Styling forms with CSS
A styled form is easier to use, not just nicer to look at.
Basic styling
A starting point for form elements:
input[type=text], select, textarea {
width: 100%;
padding: 12px;
margin: 6px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}Responsive forms
On narrow screens, a full-width submit button is often easier to tap:
@media screen and (max-width: 600px) {
input[type=submit] {
width: 100%;
}
}Handling form data
HTML builds and styles the form; something on the server has to receive and process the data. That is usually PHP, Node.js, Python, or similar.
A simple server-side script
Rough idea of what happens after submit – a Flask example in Python:
# Python Flask example
from flask import Flask, request
app = Flask(__name__)
@app.route('/submit-data', methods=['POST'])
def handle_data():
name = request.form['name']
# Process data
return 'Form submitted'
if __name__ == '__main__':
app.run()Accessibility in forms
Every input needs a label. Screen readers use the label to tell the user what each field is for – a placeholder is not a substitute.
Forms are one of the main ways users interact with a site. Get the markup, labels, and styling right, wire up server-side handling, and you have something that works for real people – not just in your browser.