Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Textarea name Property
The HTML DOM Textarea name property returns or sets the value of the name attribute of a textarea element. The name attribute is used to identify the textarea when form data is submitted to the server.
Syntax
Following is the syntax for returning the name property −
textareaObject.name
Following is the syntax for setting the name property −
textareaObject.name = "nameValue"
Return Value
The property returns a string representing the name attribute of the textarea element. If no name attribute is set, it returns an empty string.
Getting the Name Property
Example
Following example demonstrates how to get the name property of a textarea element −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Name Property - Get</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Textarea Name Property</h2>
<textarea name="userFeedback" rows="4" cols="40">
Enter your feedback here...
</textarea>
<br><br>
<button onclick="getName()">Get Name Attribute</button>
<p id="result"></p>
<script>
function getName() {
var textarea = document.querySelector("textarea");
var nameValue = textarea.name;
document.getElementById("result").innerHTML = "Name attribute: " + nameValue;
}
</script>
</body>
</html>
The output shows the name attribute value when the button is clicked −
Name attribute: userFeedback
Setting the Name Property
Example
Following example shows how to set the name property of a textarea element −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Name Property - Set</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Set Textarea Name Property</h2>
<textarea name="oldName" rows="4" cols="40">
This textarea has an old name attribute.
</textarea>
<br><br>
<button onclick="setName()">Change Name to 'comments'</button>
<button onclick="showName()">Show Current Name</button>
<p id="display"></p>
<script>
function setName() {
var textarea = document.querySelector("textarea");
textarea.name = "comments";
document.getElementById("display").innerHTML = "Name changed to: " + textarea.name;
}
function showName() {
var textarea = document.querySelector("textarea");
document.getElementById("display").innerHTML = "Current name: " + textarea.name;
}
</script>
</body>
</html>
Initially shows "oldName", then changes to "comments" when the first button is clicked −
Current name: oldName (After clicking change button) Name changed to: comments
Practical Example with Form
Example
Following example demonstrates the practical use of the name property in a form context −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Name in Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form id="contactForm">
<label for="message">Message:</label><br>
<textarea id="message" name="userMessage" rows="5" cols="50">
Hello, I would like to contact you...
</textarea>
<br><br>
<button type="button" onclick="processForm()">Process Form</button>
</form>
<div id="output"></div>
<script>
function processForm() {
var textarea = document.getElementById("message");
var formData = "Field Name: " + textarea.name + "<br>";
formData += "Field Value: " + textarea.value;
document.getElementById("output").innerHTML = formData;
}
</script>
</body>
</html>
When processed, the form shows both the name attribute and the textarea value −
Field Name: userMessage Field Value: Hello, I would like to contact you...
Common Use Cases
The name property is essential in several scenarios −
-
Form submission − The server receives form data as name-value pairs where the name attribute identifies each field.
-
Form validation − JavaScript can access form elements by their name to validate input before submission.
-
Dynamic forms − Programmatically setting names for dynamically created textarea elements.
-
Form serialization − Libraries use the name attribute to convert form data into JSON or other formats.
Browser Compatibility
The textarea name property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. This property has been part of the DOM specification since the early versions of HTML and JavaScript.
Conclusion
The HTML DOM Textarea name property provides a way to get or set the name attribute of textarea elements. This property is crucial for form handling, allowing the server to identify and process textarea data correctly when forms are submitted.
177 Views
