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

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

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