How to specify the width of an input element in HTML5 ?
We’ll focus on how to set the width of input elements in a user-friendly and straightforward manner. To control the width of input elements like text fields, we can either use the size attribute (for text-based inputs) or apply custom styles using CSS (to define the width property).
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.
Table of Content
Using size Attribute
The size attribute in HTML5 allows you to set the width of input fields based on the number of visible characters. It 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: In this example, we’ll create two input fields, one for entering a name (using the size attribute) and one for entering a date (using the CSS width property).
<!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: In this example, we use the CSS width property to specify the width of both the name and date input fields.
<!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:
