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.
<head><title>Id and Name Attributes</title></head>
<form name=”form1” id=”form1”
method="GET" action="http://localhost/color.php">
Pick a color: <br />
<input type ="radio" name="color" id="rbutton1"
<label for="rbutton1">Green</label>
<br />
<input type ="radio" name="color" id="rbutton2"
<label for="rbutton2">Blue</label>
<br />
<input type ="radio" name="color" id="rbutton3"
<label for="rbutton3">Yellow</label>
<br />
<br />
<input type="submit" value="Send to Server" />
Search WWH ::

Custom Search