Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do we add the width in characters for in HTML?
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.
158 Views
