Web Development Zero to Advanced — Class 16 of 120
HTML Input Types, Labels & Buttons
In the previous class, you learned the basic structure of HTML forms.
Now you will learn how different HTML input types collect different kinds of information from users.
A website may need users to enter:
• Name
• Email address
• Password
• Phone number
• Age
• Date
• Time
• Search keywords
• Website URL
• File
• Color
• Quantity
Users may also need to:
• Select one option
• Select multiple options
• Submit a form
• Reset a form
• Click an action button
HTML provides different input types for these purposes.
Example:
<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">
In this class, you will learn:
• type="text"
• type="email"
• type="password"
• type="number"
• type="tel"
• type="url"
• type="search"
• type="date"
• type="time"
• type="datetime-local"
• type="month"
• type="week"
• type="color"
• type="range"
• type="file"
• type="checkbox"
• type="radio"
• type="hidden"
• Submit and reset controls
• <label>
• <button>
• Common input attributes
• Accessibility basics
• Practical form examples
What Is an Input Type?
The HTML <input> element can behave differently depending on its type attribute.
Basic syntax:
<input type="text">
Here:
input = HTML element
type = Attribute
text = Attribute value
Changing the type changes the purpose and behavior of the control.
Example:
<input type="email">
This creates an email-oriented input.
Example:
<input type="password">
This creates a password input.
Example:
<input type="date">
This creates a date input.
1. Text Input
The most basic input type is:
<input type="text">
It is used for short, single-line text.
Example:
<label for="name">
Full Name:
</label>
<input
type="text"
id="name"
name="name"
>
Possible user input:
John Smith
Common uses include:
• Name
• Company name
• Address line
• Product name
• Job title
2. Email Input
Use:
<input type="email">
Example:
<label for="email">
Email Address:
</label>
<input
type="email"
id="email"
name="email"
required
>
Possible input:
john@example.com
Browsers can apply built-in email-related validation and may provide a more suitable keyboard on mobile devices.
3. Password Input
Use:
<input type="password">
Example:
<label for="password">
Password:
</label>
<input
type="password"
id="password"
name="password"
required
>
The browser normally obscures the characters entered by the user.
For example, the user may type:
MyPassword123
but visually see something similar to:
•••••••••••••
Important:
type="password" only obscures the visual display.
It does not:
• Encrypt the password
• Hash the password
• Securely store the password
Real password security requires proper server-side handling and HTTPS.
4. Number Input
Use:
<input type="number">
Example:
<label for="quantity">
Quantity:
</label>
<input
type="number"
id="quantity"
name="quantity"
>
This is useful for numeric values such as:
• Quantity
• Age
• Number of products
• Number of attendees
You can also specify limits:
<input
type="number"
id="quantity"
name="quantity"
min="1"
max="10"
>
Here:
min="1" → Minimum allowed value
max="10" → Maximum allowed value
5. Telephone Input
Use:
<input type="tel">
Example:
<label for="phone">
Phone Number:
</label>
<input
type="tel"
id="phone"
name="phone"
>
This is intended for telephone numbers.
On supported mobile devices, the browser may show a telephone-oriented keyboard.
Why Not Use type="number" for Phone Numbers?
A phone number is an identifier, not a quantity used for mathematical calculation.
Phone numbers can contain:
• +
• Spaces
• Parentheses
• Hyphens
• Leading zeros
Therefore:
<input type="tel">
is generally more appropriate than:
<input type="number">
6. URL Input
Use:
<input type="url">
Example:
<label for="website">
Website:
</label>
<input
type="url"
id="website"
name="website"
>
Possible input:
https://example.com
This input is useful for:
• Portfolio URLs
• Company websites
• Social profile URLs
• Project links
7. Search Input
Use:
<input type="search">
Example:
<label for="search">
Search:
</label>
<input
type="search"
id="search"
name="q"
>
This is semantically appropriate for search queries.
Example form:
<form action="/search" method="get">
<label for="search">
Search Products:
</label>
<input
type="search"
id="search"
name="q"
>
<button type="submit">
Search
</button>
</form>
8. Date Input
Use:
<input type="date">
Example:
<label for="birthday">
Date of Birth:
</label>
<input
type="date"
id="birthday"
name="birthday"
>
Supported browsers usually provide a date-selection interface.
Date Minimum and Maximum
You can limit the allowed date range.
Example:
<input
type="date"
id="appointment"
name="appointment"
min="2026-01-01"
max="2026-12-31"
>
This limits the date to the specified range.
9. Time Input
Use:
<input type="time">
Example:
<label for="meeting-time">
Meeting Time:
</label>
<input
type="time"
id="meeting-time"
name="meeting_time"
>
This is useful for:
• Appointment time
• Meeting time
• Delivery time
• Class schedule
10. Date and Time Input
HTML provides:
<input type="datetime-local">
Example:
<label for="meeting">
Meeting Date and Time:
</label>
<input
type="datetime-local"
id="meeting"
name="meeting"
>
This collects a local date and time without a time-zone value.
11. Month Input
Use:
<input type="month">
Example:
<label for="billing-month">
Billing Month:
</label>
<input
type="month"
id="billing-month"
name="billing_month"
>
This is useful when you need a year and month rather than a complete date.
12. Week Input
Use:
<input type="week">
Example:
<label for="work-week">
Select Week:
</label>
<input
type="week"
id="work-week"
name="work_week"
>
Browser support and presentation can vary, so test this control for your target users.
13. Color Input
Use:
<input type="color">
Example:
<label for="brand-color">
Select Brand Color:
</label>
<input
type="color"
id="brand-color"
name="brand_color"
>
Supported browsers provide a color-selection interface.
This can be useful for:
• Theme settings
• Website customization
• Design applications
• Brand settings
14. Range Input
Use:
<input type="range">
It creates a slider-style control.
Example:
<label for="volume">
Volume:
</label>
<input
type="range"
id="volume"
name="volume"
min="0"
max="100"
value="50"
>
Here:
Minimum = 0
Maximum = 100
Initial value = 50
15. File Input
Use:
<input type="file">
Example:
<label for="resume">
Upload Resume:
</label>
<input
type="file"
id="resume"
name="resume"
>
The user can choose a file from their device.
Common uses include:
• Profile photo upload
• CV/resume upload
• Product image upload
• Document upload
• Attachment upload
File Upload Form
When a form actually uploads files using normal form submission, it commonly needs:
enctype="multipart/form-data"
Example:
<form
action="/upload"
method="post"
enctype="multipart/form-data"
>
<label for="document">
Upload Document:
</label>
<input
type="file"
id="document"
name="document"
>
<button type="submit">
Upload
</button>
</form>
Without appropriate server-side processing, HTML alone will not store the uploaded file.
Accept Attribute
You can provide a hint about acceptable file types.
Example:
<input
type="file"
accept="image/*"
>
For PDF:
<input
type="file"
accept=".pdf,application/pdf"
>
Important:
The accept attribute is not a security control.
The server must still validate uploaded files.
16. Checkbox Input
Checkboxes are useful when users can select zero, one, or multiple independent options.
Example:
<input
type="checkbox"
id="html"
name="skills"
value="html"
>
<label for="html">
HTML
</label>
Multiple checkboxes:
<input
type="checkbox"
id="html"
name="skills"
value="html"
>
<label for="html">
HTML
</label>
<input
type="checkbox"
id="css"
name="skills"
value="css"
>
<label for="css">
CSS
</label>
<input
type="checkbox"
id="javascript"
name="skills"
value="javascript"
>
<label for="javascript">
JavaScript
</label>
A user may select:
HTML
and:
CSS
at the same time.
Checked Attribute
A checkbox can initially be selected using:
checked
Example:
<input
type="checkbox"
id="newsletter"
name="newsletter"
checked
>
<label for="newsletter">
Subscribe to newsletter
</label>
For optional marketing choices, consider whether preselection is appropriate for your legal and UX requirements.
17. Radio Button
Radio buttons are useful when the user should select one option from a group.
Example:
<input
type="radio"
id="basic"
name="plan"
value="basic"
>
<label for="basic">
Basic
</label>
<input
type="radio"
id="premium"
name="plan"
value="premium"
>
<label for="premium">
Premium
</label>
Both controls use:
name="plan"
This groups them together.
Why Must Radio Buttons Share the Same Name?
Consider:
<input
type="radio"
name="payment"
value="cash"
>
<input
type="radio"
name="payment"
value="card"
>
Because both use:
payment
the browser treats them as one radio-button group.
The user can select only one option from that group.
Checkbox vs Radio Button
Checkbox:
<input type="checkbox">
Use when multiple independent selections may be allowed.
Radio:
<input type="radio">
Use when one choice should be selected from a group.
Simple rule:
Checkbox → Zero or more independent choices
Radio → One choice from a group
18. Hidden Input
A hidden input is not displayed as a normal visible form control.
Example:
<input
type="hidden"
name="product_id"
value="125"
>
This can submit additional data with the form.
For example:
<form action="/order" method="post">
<input
type="hidden"
name="product_id"
value="125"
>
<button type="submit">
Order Product
</button>
</form>
Important:
Hidden does not mean secure.
Users can inspect and modify hidden form values.
Never trust hidden input values without server-side validation.
19. Submit Input
A submit control can be created using:
<input
type="submit"
value="Submit"
>
Example:
<form>
<input
type="text"
name="name"
>
<input
type="submit"
value="Send"
>
</form>
20. Reset Input
Use:
<input
type="reset"
value="Reset"
>
This resets the form controls to their initial values.
Be careful with reset controls because users may accidentally remove information they have entered.
The <button> Element
Buttons can also be created using:
<button>
Example:
<button type="submit">
Submit
</button>
Important button types include:
submit
reset
button
Submit Button
<button type="submit">
Submit
</button>
This submits the form.
Reset Button
<button type="reset">
Reset
</button>
This resets the form controls to their initial values.
Generic Button
<button type="button">
Click Me
</button>
This does not submit the form by itself.
It is commonly used with JavaScript.
Why Explicitly Set Button Type?
Inside a form, a <button> defaults to submit behavior unless another type is specified.
Therefore, if a button should not submit the form, write:
<button type="button">
Show Password
</button>
instead of simply:
<button>
Show Password
</button>
Understanding the value Attribute
The value attribute represents the value associated with a control.
Example:
<input
type="text"
name="country"
value="Bangladesh"
>
The field initially contains:
Bangladesh
For radio buttons:
<input
type="radio"
name="plan"
value="premium"
>
If selected, the submitted value for plan is:
premium
The required Attribute
Example:
<input
type="email"
name="email"
required
>
The browser requires a valid value before ordinary form submission.
The readonly Attribute
Example:
<input
type="text"
name="username"
value="john123"
readonly
>
The user cannot normally edit the value, but a readonly control can still participate in form submission.
The disabled Attribute
Example:
<input
type="text"
name="account"
value="Premium"
disabled
>
A disabled control cannot normally be interacted with and is not submitted with the form.
readonly vs disabled
readonly:
• User cannot edit the value
• Control can still be submitted
disabled:
• User cannot normally interact with the control
• Control is not submitted
minlength Attribute
Example:
<input
type="text"
name="username"
minlength="4"
>
This requires a minimum text length during applicable browser validation.
maxlength Attribute
Example:
<input
type="text"
name="username"
maxlength="20"
>
This limits the maximum number of characters accepted by applicable text inputs.
min and max
Commonly used with numeric and date-related inputs.
Example:
<input
type="number"
name="age"
min="18"
max="100"
>
step Attribute
The step attribute controls valid increments for compatible inputs.
Example:
<input
type="number"
name="price"
min="0"
step="0.01"
>
This is useful for values that may contain decimal increments.
autocomplete Attribute
Browsers may help users fill forms using previously stored information.
Example:
<input
type="email"
id="email"
name="email"
autocomplete="email"
>
Another example:
<input
type="text"
id="name"
name="name"
autocomplete="name"
>
Using appropriate autocomplete tokens can improve usability.
Practical Example — Registration Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Registration Form</title>
</head>
<body>
<h1>Create Account</h1>
<form
action="/register"
method="post"
>
<p>
<label for="name">
Full Name:
</label>
<input
type="text"
id="name"
name="name"
autocomplete="name"
required
>
</p>
<p>
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
>
</p>
<p>
<label for="phone">
Phone:
</label>
<input
type="tel"
id="phone"
name="phone"
autocomplete="tel"
>
</p>
<p>
<label for="password">
Password:
</label>
<input
type="password"
id="password"
name="password"
minlength="8"
autocomplete="new-password"
required
>
</p>
<button type="submit">
Create Account
</button>
</form>
</body>
</html>
Expected Output
The browser will display:
Create Account
Full Name:
[Text Field]
Email:
[Email Field]
Phone:
[Telephone Field]
Password:
[Password Field]
[Create Account Button]
Practical Example — Computer Order Form
<form
action="/order"
method="post"
>
<h2>Computer Order</h2>
<p>
<label for="customer-name">
Customer Name:
</label>
<input
type="text"
id="customer-name"
name="customer_name"
required
>
</p>
<p>
<label for="email">
Email:
</label>
<input
type="email"
id="email"
name="email"
required
>
</p>
<p>
<label for="quantity">
Quantity:
</label>
<input
type="number"
id="quantity"
name="quantity"
min="1"
max="10"
value="1"
>
</p>
<p>
Payment Method:
</p>
<input
type="radio"
id="cash"
name="payment"
value="cash"
required
>
<label for="cash">
Cash
</label>
<input
type="radio"
id="card"
name="payment"
value="card"
>
<label for="card">
Card
</label>
<p>
<input
type="checkbox"
id="terms"
name="terms"
required
>
<label for="terms">
I agree to the terms and conditions.
</label>
</p>
<button type="submit">
Place Order
</button>
</form>
Practical Example — Job Application Form
<form
action="/apply"
method="post"
enctype="multipart/form-data"
>
<h2>Job Application</h2>
<p>
<label for="applicant-name">
Full Name:
</label>
<input
type="text"
id="applicant-name"
name="name"
required
>
</p>
<p>
<label for="applicant-email">
Email:
</label>
<input
type="email"
id="applicant-email"
name="email"
required
>
</p>
<p>
<label for="portfolio">
Portfolio URL:
</label>
<input
type="url"
id="portfolio"
name="portfolio"
>
</p>
<p>
<label for="resume">
Upload Resume:
</label>
<input
type="file"
id="resume"
name="resume"
accept=".pdf,application/pdf"
required
>
</p>
<button type="submit">
Submit Application
</button>
</form>
Practical Example — Website Project Inquiry
<form
action="/project-inquiry"
method="post"
>
<h2>Start Your Website Project</h2>
<p>
<label for="client-name">
Full Name:
</label>
<input
type="text"
id="client-name"
name="client_name"
required
>
</p>
<p>
<label for="client-email">
Email:
</label>
<input
type="email"
id="client-email"
name="client_email"
required
>
</p>
<p>
<label for="client-phone">
Phone:
</label>
<input
type="tel"
id="client-phone"
name="client_phone"
>
</p>
<p>
<label for="website">
Current Website:
</label>
<input
type="url"
id="website"
name="website"
>
</p>
<p>
<label for="budget">
Estimated Budget:
</label>
<input
type="number"
id="budget"
name="budget"
min="0"
>
</p>
<p>
<label for="deadline">
Expected Deadline:
</label>
<input
type="date"
id="deadline"
name="deadline"
>
</p>
<button type="submit">
Request a Quote
</button>
</form>
Input Type Selection Matters
Choose an input type based on the meaning of the data.
Name:
<input type="text">
Email:
<input type="email">
Password:
<input type="password">
Phone:
<input type="tel">
Website:
<input type="url">
Quantity:
<input type="number">
Date:
<input type="date">
Search:
<input type="search">
Choosing appropriate input types can improve:
• Usability
• Mobile keyboard behavior
• Browser validation
• Accessibility
• Semantic meaning
Input Validation Is Not Security
Suppose you write:
<input
type="number"
min="1"
max="10"
>
or:
<input
type="email"
required
>
These browser-side rules are useful.
However, they do not make submitted data trustworthy.
A user or program can bypass client-side restrictions.
Therefore:
Always validate important input on the server.
File Upload Security
File uploads require special attention.
Do not trust:
• File name
• File extension
• Browser-provided MIME type
• accept attribute
A production server should independently validate uploaded files and apply appropriate security controls.
The HTML:
accept="image/*"
helps guide the user interface.
It is not a security boundary.
Labels and Accessibility
Good:
<label for="email">
Email Address:
</label>
<input
type="email"
id="email"
name="email"
>
Avoid relying only on:
<input
type="email"
placeholder="Email"
>
A visible label remains useful even after the user begins entering information.
Radio Group Accessibility
For related controls, HTML provides <fieldset> and <legend>.
Example:
<fieldset>
<legend>
Select Payment Method
</legend>
<input
type="radio"
id="cash"
name="payment"
value="cash"
>
<label for="cash">
Cash
</label>
<input
type="radio"
id="card"
name="payment"
value="card"
>
<label for="card">
Card
</label>
</fieldset>
<fieldset> groups related controls.
<legend> provides a label for the group.
Common Beginner Mistakes
1. Using Text for Every Input
Avoid:
<input type="text" name="email">
when an email input is more appropriate.
Prefer:
<input type="email" name="email">
2. Using Number for Phone
Avoid:
<input type="number" name="phone">
Prefer:
<input type="tel" name="phone">
3. Radio Buttons Have Different Names
Wrong:
<input
type="radio"
name="cash"
value="cash"
>
<input
type="radio"
name="card"
value="card"
>
These are not one exclusive group.
Better:
<input
type="radio"
name="payment"
value="cash"
>
<input
type="radio"
name="payment"
value="card"
>
4. Forgetting Values on Radio Buttons
Avoid:
<input
type="radio"
name="plan"
>
Prefer:
<input
type="radio"
name="plan"
value="premium"
>
5. Thinking Hidden Input Is Secure
This:
<input
type="hidden"
name="price"
value="100"
>
does not prevent a user from changing the value before submission.
Important values must be verified on the server.
6. Forgetting File Upload Encoding
For normal HTML file uploads, remember:
enctype="multipart/form-data"
7. Trusting accept
This:
accept=".pdf"
does not guarantee that the uploaded content is safe or truly a PDF.
Server-side validation is still required.
8. Missing Labels
Avoid unlabeled controls whenever a proper visible label is appropriate.
9. Duplicate IDs
Wrong:
<input id="email">
<input id="email">
IDs should be unique.
10. Confusing readonly and disabled
Remember:
Readonly → Cannot edit, normally submitted
Disabled → Cannot interact, not submitted
New & Difficult Words
HTML = HyperText Markup Language
Input = Form control that receives user data
Input Type = Type of data or interaction expected from an input
Text = Single-line textual input
Email = Email-address input
Password = Input that visually obscures entered characters
Tel = Telephone input
URL = Uniform Resource Locator
Search = Search-query input
Number = Numeric input
Date = Calendar-date input
Time = Time input
Datetime-local = Local date-and-time input without time-zone information
Month = Month and year input
Week = Week-based input
Color = Color selection input
Range = Slider-style numeric input
File = File selection input
Checkbox = Independent on/off selection
Radio Button = Single choice within a named group
Hidden Input = Non-visible form control
Value = Value associated with a form control
Min = Minimum allowed value
Max = Maximum allowed value
Step = Allowed increment interval
Minlength = Minimum allowed text length
Maxlength = Maximum allowed text length
Readonly = Value can be viewed but not normally edited
Disabled = Control is unavailable and not submitted
Autocomplete = Browser-assisted form completion
Multipart/Form-Data = Form encoding used for normal file uploads
Fieldset = Element used to group related form controls
Legend = Caption for a fieldset
Validation = Checking input against expected rules
MIME Type = Media type describing the format of data
Important Notes
Remember these common input types:
<input type="text">
Text
<input type="email">
<input type="password">
Password
<input type="tel">
Telephone
<input type="url">
URL
<input type="number">
Number
<input type="date">
Date
<input type="time">
Time
<input type="file">
File
<input type="checkbox">
Checkbox
<input type="radio">
Radio Button
Most importantly:
Choose the input type according to the meaning of the data.
Use labels for form controls.
Use the same name for radio buttons in one group.
Do not treat client-side validation as security.
Validate submitted data on the server.
Practice Questions
- What is the purpose of the
typeattribute? - Which input type is appropriate for a person’s name?
- Which input type should be used for email?
- Which input type visually hides password characters?
- Why is
telusually better thannumberfor telephone numbers? - Which input type accepts URLs?
- Which input type is appropriate for search?
- Which input type provides date-oriented input?
- What is
datetime-local? - What does
type="range"create? - Which input type lets users select a file?
- What does
acceptdo? - Why is
acceptnot a security control? - What is the difference between checkbox and radio?
- Why should radio buttons in one group share a
name? - What is a hidden input?
- Is a hidden input secure?
- What is the difference between
readonlyanddisabled? - What does
minlengthdo? - What does
maxlengthdo? - What does
mindo? - What does
maxdo? - What does
stepdo? - What is
multipart/form-dataused for? - Why is server-side validation required?
Assignment
Create a folder named:
class-16
Inside it create:
index.html
Create a complete IT Company Client Registration & Project Request Form.
The form must contain:
- Full Name — Text
- Email — Email
- Password — Password
- Phone Number — Telephone
- Company Website — URL
- Number of Required Pages — Number
- Project Deadline — Date
- Meeting Time — Time
- Preferred Brand Color — Color
- Budget Preference — Range
- Project Document — File
- Services Required — Checkboxes
Use:
• Website Development
• SEO
• E-commerce
• Maintenance
- Project Type — Radio Buttons
Use:
• Business Website
• E-commerce Website
• Portfolio Website
- Hidden Client Source
Example:
<input
type="hidden"
name="source"
value="website"
>
- Terms and Conditions Checkbox
- Submit Button
- Reset Button
For the file upload, use:
enctype="multipart/form-data"
Your form should begin with:
<form
action="/project-request"
method="post"
enctype="multipart/form-data"
>
Use appropriate:
id
name
value
required
min
max
minlength
maxlength
autocomplete
accept
<label>
<fieldset>
<legend>
After completing the form:
- Open it in your browser.
- Test every input.
- Try submitting without completing required fields.
- Test an invalid email.
- Test minimum and maximum number values.
- Test radio buttons.
- Select multiple checkboxes.
- Test file selection.
- Inspect the form using Developer Tools.
Quiz
- Which input type is used for email addresses?
Answer: email.
- Which input type visually obscures entered characters?
Answer: password.
- Which input type is appropriate for telephone numbers?
Answer: tel.
- Which input type is used for website addresses?
Answer: url.
- Which input type creates a numeric control?
Answer: number.
- Which input type provides date input?
Answer: date.
- Which input type creates a slider?
Answer: range.
- Which input type allows file selection?
Answer: file.
- Which control allows multiple independent selections?
Answer: Checkbox.
- Which control is normally used for one selection from a group?
Answer: Radio button.
- What must radio buttons in the same group normally share?
Answer: The same name.
- Is a hidden input secure?
Answer: No.
- What form encoding is normally required for file uploads?
Answer: multipart/form-data.
- Does
accept=".pdf"guarantee that a file is safe?
Answer: No.
- Which button type submits a form?
Answer: submit.
Interview Questions
Q: What is the HTML input element?
Answer: The <input> element creates a form control whose behavior depends primarily on its type attribute.
Q: What is the difference between type="text" and type="email"?
Answer: Both accept textual input, but email provides email-specific semantics, browser validation behavior, and potentially a more suitable mobile keyboard.
Q: Why should phone numbers use type="tel" instead of type="number"?
Answer: Telephone numbers are identifiers rather than mathematical quantities and may contain characters such as plus signs, spaces, or leading zeros.
Q: What is the difference between checkbox and radio inputs?
Answer: Checkboxes represent independent selections and can allow multiple choices. Radio buttons with the same name represent a group where only one option can be selected.
Q: Why do radio buttons need the same name?
Answer: Sharing the same name tells the browser that the radio controls belong to one mutually exclusive group.
Q: What is a hidden input?
Answer: A hidden input is a non-visible form control whose value can be included in form submission. It should never be considered secure because users can inspect or modify it.
Q: What is the difference between readonly and disabled?
Answer: A readonly control cannot normally be edited but can still be submitted. A disabled control cannot normally be interacted with and is not submitted.
Q: Why is multipart/form-data required for file uploads?
Answer: It provides the form encoding needed to transmit file content and other form fields in a normal HTML file-upload submission.
Q: Is HTML form validation enough for security?
Answer: No. Client-side validation improves usability but can be bypassed. The server must independently validate all untrusted input.
Class Summary
In Class 16, you learned the major HTML input types and how to choose the appropriate control for different kinds of data.
You learned:
text → Text
email → Email Address
password → Password
tel → Telephone Number
url → Website URL
search → Search Query
number → Numeric Value
date → Date
time → Time
datetime-local → Local Date and Time
month → Month and Year
week → Week
color → Color
range → Slider
file → File Selection
checkbox → Independent Selection
radio → One Choice from a Group
hidden → Non-visible Submitted Value
You also learned:
value
required
min
max
step
minlength
maxlength
readonly
disabled
autocomplete
accept
multipart/form-data
<fieldset>
<legend>
The most important rule is:
Use the correct input type for the data you expect.
For example:
<label for="email">
Email Address:
</label>
<input
type="email"
id="email"
name="email"
required
>
And remember:
Browser validation improves usability.
Server-side validation protects application logic and data integrity.
Next Class:
Class 17 — HTML Form Validation & Advanced Form Attributes