Html input type text size issue

Question

I have a input field in html form

<input type="text" size="30">

I want to display only 30 char so i set the size as 30 .

But the behavior of the text field depends upon what char is entered as input some time it displays less char than 30 . some times it displays more than 30 .

for example :

if I enter 123456789012345678901234567890 it will display only 28 characters even though it has 30 characters

if I enter on only l as a character I can enter almost 50 chars

what can be the cause of this I am not able to understand do any one have a idea ? I want to know do each char takes different space to display in form ?

Jukka K. Korpela · Accepted Answer · 2013-08-02 13:40:56Z

3

The widths of characters (or, more exactly, advance widths of glyphs) generally vary a lot, from a narrow “i” to a wide “W”. The size attribute sets the visible width as a number of “average” characters, a vague concept (average ovetr what?), interpreted different by different browsers.

Only some fonts have equal width for all characters. Such fonts are called “monospace”, and they are generally difficult to read and may make the text look like written on a typewriter, but they still have their uses. To have a width of 30 characters, consider setting something like font-family: Consolas, monospace on the input element.

answered Aug 2, 2013 at 13:40

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atul Rai Over a year ago

Thanks Jukka ..i was looking for the same u posted

Nelson Menezes · Accepted Answer · 2013-08-02 11:16:19Z

1

This behavior is because the size that different characters you enter is different. Size of some is less and some is more. If it occupies lesser space then the text box will occupy more characters. This is the sole reason for the problem you are experiencing. (if you use i instead of 1 it will occupy more than 50 char also.)

If you aim at occupying exactly 30 characters then try using the property "maxlength" as follows:

<input type="text" maxlength="30">

answered Aug 2, 2013 at 11:16

Nelson Menezes

1092 silver badges8 bronze badges

Comments

Coder · Accepted Answer · 2013-08-02 10:49:11Z

0

Try

<input type="text" maxlength="30">

Demo for both size and maxlength difference

answered Aug 2, 2013 at 10:49

Coder

7,09613 gold badges59 silver badges87 bronze badges

Collectives™ on Stack Overflow

Html input type text size issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related