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