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>.
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.
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.
<tagname name="name">
| name | Description |
|---|---|
| name |
String value. The name of the element. |
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. |
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.
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.
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.
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.
A name attribute on a <map> element.
The name is used by the image to reference the image map.
<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.
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.
A name attribute on an <output> element.
The name is used as a reference in the form oninput event.
<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.
A name attribute on an <fieldset> element.
The name represents all input elements of the fieldset.
<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.
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.
<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.
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.
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 |
