What is use or difference between name and value attributes in option tag?

HTML & CSS
1 
<fieldset>
			<legend>Select your programming language </legend>
		<select name="Programming language" id="droplist" >
			<optgroup label="Computer Lang">
				<option value="java">JAVA</option>
				<option name="c++">C++</option>
				<option value="C#">C#</option>
			</optgroup>
			<optgroup label="Internet lang">
				<option name="HTML" selected>HTML</option>
				<option value="CSS">CSS</option>
				<option name="php">PHP</option>
			</optgroup>
		</select> <br>
		</fieldset>

In the above HTML code, I am creating a drop-down list using <select> tag…
So in the <option> tag, what are the uses of ‘name’ and ‘value’ attributes and what are the difference between them?
And how these two attributes are used? I want to know there implementation too…

2

The value is a valid attribute for the option tag while the name attribute isn’t. The name attribute belongs on the select tag.

When you reference the select tag (either by name or id) you can then get its value or text from whichever option is selected using JavaScript and can also get the selected value in code on the server (by referencing the select by name)…

For example in JavaScript:

document.getElementById(‘droplist’).value - gets the value from the value attribute of whatever option is selected
document.getElementById(‘droplist’).text - gets the display text associated with whatever option is selected.
document.getElementsByName(‘Programming language’)[0].value - is an alternative way to reference the value attribute

In PHP:

$_POST[‘Programming language’] - refers to the value from whichever option was selected at the time the form was submitted.

3

the name field denotes the name of the variable stored in the database(it could be mysql , iis , oracle) , but the values is the values stored in the particular name field.

4

Yes but the select is the field that gets passed to the server, not the individual options. Giving a name to individual options is meaningless.

5

Siddarth:


<fieldset>
  <legend>Select your programming language </legend>
  <select name="Programming_language" id="droplist" >
    <option value="1">JAVA</option>
    <option value="2">C++</option>
    <option value="3">C#</option>
    <option value="4" selected>HTML</option>
    <option value="5">CSS</option>
    <option value="6">PHP</option>
  </select>
</fieldset>

If your backend wants to receive numbers, or some other code, while showing humans a human-readable option, the value is not required to match the text inside the option tags.

When the form is submitted, if the user chose HTML, the
name=“Programming_language” should be paired with “4” in your backend.

Felgall showed that with Javascript you can get either one (the text “HTML” or the value “4”), but the value is what you want your backend to get when the form is submitted. This is nice when you want to show an option with spaces or weird characters but your backend cannot have those, for example.

6