HTML Input Types

« Prev Next »

The <input> element is an element used to create an interactive control in a form to accept data from the user. It is a self-closing tag, and has various attributes for different input types.

html-input-types

Few HTML Input Types

Text Input

Used for single-line text fields.

 

<input type="text" name="username" placeholder="Enter your name">

Password

Hides characters while typing.

 

<input type="password" name="pwd" placeholder="Enter password">

Email

Validates email format.

 

<input type="email" name="email" placeholder="name@example.com">

Number

Allows only numeric input (with optional min/max).

 

<input type="number" name="age" min="0" max="100">

Date

Presents a date picker.

 

<input type="date" name="dob">

Time

Used to select a time (like 09:00 AM).

 

<input type="time" name="appointment">

Checkbox

Used for multiple selections.

 

<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter

Radio

Used for single choice among options.

 

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Reset

Resets the form values to default.

 

<input type="reset" value="Reset">

Example

 <form action="/submit" method="post">
  <input type="text" name="fullname" placeholder="Full Name"><br>
  <input type="password" name="password" placeholder="Password"><br>
  <input type="email" name="email" placeholder="Email"><br>
  <input type="number" name="age" min="18" max="60"><br>
  <input type="date" name="dob"><br>
  <input type="file" name="resume"><br>
  <input type="color" name="favcolor"><br>
  <input type="range" name="volume" min="0" max="100"><br>
  <input type="tel" name="phone"><br>
  <input type="url" name="website"><br>
  <input type="search" name="search"><br>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="checkbox" name="subscribe" value="yes"> Subscribe<br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>
Run ›
Input Type Description
text Single-line input
password Masked input
email Email validation
number Numeric only
date Date selector
time Time selector
checkbox Multiple options
radio One option in a group
submit Submit form
reset Reset form
button Trigger actions
file Upload files
tel Phone input
search Search box
url Web address
range Slider input
color Color picker
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.