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;">
        w3wiki
    </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:



How to specify the width of an input element in HTML5 ?

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.

Table of Content

  • Using “size” Attribute
  • Using “width” Property

Similar Reads

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....

Using width Attribute

...

Syntax:

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....

Contact Us