Chapter 9. Forms
9.3. A Simple Form Example
<html>
<body>
<form method=POST action=”http://www.kumquat.com/demo”&gt;
Name:
<input type=text name=name size=32 maxlength=80>
<p>
Sex:
<input type=radio name=sex value=”M”> Male
<input type=radio name=sex value=”F”> Female
<p>
Income:
<select name=income size=1>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
<p>
<input type=submit>
</form>
</body>
</html>

93

9.4. Using Email to Collect Form Data
<html>
<body>
<form method=POST action=”mailto:chuckandbill@oreilly.com”
enctype=”text/plain”
onSubmit=”window.alert(‘This form is being sent by email, even
though it may not appear that anything has happened…’)”>
Name:
<input type=text name=name size=32 maxlength=80>
<p>
Sex:
<input type=radio name=sex value=”M”> Male
<input type=radio name=sex value=”F”> Female
<p>
Income:
<select name=income size=1>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
<p>
<input type=submit>

</form>
</body>
</html>

94

9.5.2. Checkboxes
<html>
<body>
<form>
What pets do you own?
<p>
<input type=”checkbox” name=”pets” value=”dog” /> Dog
<br />
<input type=”checkbox” checked=”checked” name=”pets” value=”cat” /> Cat
<br />
<input type=”checkbox” name=”pets” value=”bird” /> Bird
<br />
<input type=”checkbox” name=”pets” value=”fish” /> Fish
</p>
</form>
</body>
</html>

952

9.8.1.2. The size attribute
<html>
<body>
<form>
What pets do you have?
<select name=”pets” size=”3″ multiple=”multiple”>
<option>Dog</option>
<option>Cat</option>
<option>Bird</option>
<option>Fish</option>
</select>
</form>
</body>
</html>

9812

9.8.3. The <optgroup> Tag
<html>
<body>
<form>
<select name=state>
<optgroup label=Northeast>
<option>Maine
<option>New Hampshire

</optgroup>
<optgroup label=South>
<option>Georgia
<option>Florida

</optgroup>

</select>
</form>
</body>
</html>

983

9.9.6. The disabled and readonly Attributes
<html>
<body>
<form>
Name:
<input type=text name=name size=32 maxlength=80 readonly>
<p>
Sex:
<input type=radio name=sex value=”M” disabled> Male
<input type=radio name=sex value=”F” accesskey=”f”> Female
<p>
Income:
<select name=income size=1 disabled>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
<p>
<input type=submit disabled>
</form>
</body>
</html>

996-png

9.10.2.2. The <legend> tag
<html>
<body>
<form>
<fieldset>
<legend>Personal information</legend>
<label>Name:<input type=”text” /></label>
<label>Address:<input type=”text” /></label>
<label>Phone:<input type=”text” /></label>
</fieldset>
</form>
</body>
</html>

91022-png

9.11.5. Good Form, Old Chap
<html>
<body>
<form method=POST action=”http://www.kumquat.com/demo”&gt;
<table border=0>
<tr valign=top>
<td align=right>Name:</td>
<td align=left><input type=text name=name size=32 maxlength=80>
</td>
</tr>
<tr valign=top >
<td align=right>Sex:</td>
<td align=left>
<input type=radio name=sex value=”M”> Male <br>
<input type=radio name=sex value=”F”> Female
</td>
</tr>
<tr valign=top >
<td align=right>Income:</td>
<td align=left>
<select name=income size=1>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
</td>
</tr>
<tr valign=top>
<td colspan=2 align=center>
<input type=submit value=”Submit Query”>
</td>
</tr>
</table>
</form>
</body>
</html>

9115-png