Text input fields in HTML

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.

<input type=password size=10 maxlength=8>

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.

Main Attributes of Textarea in HTML: The textarea has the following main attributes.

1. 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.

2. 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.

3. 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>	Default Text

   In the above example the browser this time displays the text ’Default Text’ inside the textarea.

4. readonly: This attribute protects the text of a textarea from being changed.
   

   Code	Output
   <textarea cols=20 rows=2 readonly> Protected Text </textarea>	Protected Text

   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.