How can the size of an input text box be defined in HTML?

HtmlCssInput

Html Problem Overview


Here is an HTML input text box:

<input type="text" id="text" name="text_name" />

What are the options to define the size of the box?

How can this be implemented in CSS?

Html Solutions


Solution 1 - Html

You could set its width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

or even better define a class:

<input type="text" id="text" name="text_name" class="mytext" />

and in a separate CSS file apply the necessary styling:

.mytext {
    width: 300px;
}

If you want to limit the number of characters that the user can type into this textbox you could use the maxlength attribute:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

Solution 2 - Html

The size attribute works, as well

<input size="25" type="text">

Solution 3 - Html

Try this

<input type="text" style="font-size:18pt;height:420px;width:200px;">

Or else

 <input type="text" id="txtbox">

with the css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

Solution 4 - Html

You can set the width in pixels via inline styling:

<input type="text" name="text" style="width: 195px;">

You can also set the width with a visible character length:

<input type="text" name="text" size="35">

Solution 5 - Html

<input size="45" type="text" name="name">

The "size" specifies the visible width in characters of the element input.

You can also use the height and width from css.

<input type="text" name="name" style="height:100px; width:300px;">

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionososView Question on Stackoverflow
Solution 1 - HtmlDarin DimitrovView Answer on Stackoverflow
Solution 2 - HtmlFuzzy AnalysisView Answer on Stackoverflow
Solution 3 - HtmlJanarthanan RamuView Answer on Stackoverflow
Solution 4 - Htmlbetrice mpalanziView Answer on Stackoverflow
Solution 5 - HtmlDaniel dos SantosView Answer on Stackoverflow