HTML - name Attribute

Previous
Next

HTML name attribute is used to specify the name of an element. It is used by the server to identify fields in form submissions.

The name attribute value appears on the URL with their respective name after form submission. If the name attribute is not specified within the form controls or is an empty string then no form data will appear on the URL.

Syntax

<tag name= "value"></tag>

Applies On

Below listed elements allow using of the HTML name attribute

Element Description
<input> HTML <input> tag is used accept various types of input from user.
<select> HTML <select> tag is used to create dropdown lists in online forms.
<button> HTML <button> tag is used to create clickable button.
<form> HTML <form> tag is used to create application form to submit user data.
<fieldset> HTML <form> tag is used to group several controls and labels within a web form.
<iframe> HTML <iframe> tag defines a rectangular region within the document in which the browser can display a separate document.
<object> HTML <object> used to show multimedia on web pages, including audio, video, pictures.
<output> HTML <output> used to enable programmers to dynamically show the outcomes of calculations or scripts.
<textarea> HTML <textarea> used to accept mutiline text input from user.
<map> HTML <map> used to define an image map to make clickable area on the image.
<meta> HTML <meta> used to define meta data of the document.
<param> HTML <param> tag is used for passing parameters to an embedded object.

Examples HTML name Attribute

Below examples will illustrate the HTML name attribute, where and how we should use this attribute!

Name attribute for input element

Consider the another scenario, where we are going to use the name attribute with the input tag to mention name for username and email.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Form Example with Name Attribute</title>
   <script>
      function showAlert() {
         var name = document.getElementById('name').value;
         var email = document.getElementById('email').value;
         alert('Name: ' + name + '\nEmail: ' + email);
      }
   </script>
</head>

<body>
   <h1>Contact Us</h1>
   <form onsubmit="return false;">
      <label for="name">Name:</label>
      <input type="text" 
               id="name" 
               name="user_name">
      <br><br>

      <label for="email">Email:</label>
      <input type="email" 
               id="email" 
               name="user_email">
      <br><br>

      <button type="button" onclick="showAlert()">
         Submit
      </button>
   </form>
</body>
</html>

Name attribute for select element

Let's look at the following example, where we are going to use the name attribute with the select tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'name' attribute</title>
   <style>
      select {
         width: 200px;
         padding: 6px;
      }
   </style>
</head>

<body>
   <p>Choose language you knows: </p>
   <form onsubmit="return false;">
      <select name="languages" id="demo">
         <option value="">
               Choose you language
         </option>

         <option value="Hindi">Hindi</option>
         <option value="English">English</option>
         <option value="Telugu">Telugu</option>
      </select>
      <button>Submit</button>
   </form>
</body>

</html>

Name attribute for button element

In the following example, we are using the HTML 'name' attribute within the <button> tag to specify its name. Here we defined two buttons with same names, but submit different values when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>
      Button Name Attribute
   </title>
   <script>
      function showAlert(subject) {
         alert("You clicked the " + subject + " button");
      }
   </script>
</head>
<body>

<h1>The button name attribute</h1>

<form onsubmit="return false;" >
   Choose your favorite subject:
   <button name="subject" 
            type="submit" 
            value="Java" 
            onclick="showAlert('Java')">
               Java
   </button>
   <button name="subject" 
            type="submit" 
            value="Python" 
            onclick="showAlert('Python')">
               Python
   </button>
</form>

</body>
</html>

Name attribute for form element

In this example we add name for a form element to distinguish it from other. 

<!DOCTYPE html>
<html>
<head>
   <title>Form name attribute</title>
</head>
<body>
<h1>The form name attribute</h1>
<form name="myForm" onsubmit="return false;">
   <label for="fname">
      First name:
   </label>

   <input type="text" id="fname" name="fname">
   <br><br>
   <input type="button" value="Send form data!">
</form>
</body>
</html>

Name attribute for textarea element

Following is the example, where we are going to use the name attribute with the textarea tag.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'name' attribute</title>
   <style>
      select {
         width: 200px;
         padding: 6px;
      }
   </style>
</head>

<body>
   <p>Example of the HTML 'name' attribute</p>
   <p>
      Write your feedback in the below field and 
      submit by clicking on submit button.
   </p>
   <form onsubmit="return false;">
      <label for="">
            Your feedback....
      </label>
      <br>
      <textarea name="yourfeedback" 
                cols="30" 
                rows="8">
      </textarea>
      <br>
      <button>Submit</button>
   </form>
</body>
</html>

Name attribute for fieldset element

In this example, we are using name attribute with fieldset element to style the form field when button is clicked. 

<!DOCTYPE html>
<html lang="en">
      
<head>
<script>
   function changeFieldsetStyle() {
      var fieldset = document.querySelector('fieldset[name="fieldStyle"]');
      fieldset.style.border = "2px dashed blue";
      fieldset.style.backgroundColor='yellow';
   }
</script>
</head>

<body>
<h1>The fieldset name attribute</h1>

<form onsubmit="return false;">
   <fieldset name="fieldStyle">
      <label for="fname">
         First name:
      </label>
      <input type="text" 
               id="fname" 
               name="fname">
   </fieldset>
   <br>
   <button type="button" 
            onclick="changeFieldsetStyle()">
               Change fieldset style
   </button>
   <input type="submit">
</form>
</body>

</html>

Name attribute for iframe element

In this example we used name attribute with iframe element, And we made a hyperlink to html tutorial. The target of hyper link matches the name of the iframe, Hence the link will open in the iframe.

<!DOCTYPE html>
<html>

<head>
   <title>iframe name attribute</title>
</head>

<body>
   <iframe src="https://www.tutorialspoint.com" 
           name="iframe_a" 
           width = 500px 
           height = 300 px>
      <p>Your browser does not support iframes.</p>
   </iframe>
   <br><br><br>
   <a href="/html/index.htm" target="iframe_a">
            HTML tutorials
   </a>

   <p>
      Here the target of hyper link matches name of 
      iframe Hence the link will open in the iframe. 
   </p>
</body>
</html>

Name attribute for meta tag

In this example we use name attribute with meta tag to name different meta data from each other. 

<!DOCTYPE html>
<html>

<head>
   <meta name="viewport" 
         content="width=device-width">
   <meta name="description" 
         content="Free Web tutorials">
   <meta name="languages" 
         content="English, Hindi">
   <meta name="author" 
         content="John Doe">
</head>

<body>
   <h1>My Website</h1>
   <p>
      Here we used different types of meta data, 
      And to distinguish it from others we used 
      name attribute
   </p>
</body>

</html>

Name attribute for map

In this example we use name attribute with map element. Then this name is used inside usemap attribute of img element to tell image to use that particular map.

<!DOCTYPE html>
<html lang="en">

<body>
   <h1>Welcome to our interactive map!</h1>
   <p>
      Click on a region to visit the 
      respective language page:
   </p>
   <img src="/html/images/lang.jpg" 
         usemap="#langmap" 
         alt="World Map" />

   <map name="langmap">
      <area shape="rect" 
            coords="0,0,180,165" 
            alt="HTML" 
            href="html/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="180,0,375,167" 
            alt="JavaScript" 
            href="javascript/index.htm" 
            target="_blank" 
            hreflang="en" />
      <area shape="rect" 
            coords="0,166,180,338" 
            alt="PHP" 
            href="/php/index.htm" 
            target="_blank" hreflang="en" />
      <area shape="rect" 
            coords="180,165,375,338" 
            alt="ReactJS" 
            href="reactjs/index.htm" 
            target="_blank" 
            hreflang="en" />
   </map>
</body>
</html>

Name attribute for param tag

In this example we use name attribute inside param tag to mention autoplay and looping for audio element

<!DOCTYPE html>
<html>

<head>
   <title>HTML name attribute</title>
</head>

<body>
   <audio controls>
         <source src=
"https://samplelib.com/lib/preview/mp3/sample-15s.mp3" 
                 type="audio/mpeg">
         <param name="autoplay" value="true">
         <param name="loop" value="true">
   </audio>
</body>

</html>

Name attribute for object tag

In this example we name an object tag using name attribute.

<!DOCTYPE html>
<html>

<body>
   <h1>The object 'name' attribute</h1>
   <object data="html/images/html.jpg" 
           name="obj1" 
           height="150">
   </object>
</body>

</html>

Supported Browsers

Attribute Chrome Edge Firefox Safari Opera
name Yes Yes Yes Yes Yes
html_attributes_reference.htm
Print Page
Previous
Next
Advertisements