HTML Form Attributes (Size, Maxlength, ReadOnly)

HTML Form Attribute - value

By the value attribute we specify the default text of an input text field.

This is further clarified by the example below.

Code Output
<input type=text value="Default Value" />

Notice the text inside the textbox. This attribute "value" is valid for almost all input capable form fields.


HTML Form Attribute size

The size attribute of the text type field handles this.
Followings are the usage of this attribute.
Example: - 1

Code Output
<input type=text size=30 />

Example: - 2

Code Output
<input type=text size=12 />

HTML Form Attribute readonly

We can protect the content of text field from being modified. For this we use the attribute readonly.

Code Output

<input type=text value="You can not modify this text" readonly>

HTML Form Attribute: maxlength

We can set the maximum length of a text field by attribute maxlength. This is the maximum allowable length of the text field. This property is true for most of the HTML Form elements.

Code
<input type=text maxlength=30 >

You should always remember that the maxlength sets the maximum allowable characters only not the size of a text field which is set using the size attribute. Here it would be like stuffing things in your mind without telling actually what it means. So, maxlength is the maximum capacity of a text field. You can never enter 15 characters in a text field which maxlength has been set to 10. However you can set the size of the text field to 15 units of the same field. The text field will expand to accommodate as much space required. But when you start entering the characters, you will have to stop after entering 10 characters only. This will become clearer with the examples below

Example: a

Code Output
<input type=text maxlength=20 size=10 >

Example: b

Code Output
<input type=text />

Example: c

Code Output
<input type=text maxlength=10 size=20 >

The outputs are as explained below.

  • The browser allows you to enter 10 characters only. It seems that the rest of the portion has been protected by using the readonly attribute of text input box.
  • The browser displays an input box of default size and allows you to input unlimited texts in it.
  • Third type is a little bit similar to the case b. Here the browser shows a text box of width 10 units but allows you to enters texts of up to 20 characters length.