HTML name Attribute

The name attribute on an element assigns a name to that element. This name is used during form submission and as a reference for other purposes. Elements that accept this attribute include <input>, <select>, <textarea>, <button>, <iframe>, <map>, <meta>, <output>, <fieldset>, <object>, and <param>.

Example

#

Two <input> tags with name attributes.
The input fields will be included during form submission.





<form action="/tutorial/action.html">
  <label for="firstname">First name</label><br />
  <input type="text" id="firstname" name="firstname"><br />
  <label for="lastname">Last name</label><br />
  <input type="text" id="lastname" name="lastname"><br />

  <input type="submit" value="Submit">
</form>

For additional details see our HTML input name Reference.


Using name

The name attribute assigns a name to the element.

Unlike id, the name does not have to be unique across the page.

This attribute can be used as a reference by JavaScript, HTML, CSS, and in submitted form-data.

Note:   Input elements must have a name to participate in form submission.


Syntax

<tagname name="name">

Values

#

name Description
name String value. The name of the element.

Elements that accept name

The following elements accept the name attribute.

Elements Description
<input> Specifies an input field -- see example above
<select> Creates dropdown field.
<textarea> Specifies multi-line text input field.
<button> Creates a clickable button.
<iframe> Displays another page inside the frame.
<map> Creates an image map.
<meta> Adds metadata content to the web page.
<output> Displays the result of a calculation.
<fieldset> Groups related input fields.
<object> Embeds an object in the page.
<param> Sets an object parameter.

<select> with name

A name attribute on a <select> element.
The selected value of the dropdown is included during form submission.


<form action="/tutorial/action.html">
  <select name="size">
    <option value="">-- Select Size --</option>
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
  </select><br />

  <button type="submit">Submit</button>
</form>

For additional details see our HTML select name Reference.


<textarea> with name

A name attribute on a <textarea> element.
The textarea value (the text) is included during form submission.



<form action="/tutorial/action.html">
  <label>Enter your message</label> <br />
  <textarea name="message" rows="3" cols="55">
  </textarea>

  <br />
  <input type="submit" value="Submit">
</form>

For additional details see our HTML textarea name Reference.


<button> with name

Three <button> elements with name attributes.
Clicking a button submits the button value to the form-handler.

<form action="/tutorial/action.html">
  <button name="color" type="submit" value="Red">Red</button>
  <button name="color" type="submit" value="Blue">Blue</button>
  <button name="color" type="submit" value="Green">Green</button>
</form>

For additional details see our HTML button name Reference.


<iframe> with name

A name attribute on an <iframe> element.
Clicking the Vincent Van Gogh link opens the page in the named iframe.

<a href="https://www.wikipedia.org/wiki/Vincent_van_Gogh" 
   target="frame">Vincent Van Gogh</a> <br/> <br/>

<iframe name="frame" style="width:100%;height:450px;"
        src="https://en.wikipedia.org/wiki/Main_Page"></iframe>

For additional details see our HTML iframe name Reference.


<map> with name

A name attribute on a <map> element.
The name is used by the image to reference the image map.

Computer Computer Keyboard Mouse
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">

<map name="computermap">
  <area shape="rect" coords="253,142,16,2" alt="Computer" href="javascript:alert('Computer screen was clicked');">
  <area shape="rect" coords="262,218,0,156" alt="Keyboard" href="javascript:alert('Computer keyboard was clicked');">
  <area shape="circle" coords="267,234,22" alt="Mouse" href="javascript:alert('Computer mouse was clicked');">
</map>

For additional details see our HTML map name Reference.


<meta> with name

A name attribute on four <meta> tags.
The name identifies the content of the metadata element.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML Tutorial for front-end designers and developers. ">
<meta name="keywords" content="HTML, CSS, Bootstrap">
<meta name="author" content="DoFactory">

For additional details see our HTML meta name Reference.


<output> with name

A name attribute on an <output> element.
The name is used as a reference in the form oninput event.



The value is 25
<form oninput="result.value = slider.value">
  <input type="range" id="slider" value="25"> 
  <br /><br />
  The value is <output name="result" for="slider">25</output>
</form>

For additional details see our HTML output name Reference.


<fieldset> with name

A name attribute on an <fieldset> element.
The name represents all input elements of the fieldset.

Customer Information


<form action="/tutorial/action.html">
  <fieldset name="customer-info">
    <legend>Customer Information</legend>
  
    <label>Name</label>
    <input type="text" name="name"><br />
    
    <label>Age</label>
    <input type="text" name="age"><br />
    
    <label>Email</label>
    <input type="text" name="email"><br />
  
    <input type="submit">
  </fieldset>
</form>

For additional details see our HTML fieldset name Reference.


<object> with name

A name attribute on an <object> element. The name represents the browsing context which is like a mini browser; it has session history, a Document object, and more -- much like a browser does.

PDF cannot be displayed.
<object data="/media/sample.pdf" type="application/pdf"
        style="width:100%;height:500px;" name="sample-pdf">
   PDF cannot be displayed.
</object>

For additional details see our HTML object name Reference.


<param> with name

A name attribute on a <param> element.
This attribute represents the name of the parameter.

<object data="/media/contract.pdf" style="width:100%;height:500px;">
   <param name="type" value="application/pdf" />
</object>

For additional details see our HTML param name Reference.


Browser support

Here is when name support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like



Guides