How to specify the width of an input element in HTML5 ?
Last Updated :
28 Dec, 2023
In this article, we’ll focus on setting the width of input elements in a user-friendly and straightforward manner. To achieve this, we can utilize either the “size” attribute or the “width” attribute.
Let’s start by creating a container using a div element where we’ll place two input fields—one for names and the other for dates. For the name input, we’ll use the “text” type along with the “size” attribute to control its width. For the date input, we’ll use the “date” type and specify the width using the “width” attribute, as the “size” attribute doesn’t apply to date inputs.
Using size Attribute
In HTML5, you can set the width of an input element using the “size” attribute. This attribute is applicable to input types like text, search, tel, URL, email, and password.
Syntax:
// For size attribute
<input type="text" id="name" size=5>
Example: Here we used two inputs with different input type i.e. name and date. The name uses size attribute and date uses date attribute both these inputs are separated using <br> and basic styling is used in the head attribute.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
text-align: center;
}
label {
font: 18px;
}
input {
margin: 7px;
padding: 2px
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Specify width of input
elements by using size
attribute
</h3>
<div>
<label for="name">Enter Name:</label>
<input type="text" id="name" size=10>
<br>
<label for="name">Enter Date:</label>
<input type="date" id="last name" style="width: 200px;">
</div>
</body>
</html>
|
Output:
Using width Attribute
To set the width of an input element in HTML5 using the “width” attribute, you would typically use CSS instead, as there isn’t a direct “width” attribute for the input element.
Syntax:
// For CSS width
<input type="text" id="name" style="width: 200px;">
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
text-align: center;
}
label {
font-size: 18px;
}
input {
margin: 7px;
padding: 2px;
width: 90px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Specify width of input elements
by using the "width" attribute
</h3>
<div>
<label for="name">Enter Name:</label>
<input type="text" id="name">
<br>
<label for="name">Enter Date:</label>
<input type="date" id="last name">
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...