HTML, CSS, JavaScript Tutorial

HTML Element: <textarea>

The HTML <textarea> element indicates a multiline input control. It can hold an unlimited number of characters, and the text used is typically rendered in a fixed-width font. The size of the text area can be specified using the element’s cols and rows attributes or using corresponding CSS attributes.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute	Description	More
autofocus	Specifies whether element should automatically get focus when page loads	Here
cols	Width of text area (in characters)	Here
dirname	Specifies text direction will be submitted	Here
disabled	Specified element(s) to be disabled	Here
form	Name of the form that element belongs to	Here
maxlength	Maximum number of characters allowed in an element	Here
name	Name of element	Here
placeholder	Short hint describing expected value of element	Here
readonly	Whether element is read-only	Here
required	Whether the element must be filled out before submitting form	Here
rows	Visible number of lines in a <textarea> element	Here
wrap	How text in a <textarea> element is to be wrapped when submitted in a form	Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods, and additional properties with the same name and meaning as the attributes of the underlying HTML element referred to above (with the maxlength and readonly properties of the underlying element corresponding to the maxLength and readOnly properties of the DOM object). It also supports the following additional properties and methods:

Additional properties:

Property	Description	More
defaultValue	Sets / returns default value of element	Here
type	Returns type of form that contains element	Here
value	Sets / returns contents of element	Here

Additional methods:

Method	Description	More
select()	Selects entire contents of text area	Here

The default style applicable to this element is shown here.

EXAMPLE:

HTML USED IN THIS EXAMPLE:

<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<form action="http://www.nematrian.com/ExpressionEvaluator.aspx">
<textarea type="text" name="expr" rows="3" cols="25">3*5</textarea>
<br><input type="submit" value="Go to webpage to evaluate">
</form>

<br>Created using JavaScript:<br>
<span id="element"></span>

<script>
var f = document.createElement("FORM");
f.setAttribute("action","http://www.nematrian.com/ExpressionEvaluator.aspx");
var x1 = document.createElement("TEXTAREA");
x1.setAttribute("type","text");
x1.setAttribute("name","expr");
x1.setAttribute("rows","3");
x1.setAttribute("cols","25");
var txt1 = document.createTextNode("3*5");
x1.appendChild(txt1);
var br1 = document.createElement("BR");
var x2 = document.createElement("INPUT");
x2.setAttribute("type","submit"); x2.setAttribute("value","Go to webpage to evaluate");
f.appendChild(x1);
f.appendChild(br1);
f.appendChild(x2);
document.getElementById("element").appendChild(f);
</script>

</body>
</html>

NAVIGATION LINKS
Contents | Prev | Next | HTML Elements

Desktop view | Switch to Mobile