How to Resize Text Boxes
Text boxes help you collect data from a Web form. You can change the size of your text box to make it fit an area of your page or align with other text boxes you've created. The input tag allows you to create, name and resize text boxes in a Web page. You can manipulate a text box's width with Hypertext Markup Language (HTML) or its height and width with Cascading Style Sheets (CSS).
Other People Are Reading
Instructions
-
Resize with CSS
-
1
Open a text editor, such as Notepad, TextPad or EditPad. Select "File" and "Open" from the menu. Double-click the HTML file containing the text box you want to resize.
-
2
Add the following style between the <HEAD></HEAD> tag to resize the dimensions of the text box. The following text box has a height of 50 pixels and width of 200 pixels. To use a different size, change the value for height and width.
<style type="text/css">
<!--
.myinput {
width:200px;
height:50px;
}
-->
</style>
-
-
3
Scroll to the <BODY> tag and find the HTML code for the text box. It will be similar to:
<input type="text" name="FirstName" size="20" />
-
4
Retain '<input type="text" name="FirstName" />' but remove 'size="20"' from the code. Add the classname ("myinput") from the style you created, so it reads as follows:
<input type="text" name="FirstName" class="myinput" />
-
5
Repeat the previous step to resize additional text boxes. All text boxes that include 'class="myinput"' are automatically resized on the page.
-
6
Select "File" and "Save" to update your page.
Resize with HTML
-
7
Start your favorite text editor, such as Notepad, TextPad or EditPad. Select "File" and "Open" from the menu. Double-click the HTML file you want to modify.
-
8
Scroll to the HTML code for the text box. It will be similar to:
<input type="text" name="myname" size="20" />
-
9
Change the value for "size" to the size you want to set. For example, to set the length to "40," use the following:
<input type="text" name="myname" size="40" />
-
10
Select "File" and "Save" from the menu to save your changes.
-
1
References
- Photo Credit Hemera Technologies/AbleStock.com/Getty Images
