How to Set the Textbox Width in JavaScript

Written by allen bethea Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Set the Textbox Width in JavaScript
JavaScript can change the properties of HTML form elements. (Stockbyte/Stockbyte/Getty Images)

The JavaScript language allows programmers to inspect and modify the internal structure of a Web document. JavaScript has methods to access the application programming interface of HTML (Hypertext Markup Language) known as the Document Object Model, or DOM. The JavaScript method getElementById() allows the programmer to change HTML tag styling properties such as backgrounds, fonts, borders, widths and positioning. The HTML tag must be labelled with an ID so the getElementById() method can find and access it. The width of an HTML form text box can be altered by using the JavaScript DOM getElementByI() method as well.

Skill level:


  1. 1

    Launch the standard plain-text text editor application that is available on your computer.

  2. 2

    Enter the following code into the text editor:



    <style type="text/css"><!--

    mybutton {



    border: 1px dotted black;



    <!-- Java script function below -->

    <script language="javascript">

    function change Width(){

    / this set the width of the textboxes /

    document.getElementById("firsttextbox").style.width = "20em";

    document.getElementById("secondtextbox").style.width = "40em";

    / change message /

    document.getElementById("mybutton").innerHTML = "Works! 1st box 20ems, 2nd box 40ems";






    First name: <input type="text" id="firsttextbox" name="FirstName" size="10" />

    Last name: <input type="text" id="secondtextbox" name="LastName" size="10" />


    <h1 id="mybutton" on Click="change Width()" >Click here to change Textbox width</div>



  3. 3

    Click the "File" menu. Select the "Save" option. Save under the file name "test.html."

  4. 4

    Launch the Web browser that is available on your computer. Click on the "File" menu item and select "Open File."

  5. 5

    Locate the file "test.html" just created, select it with the mouse then click on "Open."

  6. 6

    Click on the text within the grey background with the mouse to change the form text box's width.

Tips and warnings

  • Rather than set the text box width to a specific, absolute size, you can change it relative to its current width. Get the current width of the text box using the getElementById() method. Add the additional width to this value. Set the new width of the text box using the getElementById() method again. To see an example of this, substitute the following code for the JavaScript function change Width():
  • function change Width(){
  • /* gets a pointer to the texbox labelled firsttextbox */
  • var firstbox=document.getElementById("firsttextbox");
  • /* get the current width from this object */
  • var;
  • /* add 60 ems to the current width at set it to the fisttextbox */
  • document.getElementById("secondtextbox").style.width = "40em";
  • document.getElementById("mybutton").innerHTML = "Works! 1st box is 60 extra ems and 2nd box 40ems absolute";
  • }
  • The major Web browsers will display valid HTML and CSS code differently. Even different versions of the same browser may produce unexpected display issues. Always test your code on different browsers and older versions of the same browser in order to ensure the code works as expected.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.