Session 6 Examples
Simple Form | Method and Name | Email Submission | Input Tag | Select Lists | Text Area | Tab Index and Layout
To use these examples, type (or copy) the code into a new document, save as an htm file, then view in your browser. Modify the code to see what effect it has on the output. Experiment. Play.
Detailed instructions are available here
Note that each <html> block has to be saved as a separate htm file.
Simple Form
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<form action="http://www.jdhorn.com/form.asp">
<!--
action specifies where to send the data
-->
<input name="userName"><br>
<!-- be sure to specify the field name -->
<input type="submit" value="Send...">
</form>
</body>
</html>
Method and Name
<html>
<head>
<title>Method and Name</title>
</head>
<body>
<form action="http://www.jdhorn.com/form.asp" method="post" name="myForm">
<!--
You should always specify a method and name your form.
Options for method: get, post
-->
Name? <input name="userName"><br>
<input type="submit" value="Send...">
</form>
</body>
</html>
Email Submission
<html>
<head>
<title>Email Submission</title>
</head>
<body>
<form action="mailto:jim@jdhorn.com" method="post" enctype="text/plain" name="myForm">
<b>Submit via Email </b><br>
<textarea name="comment" rows="10" cols="40">Put your comment here</textarea><br><br>
<input type="submit" value="Submit Comment"> <input type="reset">
</form>
</body>
</html>
Input Tag
<html>
<head>
<title>Input Tag</title>
</head>
<body>
<h1>The Input Tag</h1>
<form action="http://www.jdhorn.com/form.asp" method="post" name="myForm">
<!-- various examples of input tags... -->
<b>Text Control</b><br>
<input name="textControl" type="text" value="default content" size="20" maxlength="20"><br><br>
<b>Radio Controls</b><br>
<!--
radio controls - only one can be selected
Note that the name is the same for all...
-->
<input name="fruit" type="radio" value="apple">Apple<br>
<input name="fruit" type="radio" value="kiwi">Kiwi<br>
<input name="fruit" type="radio" value="orange">Orange<br>
<input name="fruit" type="radio" value="banana">Banana<br>
<input name="fruit" type="radio" value="pineapple">Pineapple<br>
<input name="fruit" type="radio" value="tomato">Tomato<br><br>
<b>Checkboxes</b><br>
<!-- checkbox controls - many can be selected -->
<input name="vegetable" type="checkbox" value="potato" checked>Potato<br>
<input name="vegetable" type="checkbox" value="carrot">Carrot<br>
<input name="vegetable" type="checkbox" value="cabbage">Cabbage<br>
<input name="vegetable" type="checkbox" value="broccoli">Broccoli<br>
<input name="vegetable" type="checkbox" value="pineapple">Pineapple<br>
<input name="vegetable" type="checkbox" value="tomato">Tomato<br><br>
<b>Password</b><br>
<input type="password" name="password"><br><br>
<b>File</b><br>
<input type="file" name="fileUpload"><br><br>
<b>Hidden</b><br>
<input type="hidden" name="seeMe" value="no"><br><br>
<input type="submit" value="Send Choices">
<input type="reset" value="Reset Form">
<input type="button" value="Click Me" onClick="alert('You clicked me')">
</form>
</body>
</html>
Select Lists
<html>
<head>
<title>Select Lists</title>
</head>
<body>
<form action="http://www.jdhorn.com/form.asp" method="post" name="myForm">
<select name="fruit">
<option selected="selected">Select...</option>
<option>Apple</option>
<option>Banana</option>
<option>Peach</option>
<option>Pear</option>
<option>Mango</option>
</select><br><br>
<select name="vegetables" size="3" multiple="multiple">
<!-- size allows us to specify how big the list will appear -->
<option value="orange">Carrot</option>
<!-- value is the data that's sent -->
<option value="green">Broccoli</option>
<option value="white">Onion</option>
<option value="red">Cabbage</option>
</select><br><br>
<input type="submit" value="Send Choices">
</form>
</body>
</html>
Text Area
<html>
<head>
<title>Text Area</title>
</head>
<body>
<form action="http://www.jdhorn.com/form.asp" method="post" name="myForm">
<b>The text area</b><br>
<textarea name="comment" rows="10" cols="40">Put your comment here</textarea><br><br>
<input type="submit" value="Submit Comment"> <input type="reset">
</form>
</body>
</html>
Tab Index and Layout
<html>
<head>
<title>Tab Index and Layout </title>
</head>
<body>
<!-- This example illustrates both tab index and layout in tables -->
<!-- begin registration form -->
<form action="http://www.jdhorn.com/form.asp" method="post" name="myForm">
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<td colspan="2"><b>Registration Form</b></td>
</tr>
<tr>
<td align="right">Name</td>
<td>
<input type="text" name="name" tabindex="1">
</td>
</tr>
<tr>
<td align="right">Password</td>
<td>
<input name="password" type="password" tabindex="2">
</td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
</tr>
<tr>
<td align="right">Email Address</td>
<td>
<input name="email" type="text" tabindex="3">
</td>
</tr>
<tr>
<td align="right">Date of Birth<br>
<font size="-2">(mm/dd/yyyy)</font></td>
<td>
<input name="dob" type="text" tabindex="4">
</td>
</tr>
<tr>
<td align="right">Gender</td>
<td>
<input name="gender" type="radio" value="male" tabindex="5">
Male<br>
<input name="gender" type="radio" value="female" tabindex="6">
Female</td>
</tr>
<tr>
<td align="right"> </td>
<td>
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset">
</td>
</tr>
</table>
</form>
<!-- end registration form -->
</body>
</html>