HTML Text Input Form Field
A text field is the most commonly used input capable HTML field. You specify the text field as
<input
type=text/>. That’s it. The browser will display a text input capable field of default size. Default
size? What’s that? Well, we can specify maximum number of character which a text field can have. We will learn
this and several other attributes in the next sections which deal with some common form attributes in HTML.
HTML Form Element: Password
The property of password field is that human eyes can not see whatever is typed in such a field. These
though can be read and understood by the browser. The syntax to declare a password field in HTML is as below
Here, the browser creates a password field of default size and default maxlength(Unlimited characters
allowed). Whatever you type in this field is displayed as circles.
In the example above the browser customizes the password field to a maximum length of 8 and size of 10
fields.
HTML Form Element: Textarea
The HTML textarea is an input capable text field of multiple rows. An example to declare a textarea is as
below.
| Code |
Output |
<textarea></textarea> |
|
Main Attributes of Textarea in HTML: The textarea has the following main attributes.
- cols: By this we specify the number of characters which can be entered in each row of the
textarea.
| Code |
Output |
<textarea></textarea> | |
In this example, the browser just creates a textarea of default columns and rows.
- rows: By using the rows attribute of HTML textarea, we set the no of displayable rows
| Code |
Output |
<textarea cols=20 rows=5></textarea> | |
This time the browser creates a textarea of 20 columns and 5 rows and allows user to enter unlimited text
inside it.
- Default Values:Unlike other form element, the default value of text area is the text written between its start and
end tags. So the common attribute value is useless here.
| Code |
Output |
<textarea>
Default Text
</textarea> |
|
In the above example the browser this time displays the text ’Default Text’ inside the textarea.
- readonly: This attribute protects the text of a textarea from being changed.
| Code |
Output |
<textarea cols=20 rows=2 readonly>
Protected Text
</textarea> |
|
This time also the browser creates a textarea of 20 columns and 2 rows and displayed the default text. But
this text is protected by using the "readonly" attribute.