HTML name Attribute

HTML name Attribute: The HTML name attribute is used to specify that the form-data should not be validated when submitting the form. It can be applied on <button>, <fieldset>, <form>, <iframe>, <input>,<map>, <meta>, <object>, <output>, <param>, <select>, <textarea>. This name attribute can be used to reference the element in a JavaScript. For iframe element it can be used to target a form submission.

HTML name Attribute

And for the map element, the name attribute is associated with the <img>‘s usemap attribute and creates a relationship between the image and the map. In the meta element, the name attribute specifies a name for the information/value of the content attribute.

For the param element, the name attribute is used together with the value attribute to specify parameters for the plugin specified with the <object> tag.

Browser Support

This attribute is supported by the following browsers:

  • Chrome
  • Firefox
  • Internet Explorer
  • Safari
  • Opera

Example: for <button> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="HTML">HTML</button>
<button name="subject" type="submit" value="CSS">CSS</button>
</form>
</body>
</html>

Output:

HTML name attribute button element

Example: for <fieldset> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
<fieldset name="personalia">
  Name: <input type="text" name="username"><br>
  Email: <input type="text" name="usermail"><br>
</fieldset>
<button type="button" onclick="form.personalia.style.backgroundColor='orange'">Change background color of fieldset</button>
<input type="submit">
</form>
</body>
</html>

Output:

HTML name attribute fieldset element

Example: for <form> element

<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit() {
    document.forms["myForm"].submit();
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="formSubmit()" value="Send form data!">
</form>
</body>
</html>

Output:

HTML name attribute form element

Example: for <iframe> element

<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" name="iframe_a">
</iframe>
<a href="https://tutorials.freshersnow.com/" target="iframe_a">tutorials.freshersnow</a>
</body>
</html>

Output:

HTML name attribute iframe element

Example: for <input> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  Name: <input type="text" name="fullname"><br>
  Email: <input type="text" name="email"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Output:

HTML input element

Example: for <map> element

<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>

Output:

HTML map element

Example: for <meta> element

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Freshersnow tutorials">
  <meta name="keywords" content="HTML5,CSS,JavaScript">
  <meta name="author" content="Joseph">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Welcome</h1>
<p>Hello world!!</p>
</body>
</html>

Output:

HTML meta element

Example: for <object> element

<!DOCTYPE html>
<html>
<body>
<object width="400" height="400" data="helloworld.swf" name="obj1">
</object>
</body>
</html>

Example:for <output> element

<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</body>
</html>

Output:

HTML output element

Example:for <param> element

<!DOCTYPE html>
<html>
<body>
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
</body>
</html>
 Example for <select> element:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<select name="Languages">
  <option value="Telugu">Telugu</option>
  <option value="Hindi">Hindi</option>
  <option value="Marathi">Marathi</option>
  <option value="Bengali">Bengali</option>
</select>
<input type="submit">
</form>
</body>
</html>

Example: for <textarea> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<textarea rows="4" cols="50" name="comment">
Enter text here...</textarea>
<input type="submit">
</form>
</body>
</html>

Output:

HTML textarea element