Adding a Select Menu and a Textarea - Exercise

Contact Us or call 1-877-932-8228
Adding a Select Menu and a Textarea - Exercise

Adding a Select Menu and a Textarea

Duration: 15 to 25 minutes.

In this exercise, you will add a select menu and textarea to the registration form. At completion, the form should look like this:

  1. Open Forms/Exercises/RegistrationForm.html for editing if you don't have it open already.
  2. Add the following input elements:
    • select: name and id should be "referral". Options should be:
      • "--Please choose--" with value of "0"
      • "Word of Mouth" with value of "wom"
      • "Other" with value of "other"
      • Option group with label of "Search Engine" and the following options:
        • "Google" with value of "Google"
        • "Yahoo!" with value of "Yahoo"
        • "MSN" with value of "MSN"
    • textarea: name and id should be "comments". Be sure to include cols and rows attributes.
  3. When you are done, open the page in a browser, and fill out and submit the form. You will need internet access to see the resulting page.

Solution:

Forms/Solutions/RegistrationForm3.html
---- C O D E   O M I T T E D ----
	<label for="pw">Password:</label>
	<input type="password" name="pw" id="pw" size="15">
</div>
<div>
	<label for="referral">Where did you hear about us?</label>
	<select name="referral" id="referral">
		<option value="0">--Please choose--</option>
		<optgroup label="Search Engine">
			<option value="Google">Google</option>
			<option value="Yahoo">Yahoo!</option>
			<option value="MSN">MSN</option>
			<option value="OtherSearchEngine">Other</option>
		</optgroup>
		<option value="wom">Word of Mouth</option>
		<option value="other">Other</option>
	</select>
</div>
<div>
	Gender:
	<input type="radio" name="gender" id="genderm" value="m"><label for="genderm">Male</label>
	<input type="radio" name="gender" id="genderf" value="f"><label for="genderf">Female</label>
</div>
<div>
	<label for="comments">Comments:</label><br>
	<textarea name="comments" id="comments" cols="40" rows="4"></textarea>
</div>
<div>
	<label for="terms">Click to accept our terms:</label>
	<input type="checkbox" name="terms" id="terms">
</div>
<div>
	<input type="submit" name="submitbutton" id="submitbutton" value="Register">
	<input type="reset" name="resetbutton" id="resetbutton">
</div>
</form>
</body>
</html>
Next