Quick Reach
- 1 The textarea in HTML
- 2 Basic example of creating HTML textarea
- 3 Textarea size
- 4 Textarea maxlength example
- 5 Textarea readonly example
- 6 Input textarea
- 7 Textarea value example
- 8 CSS textarea
- 9 Related
The textarea in HTML
The HTML element textarea is used to allow entering multi-line text. For the single line, you may use input type text. The text area is used with HTML forms where a user can enter longer text messages. The text is submitted as a user presses submit or save button in the HTML form where you can process information entered in the textarea by using the server side scripting like PHP, ASP.net etc. Examples of using the textarea include using it in the contact us pages, feedback forms etc.
You can specify the textarea size by using the rows and cols attributes. We will show you how to use the text area in HTML, specify its size and other attributes along with applying CSS style with examples.
The basic syntax of HTML textarea is:
<textarea rows=”15″ cols=”40″></textarea>
Where rows and cols define the height and width of the textarea. Any text written before the closing tag </textarea> will be shown within the textarea as a web page is loaded containing that textarea.
Basic example of creating HTML textarea
The example below creates a basic textarea in HTML.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
Message: <br /><textarea name=“message” rows=“15” cols=“40”></textarea><br />
</body>
</html>
|
Textarea size
The text area size can be defined by using the rows and cols attributes of textarea tag. The more the value the larger will be textarea. The example below creates a textarea of 50 columns and 30 rows.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
Message: <br /><textarea name=“message” rows=“30” cols=“50”></textarea><br />
</body>
</html>
|
You can also specify the height and width of textarea by using the CSS. See the section below to learn with CSS.
Textarea maxlength example
The maxlength attribute of the textarea tag specifies the maximum number of characters that can be entered in the textarea. See the following example of using the maxlength attribute where we set the maximum length = 100 characters.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
Message: <br /><textarea name=“message” rows=“20” cols=“50” maxlength=“100”></textarea><br />
</body>
</html>
|
As you can see, only 100 characters can be entered in the above example.
Textarea readonly example
You can make a textarea as read-only by using the readonly attribute. This is useful in scenarios like presenting the terms and conditions in the textarea or only allowing a user to submit pre-defined multi-line messages. In that case, you may write the pre-defined text before the closing tag of textarea. See the following example of using the readonly attribute.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>textarea example</title>
</head>
<body>
Message: <br /><textarea name=“message” rows=“30” cols=“50” readonly>This is textarea lesson demostrating readonly attribute.</textarea><br />
</body>
</html>
|
Input textarea
To use textarea for submission of textual information, you have to use it inside the <form> tag where other input elements are also used. The submitted information then can be retrieved in the server-side scripting language like PHP.
To use text area as input in the HTML form, see example below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
Address:<input type=“text” name=“address”/><br />
Message: <br /><textarea name=“message” rows=“15” cols=“40”></textarea><br />
<input type=“submit”>
</form>
</body>
</html>
|
Textarea value example
The value of the textarea can be retrieved after HTML form is submitted to the server side. The example below shows how to get the textarea value in the PHP script after you press the Submit button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
Address:<input type=“text” name=“address”/><br />
Message: <br /><textarea name=“message” rows=“15” cols=“40”></textarea><br />
<input type=“submit”>
</form>
</body>
</html>
|
CSS textarea
You can apply the style to textarea by using the CSS. Not only look and feel can be set by using the CSS but also height and width (textarea size) can also be set by using the CSS properties. See examples below to apply the style with CSS.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
<style>
.txtarea
{
width: 300px;
height: 150px;
border: 2px dashed red;
color: green;
background-color: #FFE1E1;
}
</style>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
Address:<input type=“text” name=“address”/><br />
Message: <br /><textarea name=“message” class=“txtarea”></textarea><br />
<input type=“submit”>
</form>
</body>
</html>
|
As you can see, the CSS based textarea where the color of text is set to green, border color and style, height and width of textarea are also set by using the CSS properties.
In the above example, we created a CSS class and used it inside the <textarea> tag. You can also set the CSS by using the style attribute. See example below for using the Style attribute:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<title>textarea example</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
Address:<input type=“text” name=“address”/><br />
Message: <br /><textarea name=“message” style=“width: 300px;height: 150px;border: 2px dashed red;color: green;background-color: #FFE1E1;”></textarea><br />
<input type=“submit”>
</form>
</body>
</html>
|
Also see HTML Forms | HTML input type | HTML div
Leave A Comment?