How can the size of an input text box be defined i

Question

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?

Answer 1

<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;">

Answer 2

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;
    }

Answer 3

The size attribute works, as well:

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

Answer 4

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" />

Answer 5

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" />