Back to: HTML Tutorials
Input Attributes in Html with Examples
In this article, I am going to discuss Input Attributes in HTML with Examples. Please read our previous article where we discussed Input Type Elements in HTML with Examples. At the end of this article, you will learn everything about HTML Input Attributes with Examples.
The HTML value Attribute
The Html value attribute is used to define an initial value for an input element. In the example below we have created a form that takes the name, age, and contact number as input from users. Inside the input element, we have initialized values for name age and contact number respectively. When you run the below code, you will get the form with prefilled data.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:#cecece;
}
form{
background-color:lightgreen;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
}
</style>
</head>
<body>
<h1>The input value attribute</h1>
<form action="/action_page.php">
<label for="fname">Full Name:</label><br>
<input type="text" id="fname" name="fname" value="Anurag Mohanty"><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" value="29"><br>
<label for="contact">Contact:</label><br>
<input type="tel" id="age" name="contact" value="1234567890"><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.
The HTML readonly Attribute
The HTML readonly attribute is to define that the given input is readonly. If the input field is readonly user will not be able to manipulate or update data. In the example below we have created a form that takes the name, age, and contact number as input from users.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:tomato;}
form{
background-color:purple;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
}
</style>
</head>
<body>
<h1>The readonly attribute</h1>
<form action="/action_page.php">
<label for="fname">Full Name:</label><br>
<input type="text" id="fname" name="fname" value="Andy jackson" readonly><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" value="29" readonly><br>
<label for="contact">Contact:</label><br>
<input type="tel" id="age" name="contact" value="1234567890" readonly><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.
The HTML disabled Attribute
The disabled attribute defines that the input field is disabled and the user won’t be able to click and use the disabled input field. In the example below we have created a form with disabled input fields when a user tries to click on the office use only section user won’t be able to use those input fields because these fields are disabled.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:orange;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
}
</style>
</head>
<body>
<h1>The Disabled attribute</h1>
<form action="/action_page.php">
<p>Contact Info </p>
<label for="fname">Full Name:</label><br>
<input type="text" id="fname" name="fname" ><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" ><br>
<label for="contact">Contact:</label><br>
<input type="tel" id="age" name="contact"><br><br>
<input type="submit" value="Submit">
<p>Office use </p>
<label for="appli">Application Status:</label><br>
<input type="text" id="appli" name="appli" disabled><br>
<label for="remark">Remark:</label><br>
<input type="text" id="remark" name="remark" disabled><br>
</form>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
The HTML size Attribute
The size attribute is used to define the width of characters inside an input field. We can use size attributes with input type text, email, password, numbers, etc. By default, the value of the size attribute is 20. In the example below we have created a basic login form that takes username and pin as input from the user. We have set the size of username and pin as 25 and 6 respectively.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:orange;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
}
</style>
</head>
<body>
<h1>The Size attribute</h1>
<form action="/action_page.php">
<p>Login</p>
<label for="uname">Username:</label><br>
<input type="text" id="uname" name="uname" size="25"><br>
<label for="pin">Pin:</label><br>
<input type="text" id="pin" name="pin" size="6"><br>
<small>Enter 6 digit unique pin</small><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.
The HTML maxlength Attribute
The maxlength attribute is used to define the maximum amount of character a user can enter in an input field. If we set the maxlength attribute value to 10 we won’t be able to enter characters more than 10. In the example below we have created an input field that takes a unique number as input from the user. We have set the value of maxlength attribute to 10 so users won’t be able to add more than 10 digits.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:mediumseagreen;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
}
</style>
</head>
<body>
<h1>The Maxlength attribute</h1>
<form action="demo.html">
<label for="eno">Enter a Number:</label><br>
<input type="text" id="eno" name="eno" maxlength="10"><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.
The HTML min and max Attributes
The min and max attributes are used to define the minimum and maximum value a user can add as an input. We can use min and max attributes together to define a range of accepted values. In the example below we have created an input field that takes values between 0 & 100.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:hotpink;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
}
</style>
</head>
<body>
<h1>The Min Max attribute</h1>
<form action="demo.html">
<label for="eno">Enter a Number between 0 & 100:</label><br><br>
<input type="number" id="eno" name="eno" min="0" max="100"><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.
The HTML multiple Attribute
The multiple attributes let users add multiple values at a time in a single input field. We can use multiple attribute with file and email input types. In the example below we have created a photography contest application form where users are requested to add three photos to participate in a contest.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:hotpink;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
color:black;
}
</style>
</head>
<body>
<h1>The Multiple attribute</h1>
<form action="demo.html">
<strong>Photography Contest Application</strong><br><br>
<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="eno">Upload three photographs:</label><br><br>
<input type="file" id="eno" name="eno" multiple ><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.
The HTML placeholder Attribute
The placeholder attribute is used to give users a hint of what value they should enter in the input field. Placeholders can be useful if we have not applied labels to our input tags. In the example below we have created a form with placeholders.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:teal;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
color:black;
}
</style>
</head>
<body>
<h1>The placeholder attribute</h1>
<form action="demo.html">
<input type="text" placeholder="Full Name"><br><br>
<input type="email" placeholder="Email" ><br><br>
<input type="text" placeholder="Age" ><br><br>
<input type="text" placeholder="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.
The HTML required Attribute
The required attribute is used to define that the input field is necessary. We won’t be able to submit form data if we use the required property inside an input element and leave the input fields empty. In the example below we have created the “Enter Your Review” input field as required.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:slateblue;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
color:black;
}
</style>
</head>
<body>
<h1>The Required attribute</h1>
<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="eno">Photograph:</label><br><br>
<input type="image" src="https://cdn.pixabay.com/photo/2013/04/04/12/34/mountains-100367_960_720.jpg" id="eno" name="eno" multiple width="150" height="100"><br><br>
<label >Enter your Review:</label><br>
<textarea type="text" rows="3" required></textarea><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.
The HTML height and width Attributes
The height and width attributes are used to specify the height and width of an input element. In the example below we have set the width and height of the image input element to 150 and 100 respectively.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:slateblue;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
color:black;
}
</style>
</head>
<body>
<h1>The Width & Height attribute</h1>
<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="eno">Photograph:</label><br><br>
<input type="image" src="https://cdn.pixabay.com/photo/2013/04/04/12/34/mountains-100367_960_720.jpg" id="eno" name="eno" multiple width="150" height="100"><br><br>
<label >Enter your Review:</label><br>
<textarea type="text" rows="3" ></textarea><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.
The HTML autofocus Attribute
When a page loads, the input autofocus attribute tells the browser that an input field should be focused automatically. As you can see in the example below as the page loads the full name input element get autofocused.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:teal;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
color:black;
}
</style>
</head>
<body>
<h1>The autofocus attribute</h1>
<form action="demo.html">
<label for="fname">Full Name:</label><br>
<input type="text" autofocus><br><br>
<label for="email">Email:</label><br>
<input type="email" ><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.
The HTML step Attribute
The acceptable number intervals for an input field are specified by the input step attribute. This attribute, along with the max and min attributes, can be used to define a range of legal values.
In the example below we have created an input field with type number and set value of the set attribute to 5. So, the valid input for this field will be multiples of 5 such as 10,15,20,25,30, etc. If a user enters a value that is non-multiple of 5 we will get an error.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
font-family:arial;
background-color:aliceblue;
color:white;
}
h1{
color:black;}
form{
background-color:orange;
padding:25px 35px;
border-radius:8px;
}
input{
border:1px solid transparent;
border-radius:5px;
background-color:#dedede;
outline:none;
padding:8px;
}
</style>
</head>
<body>
<h1>The Step attribute</h1>
<form action="/action_page.php">
<p>Enter Multiples of 5 as input</p>
<label for="eno">Enter a Number:</label><br>
<input type="number" id="eno" name="eno" step="5"><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.
In the next article, I am going to discuss Input Form Attributes in HTML with Examples. Here, in this article, I try to explain HTML Input Attributes with Examples and I hope you enjoy this Input Attributes in HTML with Examples article.
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.