How can the size of an input text box be defined in HTML?
HtmlCssInputHtml 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;">