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

html css input
osos picture osos · Sep 25, 2011 · Viewed 517.1k times · Source

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

Darin Dimitrov picture Darin Dimitrov · Sep 25, 2011

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

Related questions

Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
Put icon inside input element in a form

How do I put an icon inside a form's input element? Live version at: Tidal Force theme

Read More
Can I hide the HTML5 number input’s spin box?

Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or JavaScript method to prevent the up/down …

Read More