All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Increase Height Of Textbox In HTML

Last Updated : Mar 11, 2024

How To Increase Height Of Textbox In HTML

In this tutorial we will show you how to increase height 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 height of textbox.

So, today we will teach you that how to increase height of textbox in html.

Step By Step Guide On How To Increase Height Of Textbox In HTML :-

As, today our topic is that how to increase the height of textbox in html. The height of a textbox of input tag can be increased by using its style property.

In style, we have to give a property of height and after this we have to give a required value to its height attribute.

So, that the height may increase according to your choice. Here, we will also give you an example that how you able to increase height.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
		<input type="text" name="" id="" style="width: 80%;height: 100px;">
    <br><br><br>
    <input type="text" name="" id="" style="width: 50%;height: 30px;">
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Now, here we give you an example of two input tags in both of them our concept is same. Also, the content is also matched. But different CSS properties are given to both of them.
  5. In first, we create an input tag and under this tag we create a style attribute, in which we specify the required width and height. You can also specify the height only as yours choice.
  6. And in second we specify, the same tags with same CSS properties but with different values of both. This show you have you are able to customize the input tag according to you choice.
  7. 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 height 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 height of textbox in HTML helps you.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪