• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Input Types

← Previous Next →

HTML provides different <input> types to accept specific kinds of data from users. Each type modifies how the input behaves and how it is validated by the browser.

🔹 Commonly Used Input Types

Input Type Description
text Single-line text input
password Masked input for passwords
email Validates email format
number Numeric input with increment/decrement
tel Telephone number input
url Validates URL format
search Search field
date Date picker
time Time picker
datetime-local Date and time picker (local time)
month Select month and year
week Select week and year
file Upload file(s)
checkbox Toggle on/off (multiple selections)
radio Choose one option from many
range Slider input
color Color picker
submit Submit button
reset Reset form fields
button Generic button for custom scripts
hidden Hidden field (not visible to users)

💻 Example: All Input Types

<form>
  Text: <input type="text"><br>
  Password: <input type="password"><br>
  Email: <input type="email"><br>
  Number: <input type="number"><br>
  Telephone: <input type="tel"><br>
  URL: <input type="url"><br>
  Search: <input type="search"><br>
  Date: <input type="date"><br>
  Time: <input type="time"><br>
  DateTime: <input type="datetime-local"><br>
  Month: <input type="month"><br>
  Week: <input type="week"><br>
  File: <input type="file"><br>
  Checkbox: <input type="checkbox"> Agree<br>
  Radio: <input type="radio" name="gender"> Male
         <input type="radio" name="gender"> Female<br>
  Range: <input type="range" min="0" max="100"><br>
  Color: <input type="color"><br>
  <input type="submit">
</form>

Practice Questions

Q1. Create a form with text, email, and password fields.

Q2. Add a file upload option with <input type="file">.

Q3. Create radio buttons for gender selection.

Q4. Use a range slider to select volume between 0 to 100.

Q5. Use a color picker to select a background color.

Q6. Include a date picker for selecting DOB.

Q7. Add a time and datetime-local input for scheduling.

Q8. Use tel input with a placeholder for format guidance.

Q9. Add a reset button that clears the form.

Q10. Create a hidden input to pass a user ID value.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top