Form Basics & Input Types
Forms are how users send data to servers — login, registration, search, checkout, and contact. HTML provides 20+ input types, each with built-in browser validation, mobile keyboard optimization, and accessibility features.
The Form Element
The <form> element wraps all form controls and defines how data is submitted. The action attribute specifies the server URL; method specifies GET (for search, data in URL) or POST (for login/signup, data in body). Every input must have a name attribute — it becomes the key in the submitted data. Without name, the input's value is not sent to the server.
Forms collect user input — each input type serves a different purpose
HTML5 Input Types
- text — Single-line text. The default input type
- email — Validates email format. Shows @ keyboard on mobile
- password — Masks characters. Browsers offer to save passwords
- number — Numeric input with up/down spinners. min, max, step attributes
- tel — Phone number. Shows numeric keyboard on mobile. No built-in validation
- url — Validates URL format. Shows .com keyboard on mobile
- date — Native date picker. No need for JavaScript date libraries
- color — Color picker widget. Returns hex color value
- range — Slider control. min, max, step attributes
- file — File upload. accept attribute restricts file types. multiple for multiple files
- search — Search field with clear button. Semantically indicates search functionality
- hidden — Invisible field. Sends data without showing it to users (CSRF tokens, IDs)
Warning
Every <input> MUST have a name attribute, or its value will NOT be sent to the server when the form is submitted. This is the #1 beginner mistake with forms. The name becomes the key in the submitted data: <input name='email'> sends {email: 'user@example.com'} to the server.
Form Code Example
<!-- Contact form with HTML5 validation -->
<form action="/api/contact" method="POST">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required minlength="2" maxlength="100"
placeholder="John Doe">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required
placeholder="john@example.com">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{10}" placeholder="9876543210">
<label for="subject">Subject</label>
<select id="subject" name="subject" required>
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="billing">Billing Question</option>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required
minlength="10" maxlength="1000"
placeholder="Tell us how we can help..."></textarea>
<button type="submit">Send Message</button>
</form>Try It Yourself: Contact Form
Quick Quiz: Form Basics
Key Takeaways
- Forms are how users send data to servers — login, registration, search, checkout, and contact.
- text — Single-line text. The default input type
- email — Validates email format. Shows @ keyboard on mobile
- password — Masks characters. Browsers offer to save passwords