Input Type Elements in HTML

Back to: HTML Tutorials

Input Type Elements in HTML with Examples

In this article, I am going to discuss Input Type Elements in HTML with Examples. Please read our previous article where we discussed Form Elements in HTML with Examples. At the end of this article, you will learn everything about HTML Input Type Elements with Examples.

HTML Input Type Elements

In Forms, there are various types of input elements that are useful in collecting different sorts of data from the users. Let us discuss all the input elements one by one with examples.

Input Type Text

Text is the most commonly used input type; it is used to take input from the users in the form of text. For example, name, address, etc. In the below example we have created two input fields that take name and profession from the user as an input.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:aliceblue;
}

form{
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
padding:30px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border:none;
padding:10px;
outline:none;
border-radius:5px;}

</style>
<body>

<h2>Input Type Text </h2>

<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="profession">Profession:</label><br>
  <input type="text" id="profession" name="profession"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Password

Input type=”password” is used to get input from users in the form of a password. For example, if we want to implement sign-up and login functionality then password input type can be useful for authentication and security purposes. In the below example we have created a simple login form that takes username and password from the user as input.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:aliceblue;
}

form{
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
padding:35px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border:none;
padding:10px;
outline:none;
border-radius:5px;
background-color:#ffffff;}

</style>
<body>

<h2>Input Type Password </h2>

<form action="demo.html">
  <label for="uname">Username:</label><br>
  <input type="text" id="uname" name="uname"><br><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Login">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Submit

Input type=”submit” is used to submit all the data that users have entered for processing. In the below example we have created one form which takes some basic information from users like name, age, gender, country, etc.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:lightyellow;
}

form{
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

padding:35px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border:none;
padding:10px;
outline:none;
border-radius:5px;
background-color:#ffffff;}

</style>
<body>

<h2>Input Type Submit </h2>

<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age"><br><br>
   <label for="gender">Gender:</label><br>
  <input type="text" id="gender" name="gender"><br><br>
   <label for="country">Country:</label><br>
  <input type="text" id="country" name="country"><br><br>
  
  <input type="submit" value="Submit">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Reset

The input type=”reset” is used to reset all the input values to default. In the below example we have created one button called reset when a user clicks on the reset button it will change all input values to default.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:lightyellow;
}

form{
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
padding:35px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border:none;
padding:10px;
outline:none;
border-radius:5px;
background-color:#ffffff;}

</style>
<body>

<h2>Input Type Submit </h2>

<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age"><br><br>
   <label for="gender">Gender:</label><br>
  <input type="text" id="gender" name="gender"><br><br>
   <label for="country">Country:</label><br>
  <input type="text" id="country" name="country"><br><br>
  
  <input type="submit" value="Submit">
   <input type="reset">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Radio

In Forms input type=”radio” is used to define a radio input. In radio inputs, the user can submit only one value at a time. In the below example we have created a radio input that lets users select and submit their favorite color.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
padding:35px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border:none;
padding:10px;
outline:none;
border-radius:5px;
background-color:#ffffff;}

</style>
<body>

<h2>Input Type Reset </h2>

<form action="demo.html">
   <p>Select your favorite color</p>
   
  <input type="radio" id="blue" name="fav_color">
  <label for="blue">Blue</label><br>
  
   <input type="radio" id="red" name="fav_color">
  <label for="red">Red</label><br>
  
   <input type="radio" id="yellow" name="fav_color">
  <label for="yellow">Yellow</label><br>
  
   <input type="radio" id="orange" name="fav_color">
  <label for="">Orange</label><br>
  
   <input type="radio" id="pink" name="fav_color">
  <label for="pink">Pink</label><br><br>
  
  <input type="submit" value="Submit">
   <input type="reset">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Checkbox

In Forms <input type=”checkbox”> is used to define a checkbox. The radio and checkbox inputs both have similar functionality; the only difference is that in Checkbox users can submit multiple values at a time and in radio users can submit only one value. In the below example we have created a checkbox input that lets users select and submit their favorite colors.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
padding:35px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border:none;
padding:10px;
outline:none;
border-radius:5px;
background-color:#ffffff;}

</style>
<body>

<h2>Input Type Checkbox </h2>

<form action="demo.html">
   <p>Select your favorite color</p>
   
  <input type="checkbox" id="blue" name="fav_color">
  <label for="blue">Blue</label><br>
  
   <input type="checkbox" id="red" name="fav_color">
  <label for="red">Red</label><br>
  
   <input type="checkbox" id="yellow" name="fav_color">
  <label for="yellow">Yellow</label><br>
  
   <input type="checkbox" id="orange" name="fav_color">
  <label for="">Orange</label><br>
  
   <input type="checkbox" id="pink" name="fav_color">
  <label for="pink">Pink</label><br><br>
  
  <input type="submit" value="Submit">
   <input type="reset">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Color

Input type=”color” is used to take color as input from a user. When a user clicks on the color a pop-up box will open and the user can select and submit their favorite colors. In the below example we have created a form that takes color as input from the user.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:tomato;
padding:35px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:3px;
background-color:#ffffff;
}

</style>
<body>

<h2>Input Type Color </h2>

<form action="demo.html">
  <label for="favcolor">Select your favorite color :</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Date

Input type=” date” is used to render a date picker to take input as a date from the user. In the below example we have created a date input that lets users add their birthdate as input.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:tomato;
padding:25px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:3px;
background-color:#ffffff;
}

</style>
<body>

<h2>Input Type Date </h2>

<form action="demo.html">
   <p>Enter Your Birthdate</p>
   <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"> <br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Email

Input type=”email” is used to create an input field that lets users add an email address. In the below example we have created a demo sign-up form that takes basic information from users.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:lightyellow;
}

form{
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
padding:35px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border:none;
padding:10px;
outline:none;
border-radius:5px;
background-color:#ffffff;}

</style>
<body>

<h2>Input Type Email </h2>

<form action="demo.html">
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
   <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>
  <label for="age">Age:</label><br>
  <input type="text" id="age" name="age"><br><br>
   <label for="country">Country:</label><br>
  <input type="text" id="country" name="country"><br><br>
  
  <input type="submit" value="Sign Up">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type File

Input type=”file” allows users to browse and upload files on a web page. In the below example we have created a job application form that takes the name, email id and resume as input from the user.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:tomato;
padding:25px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:5px;
background-color:#ffffff;
color:black;
}

</style>
<body>

<h2>Job Application </h2>

<form action="demo.html">
  
  <label for="fname">Full Name:</label><br>
  <input type="text" id="fname" name="fname"><br><br>
   <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>

  <label for="myfile">Upload Resume :</label><br>
  <input type="file" id="myfile" name="myfile"><br><br>
  <input type="submit" value="Submit">

</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Month

Input type=”month” allows users to select month and year as an input. In the below example we have created one input field which lets users enter the current month and year as an input.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:tomato;
padding:25px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:5px;
background-color:#ffffff;
color:black;
}
</style>
<body>

<form action="demo.html">
  <label for="bdaymonth">Enter Current Month & Year </label><br><br>
  <input type="month" id="bdaymonth" name="bdaymonth"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Number

Input type=”number” allows the user to add a number as an input. We can also define the range of numbers by using the min and max attributes. So, when a user enters a number bigger or smaller than the range it will not be accepted.

In the below example we have created an input field that accepts numbers as input from the user. We have set the minimum value as 1 & the maximum value is 11. Suppose if a user adds 12 as input it will not be accepted and the browser will show a message that the number must be less than 11.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:lightpink;
padding:25px;
border-radius:8px;
color:black;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:5px;
background-color:#ffffff;
color:black;
}

</style>
<body>
<form action="demo.html"> 
<label for="quantity">Enter no between 1 & 11:</label><br><br>
  <input type="number" id="quantity" name="quantity" min="1" max="11">
  &nbsp;
  <input type="submit" value="Submit">  
</form>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Restrictions

Disabled: It Specifies that the input field is disabled.
Max: It Specifies the highest possible value for an input field.
Min: It Specifies the lowest possible value for an input field.
Maxlength: It Specifies the maximum number of characters that can be entered into an input field.
Readonly: It Indicates that an input field is read-only.
Required: It Indicates that an input field is necessary.
Value: It Sets the value for an input field’s default value.

Input Type Range

Input type=”range” is used to create an input field that enables users to select a particular value using a slider. We can define the range of sliders using the min and max attributes. In the below example we have created a slider with a minimum value of 0 and a maximum value of 1000.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:lightblue;
padding:25px;
border-radius:8px;
color:black;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:5px;
background-color:#ffffff;
color:black;
}

</style>
<body>

<form action="demo.html">
  <label for="vol">Select Value between 0 & 1000</label><br><br>
  <input type="range" id="vol" name="vol" min="0" max="1000" value="0"><br>
  &nbsp;
  <input type="submit" value="Submit">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Search

Input type=”search” is used to create a search field that is similar to the normal text field. With the help of JavaScript, we can make the search field functional. In the below example we have created a search field that is useful in searching a particular keyword from a web page. In the example below we have cloned the design of the google search home page.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
}

#gsearch{
border:1px solid lightgray;
width:270px;
padding:10px;
margin-top:10px;
border-radius:15px;
}

#btn{
padding:5px;
background-color:#F8F9FA;
border:1px solid transparent;}

small{
font-size:12px;
margin-top:15px}
</style>

<body>

<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="200">

<form action="/action_page.php">
  <input type="search" id="gsearch" placeholder="Search"><br><br>
  <input type="submit" id="btn" value="Google Search">
  <input type="submit" id="btn" value="I'm feeling Lucky">
</form> 
<small>Google offered in: हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം ਪੰਜਾਬੀ</small>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Tel

Input type=”tel” is used to create an input field for telephone numbers. It lets users add a telephone number as input. In the below example we have created a simple login form that enables users to log in using the contact number.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:gray;
padding:25px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:10px;
background-color:#ffffff;
color:black;
}

</style>
<body>

<h2> Login </h2>
<form action="demo.html">
  
  <label for="vol">Contact</label><br><br>
  <input type="tel" id="vol"><br><br>
  <input type="submit" value="Send OTP">
  
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Time

Input type=”time” is used to create an input field that lets users select time. In the below example we have created an appointment booking form that lets users book an appointment.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:orange;
padding:25px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:10px;
background-color:#ffffff;
color:black;
}

</style>
<body>

<h2> Book an Appointment </h2>
<form action="demo.html">
    <label for="fname">Full Name</label><br>
  <input type="text" id="fname"><br><br>
  <label for="vol">Contact</label><br>
  <input type="tel" id="vol"><br><br>
   <label for="appt">Select a time:</label><br>
  <input type="time" id="appt" name="appt"><br><br>
  <input type="submit" value="Book Appointment">
 
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Url

Input type=”url” is used to create an input field that lets users submit a URL. In the below example we have created a form that takes name contact and a website link as input from users.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{

background-color:pink;
padding:25px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:10px;
background-color:#ffffff;
color:black;
}

</style>
<body>

<h2> Add Your Details</h2>
<form action="demo.html">
  <label for="fname">Full Name</label><br>
  <input type="text" id="fname"><br><br>
  <label for="vol">Contact</label><br>
  <input type="tel" id="vol"><br><br>
      
  <label for="homepage">Website Link</label><br>
  <input type="url" id="homepage" name="homepage"><br><br>
  <input type="submit" value="Submit">
  
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Input Type Week

Input type=”week” is used to create an input field that lets users select week and year. In the below example we have created a website that lets users reserve a table at a restaurant.

<!DOCTYPE html>
<html>
<style>
body{
height:100vh;
display:flex;
justify-content:center;
place-items:center;
flex-direction:column;
background-color:white;
}

form{
background-color:orange;
padding:25px;
border-radius:8px;
color:white;
font-family:arial;
}

input{
border-radius:5px;
border:none;
padding:10px;
background-color:#ffffff;
color:black;
}

</style>
<body>

<h2> Book a Table </h2>
<form action="demo.html">
    <label for="fname">Full Name</label><br>
    <input type="text" id="fname"><br><br>
    <label for="week">Select a week:</label><br>
    <input type="week" id="week" name="week"><br><br>
    <label for="appt">Select a time:</label><br>
    <input type="time" id="appt" name="appt"><br><br>
    <input type="submit" value="Book Table">
</form>

</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

In this article, I am going to discuss Input Attributes in HTML with Examples. Here, in this article, I try to explain HTML Input Type Elements with Examples and I hope you enjoy this Input Type Elements in HTML with Examples article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

Leave a Reply Cancel reply