In this article, we are going to specify the width of input element. This can be done by using the size attribute or by width attribute to set the width of an element.
The size attribute works with the following input types: text, search, tel, url, email, and password and not on type date, image, time for these we can use width attribute.
Create a div in which we are putting our input. We will take 2 inputs names and dates. For inputting name we will use input type – name and size attribute. To put date we will use input type – date and width attribute(size attribute will not work for date type).
Syntax: For size attribute.
<input type="text" id="name" size=5>
Syntax: For CSS width.
<input type="text" id="name" style="width: 200px;">
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">
label {
font: 18px;
}
input {
margin: 7px;
padding: 2px
}
</style>
</head>
<body>
<h1>Specify width of input elements</h1>
<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:
