Forms Basics - User Input
Documentation for Forms Basics - User Input.
Forms Basics - User Input
What are Forms?
Forms allow users to enter and submit data to a server.
Definition: The
<form>element creates an interactive section for collecting user input. Forms contain input elements like text fields, checkboxes, radio buttons, and submit buttons. Data is sent to a server for processing when the form is submitted.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<button type="submit">Submit</button>
</form>Form Element Attributes
| Attribute | Purpose | Example |
|---|---|---|
action | URL to send data to | action="/api/submit" |
method | HTTP method | method="POST" |
enctype | Encoding type | enctype="multipart/form-data" |
autocomplete | Enable/disable autocomplete | autocomplete="off" |
novalidate | Disable browser validation | novalidate |
target | Where to display response | target="_blank" |
Method Types
| Method | Use Case | Data Location |
|---|---|---|
GET | Retrieving data, search forms | URL query string |
POST | Submitting data, forms with sensitive info | Request body |
Encoding Types (enctype)
| enctype | Use Case |
|---|---|
application/x-www-form-urlencoded | Default, most forms |
multipart/form-data | File uploads |
text/plain | Debugging (rarely used) |
Input Types
Text Inputs
<input type="text" placeholder="Enter text" />
<input type="email" placeholder="email@example.com" />
<input type="password" placeholder="Password" />
<input type="tel" placeholder="Phone number" />
<input type="url" placeholder="https://example.com" />
<input type="search" placeholder="Search..." />Number Inputs
<input type="number" min="0" max="100" step="1" />
<input type="range" min="0" max="100" value="50" />Date/Time Inputs
<input type="date" />
<!-- YYYY-MM-DD -->
<input type="time" />
<!-- HH:MM -->
<input type="datetime-local" />
<!-- Date and time -->
<input type="month" />
<!-- YYYY-MM -->
<input type="week" />
<!-- Year and week -->Selection Inputs
<!-- Checkbox -->
<input type="checkbox" id="agree" name="agree" />
<label for="agree">I agree</label>
<!-- Radio buttons (same name = group) -->
<input type="radio" id="yes" name="answer" value="yes" />
<label for="yes">Yes</label>
<input type="radio" id="no" name="answer" value="no" />
<label for="no">No</label>
<!-- File upload -->
<input type="file" accept=".pdf,.doc" />
<input type="file" accept="image/*" multiple />
<!-- Color picker -->
<input type="color" value="#ff0000" />Other Inputs
<input type="hidden" name="userId" value="123" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="button" value="Click Me" />
<input type="image" src="submit.png" alt="Submit" />Input Types Summary
| Type | Purpose | Mobile Keyboard |
|---|---|---|
text | General text | Standard |
email | Email addresses | @ key visible |
password | Hidden text entry | Standard |
tel | Phone numbers | Numeric |
url | URLs | .com key visible |
number | Numeric values | Numeric |
search | Search queries | Standard + clear |
date | Date picker | Date picker UI |
time | Time picker | Time picker UI |
datetime-local | Date and time | DateTime picker |
checkbox | Multiple selections | - |
radio | Single selection | - |
file | File uploads | - |
color | Color picker | Color picker UI |
range | Slider input | - |
Common Input Attributes
| Attribute | Purpose | Example |
|---|---|---|
name | Field identifier for server | name="username" |
id | Unique identifier for label | id="username" |
value | Default/current value | value="John" |
placeholder | Hint text | placeholder="Enter name" |
required | Must be filled | required |
disabled | Cannot be modified | disabled |
readonly | Display only | readonly |
autofocus | Focus on page load | autofocus |
autocomplete | Browser autofill | autocomplete="email" |
maxlength | Maximum characters | maxlength="50" |
minlength | Minimum characters | minlength="8" |
min/max | Value range | min="0" max="100" |
step | Value increment | step="0.01" |
pattern | Regex validation | pattern="[A-Za-z]+" |
multiple | Allow multiple values | multiple |
accept | File types allowed | accept="image/*" |
Labels
Labels associate text with form controls for accessibility.
<!-- Method 1: for/id association (recommended) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<!-- Method 2: Wrapping -->
<label>
Email:
<input type="email" name="email" />
</label>
<!-- Placeholder is NOT a replacement for labels -->
<!-- ❌ Bad: No visible label -->
<input type="email" placeholder="Email" />
<!-- ✅ Good: Label + placeholder -->
<label for="email">Email</label>
<input type="email" id="email" placeholder="john@example.com" />Textarea
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50">
Default text here
</textarea>
<!-- With placeholder -->
<textarea placeholder="Enter your message..." rows="5"></textarea>Select Dropdown
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca" selected>Canada</option>
</select>
<!-- With option groups -->
<select name="car">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<!-- Multiple selection -->
<select name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
</select>Datalist
<label for="browser">Browser:</label>
<input list="browsers" id="browser" name="browser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Safari"></option>
<option value="Edge"></option>
</datalist>Buttons
<!-- Submit button (default in form) -->
<button type="submit">Submit</button>
<!-- Reset button -->
<button type="reset">Reset Form</button>
<!-- Regular button (no default action) -->
<button type="button">Click Me</button>
<!-- Button with icon -->
<button type="submit"><img src="send.svg" alt="" /> Send</button>
<!-- Disabled button -->
<button type="submit" disabled>Submit</button>| Button Type | Behavior |
|---|---|
submit | Submits the form (default) |
reset | Resets form to initial values |
button | No default behavior (for JS) |
Complete Form Example
<form action="/register" method="POST">
<div>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
</div>
<div>
<label for="password">Password:</label>
<input
type="password"
id="password"
name="password"
minlength="8"
required
/>
</div>
<div>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" />
</div>
<div>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select...</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
</div>
<div>
<input type="checkbox" id="terms" name="terms" required />
<label for="terms">I agree to the terms</label>
</div>
<button type="submit">Register</button>
</form>Interview Questions & Answers
Q1: What's the difference between GET and POST methods?
GET appends form data to the URL as query parameters (?name=value), making it visible in the address bar and browser history. It's limited in length and should only be used for non-sensitive data retrieval like search queries. POST sends data in the request body, hidden from the URL. Use POST for sensitive data (passwords), large amounts of data, file uploads, or any operation that changes server state. GET is cacheable and bookmarkable; POST is not.
Q2: Why are labels important for form accessibility?
Labels associate text with form controls, enabling: clicking the label to focus/toggle the input, screen readers announcing what each field is for, and better usability on touch devices with larger tap targets. Always use the for attribute matching the input's id, or wrap the input inside the label. Placeholders are not substitutes for labels - they disappear when typing and aren't always read by screen readers. Every input should have a visible, associated label.
Q3: What is the difference between button and input type="submit"?
Both can submit forms, but <button> is more flexible: it can contain HTML content like icons and styled text, while <input type="submit"> only displays its value attribute as plain text. Button's default type is "submit" when inside a form. Always specify type on buttons to prevent accidental form submission. Use <button type="button"> for JavaScript actions that shouldn't submit.
Q4: What's the difference between disabled and readonly?
Both prevent user editing, but disabled inputs are grayed out, cannot receive focus, and their values are NOT submitted with the form. Readonly inputs appear normal (though not editable), can receive focus, and their values ARE submitted. Use disabled for inputs that shouldn't be submitted or interacted with. Use readonly when you want to show a value that will be submitted but shouldn't be edited.
Q5: When should you use datalist vs select?
Use <select> when users must choose from a fixed set of predefined options - it enforces selection from the list. Use <datalist> when you want to suggest options but also allow users to enter custom values - it's a hybrid of text input and dropdown. Datalist provides autocomplete suggestions while preserving text input flexibility. Select is better for strict choices; datalist is better for searchable suggestions.