Specifying the Element Size and max length
Description
There are two attributes that have an effect on the size of the text box.
The maxlength attribute specifies maximum characters that the user can enter,
and the size attribute specifies how many characters the text box can display.
For both attributes, the number of characters is expressed as a positive integer value.
Example
The following code shows both of these attributes in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name:
<input maxlength="10" id="name" name="name" />
</label>
</p><!--from w ww . j a v a 2s . c om-->
<p>
<label for="city"> City:
<input size="10" id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit:
<input size="10" maxlength="10" id="fave" name="fave" />
</label>
<button type="submit">Submit Vote</button>
</p>
</form>
</body>
</html>
Note
The first input element has the maxlength attribute with a value of 10.
The second input element has the size attribute with a value of 10. This means that the browser must ensure that it sizes the text box so that it can display ten characters.
The size attribute doesn't apply any restriction on the number of characters that the user can enter.
The third input element has both size settings and the effect is : fixing the size onscreen and limiting the number of characters that the user can enter.