How do we add the width in characters for in HTML?

HTML Web Development Front End Technology

In this article we are going to perform how do we add the width in characters for input in HTML.

The <input> size attribute is used to specify the visible width of an <input> element in terms of characters. The input fields accepts text, search, tel, URL, email, and password. Its display size may be impacted by this, albeit rather indirectly. The length of prospective entries is not truly constrained by the size parameter, though −

Syntax

Following is the syntax for <input size>

<object> ... </object>

Let’s look into the following examples, to learn more about adding the width in characters for input in HTML.

Example 1

In the following examples we are using size=35 for input field.

<!DOCTYPE html>
<html>
<body>
   FirstName:<input type="text"
   value="Tutorials"><br>
   Lastname<input type="text"
   size="35"
   value= "Point">
</body>
</html>

When the script gets executed, it will generate an output displaying the input fields for firstname with the default size and last name with the size=35 as we mentioned in the script on the webpage.

Example 2

Consider the following example we are using placeholder with the size=24.

<!DOCTYPE html>
<html>
<body>
   <form>
      <div>
         <label for="Name">Enter FullName:</label>
         <input type="text" id="Name" name="Name" placeholder="All Capital Letters" size="24" />
      </div>
      <div>
         <button>Submit</button>
      </div>
   </form>
</body>
</html>

On running the above script, it will generate an output consisting of an input field with a place holder mentioning "all capital letters" with a size of =24 along with a submit button on the webpage.

Example 3

Let’s consider the another example, where we are using min and max length.

<!DOCTYPE html>
<html>
<body>
   <form>
      <div>
         <label for="Name">Name: </label>
         <input type="text" id="Name" name="Name" required size="10" minlength="4" maxlength="8" />
         <span class="validity"></span>
      </div>
      <div>
         <button>Submit</button>
      </div>
   </form>
</body>
</html>

On running the above script, the output window will pop up, displaying the input field for the name mentioned with size=10 , min, and max attributes along with the submit button on the webpage.