HTML Forms - Checkboxes
(Page 3 of 6 )
Checkboxes allow the user to select one or more values (or none really). Here they are in code:
<html>
<body>
<form action="">
<p> Are you a nerd? Check all that apply</p>
I wear glasses:
<input type="checkbox" name="nerd" value="Glasses" />
<br />
I have been know to wear suspenders:
<input type="checkbox" name="nerd" value="Suspenders" />
<br />
I do have a pocket protector in my possession:
<input type="checkbox" name="nerd" value="Pocket Protectors" />
</form>
</body>
</html>
The result:
Are you a nerd? Check all that apply
Again you will note that each checkbox has the same name ("nerd"). If they do not, your program will not see them as part of the same set and the results of your form will be skewed.
Drop-Down Boxes
Drop-down boxes allow a user to select from a list of values. Here it is in code:
html>
<body>
<form action="">
<select name="Corny Villain Names">
<option value="Dr. Doom">Dr.Doom</option>
<option value="Dr. Octopus">Dr. Octopus</option>
<option value="Chiropractor Payne" selected="selected">Chiropractor Payne</option>
<option value="Nurse Nukem">Nurse Nukem</option>
</select>
</form>
</body>
</html>
The above code creates a drop down list of items. You set the values in the list with the <option value> tag. You will also note the selected attribute, which sets the default item in the list. The following is the result of the above code:
Textarea
Users can enter multiple lines of text in a textarea field. In fact, they can enter an unlimited amount of text in the textarea. Here is how you code it:
<html>
<body>
<textarea rows="10" cols="30">
This is some text I am writing as an example. Normally the user writes in here. Once a certain amount of space is taken up, scroll bars will appear on the side of the textarea, allowing the user to scroll up and down.
</textarea>
</body>
</html>
Next: Buttons >>
More HTML Articles
More By James Payne