Difference between id and name attributes in HTML

The name is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different ids, but the same name. When submitted, there is just the one value in the response – the radio button you selected.

Example ( name attribute with form submit )

Simple Form :

<!DOCTYPE HTML>
<html>
<head>
	<title>test</title>
</head>
<body>
	<form name="form1" method="post" action="abc.php">
		<input type="text" name="name" id="name12"> 
		<input type="text" name="age" id="age12"> 
		<input type="submit" name="submit" id="submit" value="Submit">
	</form>
</body>
</html>

Target page abc.php :

<!DOCTYPE HTML>
<html>
<head>
    <title>abc.php</title>
</head>
<body>
    <?php
    echo $_POST['name']; // no need for ID, only name
    echo $_POST['age']; // no need for ID, only age
    ?>
</body>
</html>

Example for ID usage ( with javascript )

<!DOCTYPE HTML>
<html>
<head>
    <title>test</title>
        <script type="text/javascript">
		function fun1()
		{
	        // only ID, no need of name 
	        alert(document.getElementById("name12").value);
		}
        </script>
</head>
<body onload="fun1()">
    <form>
        <input type="text" name="name" id="name12" value="smith">
        <input type="text" name="age" id="age12">
        <input type="submit" name="submit" id="submit" value="Submit">
    </form>
</body>
</html>