name

The name attribute in HTML is used to assign an identifier to form elements, ensuring that their data is included in the form submission sent to the server.

name Attribute

The name attribute in HTML assigns a unique identifier to an element, specifically for form elements like <input>, <textarea>, and <select>. This attribute ensures that the data associated with the element is sent to the server when the form is submitted. For example, with <input type="text" name="username">, the value entered into the input field is tied to the name "username" when submitted.

Syntax

index.html

<element name="value">

Examples

Two buttons sharing the same name but submitting different values:

The button name attribute

index.html

<h1>The button name attribute</h1>
<form>
  Choose your favorite subject:
  <button name="subject" type="submit" value="HTML">HTML</button>
  <button name="subject" type="submit" value="CSS">CSS</button>
</form>

Form

Form with name attribute:

Form with name attribute

index.html

<h1>Form with name attribute</h1>
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="firstname" ><br><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lastname"><br><br>
  <input type="submit" value="Submit">
</form>

`<fieldset>`

The <fieldset> with name attribute:

::atter-name ::

index.html

<h1>The fieldset name attribute</h1>
<form method="get">
<fieldset name="personalia">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
</fieldset>
<br>
<button type="button" onclick="form.personalia.style.backgroundColor='yellow'">Change background color of fieldset</button>
<input type="submit">
</form>

`<iframe>`

An <iframe> that serves as the target for a hyperlink:

iframe

https://institute.qarpeo.com

index.html

<h1>iframe</h1>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<a href="https://institute.qarpeo.com" target="_blank">https://institute.qarpeo.com</a>

`<input>`

An HTML form containing three <input> elements: two text fields for user input and a submit button to send the data.

Form input

index.html

<h1>Form input</h1>
<form>
  <label for="fullname">First name:</label><br>
  <input type="text" name="fullname"><br>
  <label for="email">Email:</label><br>
  <input type="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

`<map>`

An image <map> with interactive clickable regions:

Img with map

::atter-coords ::

index.html

<h1>Img with map</h1>
<img src ="img.jpg" width="145" height="126" alt="Laptop"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

This code defines an image with designated areas that users can click to navigate to different links.

`<meta>`

The name attribute is used in the <meta> tag to specify details such as the description, keywords, and author of an HTML document.

My Website

Some text...

index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML5,CSS,JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>My Website</h1>
<p>Some text...</p>

</body>
</html>

These <meta> tags help improve SEO and provide relevant information about the webpage.

`<object>`

An <object> element that includes a name attribute:

The object element

index.html

<h1>The object element</h1>
<object data="movie.mp4" type="video/mp4" width="640" height="360"></object>

The name attribute assigns an identifier to the object, which can be useful for scripting or form submissions.

Output

Performing a calculation and displaying the result in an <output>element:

::ele-output ::

index.html

<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>

`<select>`

A <select> element with a name attribute:

index.html

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

`<textarea>`

A <textarea> element with a name attribute:

index.html

<form>
  <textarea name="comment">Enter text here...</textarea>
  <input type="submit">
</form>

This name attribute allows the text area’s data to be sent when submitting a form.

Values

name
String value: The name of the element.

Applies To

The name attribute can be used on the following HTML elements:

<input> <select> <textarea> <button> <iframe>

Conclusion

The name attribute in HTML is essential for linking form data to the server during submission, ensuring that the values are properly identified and processed. It is used across various elements like <input>, <select>, and <textarea>. By assigning unique names, developers can manage and capture user inputs efficiently in forms.

lang

The lang attribute in HTML specifies the language of an element's content, aiding browsers and search engines in accurately processing and displaying text based on its linguistic context.

nonce

The HTML nonce attribute provides a unique token for <script> or <style> elements, enhancing security by allowing only authorized content to be executed or applied.