Setting Input Sizes

This HTML example demonstrates how to set the size of an input element. The size is specified by two values: maxlength and size. The value maxlength specifies the number of characters that can be inputted. The value size specifies the actual size of the element, much like a width specification in CSS. The number of characters can be more than what fits inside the element, as shown in the examples below.

InputSizes.html

<!doctype html>
<html>
	<head>
		<title>XoaX.net's HTML</title>
		<script></script>
	</head>
	<body>
		<div><input type="text" maxlength="1" size="1" > maxlength = "1" size="1" </div>
		<div><input type="text" maxlength="2" size="1" > maxlength = "2" size="1" </div>
		<div><input type="text" maxlength="4" size="1" > maxlength = "4" size="1" </div>
		<div><input type="text" maxlength="8" size="1" > maxlength = "8" size="1" </div>
		<div><input type="text" maxlength="1" size="1" > maxlength = "1" size="1" </div>
		<div><input type="text" maxlength="1" size="2" > maxlength = "1" size="2" </div>
		<div><input type="text" maxlength="1" size="3" > maxlength = "1" size="3" </div>
		<!-- The default size is 20. The default maxlength is 524288. -->
		<div><input type="text" maxlength="524288" size="20" > maxlength = "524288" size="20" </div>
		<div><input type="text"> default sizes (maxlength="524288" size="20") </div>
	</body>
</html>

Core HTML

Setting Input Sizes

InputSizes.html

Output