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 Input Search name Property
The HTML DOM Input Search name property sets or returns the value of the name attribute of a search input field. The name attribute identifies the form data when submitted to the server and allows JavaScript to reference the element for manipulation.
Syntax
Following is the syntax for setting the name property −
searchObject.name = "name"
Following is the syntax for getting the name property −
var name = searchObject.name
Here, name is a string specifying the name of the search field.
Return Value
The property returns a string representing the value of the name attribute of the search input field.
Example − Setting the Name Property
Following example demonstrates how to change the name of a search input field using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Search Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Search Name Property</h2>
<form>
<label for="fruitSearch">FRUITS: </label>
<input type="search" id="fruitSearch" name="fruits" maxlength="15" placeholder="Search fruits...">
</form>
<p>Change the name of the above search field by clicking the below button</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="output"></p>
<script>
function changeName() {
document.getElementById("fruitSearch").name = "searchFruits";
document.getElementById("output").innerHTML = "Search field name is now: " + document.getElementById("fruitSearch").name;
}
</script>
</body>
</html>
Initially, the search field has the name "fruits". After clicking the button, the name changes to "searchFruits" −
Input Search Name Property FRUITS: [Search fruits... ] Change the name of the above search field by clicking the below button [CHANGE NAME] Search field name is now: searchFruits
Example − Getting the Name Property
Following example shows how to retrieve and display the current name of a search input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Search Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Display Search Field Name</h2>
<form>
<label for="productSearch">Product Search: </label>
<input type="search" id="productSearch" name="productQuery" placeholder="Enter product name">
</form>
<button type="button" onclick="displayName()">Show Current Name</button>
<p id="nameDisplay"></p>
<script>
function displayName() {
var currentName = document.getElementById("productSearch").name;
document.getElementById("nameDisplay").innerHTML = "Current search field name: " + currentName;
}
</script>
</body>
</html>
Clicking the button displays the current name attribute value of the search field −
Display Search Field Name Product Search: [Enter product name ] [Show Current Name] Current search field name: productQuery
Example − Form Submission with Name
Following example demonstrates how the name property is used when submitting form data −
<!DOCTYPE html>
<html>
<head>
<title>Search Name in Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Search Form Example</h2>
<form action="#" method="get" onsubmit="return false;">
<label for="citySearch">City Search: </label>
<input type="search" id="citySearch" name="city" placeholder="Enter city name">
<input type="submit" value="Search" onclick="simulateSubmit()">
</form>
<p id="submissionInfo"></p>
<script>
function simulateSubmit() {
var searchField = document.getElementById("citySearch");
var fieldName = searchField.name;
var fieldValue = searchField.value;
if (fieldValue.trim() === "") {
document.getElementById("submissionInfo").innerHTML = "Please enter a search term.";
} else {
document.getElementById("submissionInfo").innerHTML =
"Form would submit: " + fieldName + "=" + fieldValue;
}
}
</script>
</body>
</html>
When the form is submitted, the server receives the search data as city=searchterm where "city" is the name and "searchterm" is the entered value.
Key Points
-
The
nameproperty is essential for identifying form data on the server side after submission. -
Multiple search fields in the same form must have unique names to avoid data conflicts.
-
The name attribute is case-sensitive and should follow standard naming conventions.
-
Unlike the
idattribute, thenameattribute is specifically used for form data handling.
Browser Compatibility
The Input Search name property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. The HTML5 search input type provides enhanced user experience with built-in search functionality.
Conclusion
The HTML DOM Input Search name property provides a way to dynamically set or retrieve the name attribute of search input fields. This property is crucial for form data identification during server submission and enables JavaScript manipulation of search elements for enhanced user interaction.
169 Views
