How To Increase Width Of Textbox In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you how to increase width of textbox in HTML, in HTML, we all know about form in which we use form tag. A form is mostly created to receive or get some information or feedback.
In form, we also come in with many input tags. And as we know input tag has many types. And one from them are text.
Now, the point here is that when we are using these tags a problem arises that is how to increase width of textbox. So, today we will teach you that how to increase width of textbox in html.
Step By Step Guide On How To Increase Width Of Textbox In HTML :-
As, we want to increase the width of textbox. So, there are two main types to increase the width. That are
- By using size attribute
- By using width attribute
Now, the work of both the attributes is same. Both are used to increase or decrease the width of textbox, these are used to customize the width of input tag. Here, we will provide you an example to show you how they work.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<input type="text" name="" id="" size="100">
<br><br><br>
<input type="text" name="" id="" style="width: 80%;">
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, in this we make two input tags. Both are same with a small difference of their width.
- In the first input tag, we specifies its tag with its properties like type, name, id and size attribute. The value used in size attributes defines the width of input tag. As you increase the value of size in numbers, the width of tag in background in website automatically increases.
- Whereas in second input tag, all the content is same but here instead of size, we use width. But in style property. Here, the width is used in percentages, you can also specify in pixels, but some browsers not allow the use of pixels. So, the most preferred way is to use percentage.
- The output of both the tags is visible to you through the browser.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say that we are able to customize the width of textbox according to our choice.
There are also other properties to make it creative and in next sessions, we will also teach you that how you are able to customize your input tag properly. I hope this tutorial on how to increase width of textbox in HTML helps you.
About Dikshita
