HTML and CSS Reference
In-Depth Information
Normally the
id
and
name
attribute should match but this is not always possible. For
example, when creating radio buttons, one name suffices for all the buttons, because
only one of the buttons can be selected, but if you use the
id
attribute, each
id
has to be
unique as shown here:
<input type="radio" name="color" id="rbutton1" value="red" />
<input type="radio" name="color" id="rbutton2" value="green" />
<input type="radio" name="color" id="rbutton3" value="yellow" />
In Example 11.4 the radio buttons are named using the same name, but with different
IDs. After the user clicks a radio button, based on his or her choice, the
name/value
pairs
from the form are collected by the browser and sent to the server-side program (see Fig-
ure 11.9). If the method attribute is GET, the name/value pairs will be assigned to a
query string and if the method attribute is assigned POST, the pairs will be sent in an
HTTP message body. When the PHP server script called color.php is executed, it receives
the name/value pair “color=green”. The PHP program can process the data, send it to a
file or database, send it in an e-mail, respond to the user, and so on. The output for the
server program is shown in Figure 11.10. Notice that the
id
attribute values are not sent
to the server, but are retrieved via the
getElementById()
methods so that JavaScript can
utilize them.
Name
attributes do not have to be unique;
id
attributes do.
EXAMPLE
11.4
<html>
<head><title>Id and Name Attributes</title></head>
<body>
<big>
1
<form name=”form1” id=”form1”
method="GET" action="http://localhost/color.php">
Pick a color: <br />
2
<input type ="radio" name="color" id="rbutton1"
value="green"/>
<label for="rbutton1">Green</label>
<br />
<input type ="radio" name="color" id="rbutton2"
value="blue"/>
<label for="rbutton2">Blue</label>
<br />
<input type ="radio" name="color" id="rbutton3"
value="yellow"/>
<label for="rbutton3">Yellow</label>
<br />
<br />
3
<input type="submit" value="Send to Server"
/>
4
</form>
Continues
