Articles → HTML → Difference Between Id And Name In HTML

Difference Between Id And Name In HTML

In this article, we will discuss the difference between name and id attributes in HTML.

Difference

The "name" attribute (contrary to the "id" attribute) sends form data in the query string when the form is submitted.

Example

Consider an example, where we have a textbox, radio buttons, and a submit button (see the following code sample)

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body>
        <form>
            <input type="text" name="test" value="1" />
            <input type="radio" name="Gender" value="Male" />Male
            <input type="radio" name="Gender" value="Female" /> Female
            <input type="submit" value="Click Me" /> </form>
    </body>

</html>

Try It

This is how the above HTML will be displayed in the browser.

Picture showing the sample web page displayed on the browser

Click to Enlarge

Now select the ‘Male’ radio button and click on the ‘Click Me’ button. Now observe your query string.

Picture showing the value of selected radio button passed as querystring in the URL

Click to Enlarge

In the case of the textbox, the value of the textbox is passed in the query string whereas, in the case of the radio button, the selected option (‘Male’ in this case) is passed in the query string.

Posted By -	Karan Gupta

Posted On -	Thursday, July 13, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**