HTML Tutorial Section Five: Forms

3. Menu, Check Box, and Radio Controls

The menu control is a drop down menu with text items to choose. It is created with a <select> tag. Like all controls, the <select> tag needs a name to identify it for the cgi scripts. The value attribute is automatically set to the first menu item. The size value for the <select> tag, instead of determining the length of the box, tells the browser how many lines of possible answers will be shown. For example, size="3" will cause 3 menu items to show up vertically stacked in the control box. When there is more than one item shown, it will create a scroll bar instead of a drop down menu. The multiple attribute allows multiple answers to be selected. To create the menu items for the client to choose between, you make a series of <option> tags between the beginning and ending <select> tags. The <option> tag does not require an ending tag. Just write the tag, followed by the text you want to appear in the menu. Enter to the next line of code and write your next option. The required attribute of the <option> tag is value. This is what shows up in the information sent back to the server, not the text option outside the tag. Submenus can be created using the <optgroup> tag. Place a beginning and ending <optgroup> tag around the group of items you want together. This leaves a space between them and other menu items.

What's your favorite kind of cow? <select name="cow" size="1"> <optgroup> <option value="angus">Aberdeen-Angus <option value="Swiss">Brown Swiss <option value="Danish">Danish Red <option value="dexter">Dexter <option value="guernsey">Guernsey </optgroup> <optgroup> <option value="Holstein">Holstein <option value="Jersey">Jersey <option value="Lincoln">Lincoln Red <option value="Normande">Normande <option value="Sussex">Sussex <option value="Texas">Texas Longhorn </optgroup> </select>

What's your favorite kind of cow? Aberdeen-Angus Brown Swiss Danish Red Dexter Guernsey Holstein Jersey Lincoln Red Normande Sussex Texas Longhorn

For a true or false, on or off, yes or no question, use a check box control. This function of the <input> tag creates a small square box that can be either checked or unchecked. The type attribute for a check box is "checkbox". A special attribute for the check box is checked. The default value is "false". If it is set to true, or included but without a value (checked=""), the check box will be loaded checked. As with the other controls, the check box needs a name. You can also link a number of check boxes together. Give each <input> tag of the set the same name, and the final form sent to the server will have every checked box as an answer. If a series is linked, you need to have a value attribute in each <input> tag to identify the answers.

Check the box if you love steak: <input type="checkbox" name="steak1" checked="true"> <br><br> What kinds of steak do you lile? <br> <input type="checkbox" name="steak2" value="tenderloin">Tenderloin <input type="checkbox" name="steak2" value="tbone">T-Bone <input type="checkbox" name="steak2" value="sirloin">Sirloin <input type="checkbox" name="steak2" value="strip">New York Strip <input type="checkbox" name="steak2" value="rib">Rib <input type="checkbox" name="steak2" value="fstrip">Filet Strip <input type="checkbox" name="steak2" value="porter">Porterhouse <input type="checkbox" name="steak2" value="clup">Club

Check the box if you love steak: What kinds of steak do you like? Tenderloin T-Bone Sirloin New York Strip Rib Filet Strip Porterhouse Club

The radio button control when used properly is similar to the linked check boxes. The difference is that it allows only one of its circles to be checked at a time, and there is always one checked. Only one <input> tag with a type of radio will cause there to be one circle which can't be unchecked. The value of the type attribute should be set to "radio".

How do you like your steak?<br> <input type="radio" name="steak3" value="rare">rare <input type="radio" name="steak3" value="medrare">medium-rare <input type="radio" name="steak3" value="med">medium <input type="radio" name="steak3" value="medwell">medium-well <input type="radio" name="steak3" value="well">well

How do you like your steak? rare medium-rare medium medium-well well

4. Buttons

Two kinds of buttons can be made using the <input> tag: reset and submit. Simply make an <input> tag with the type attribute set to "submit" or "reset". These buttons don't need a name. In the value attribute write the text that you want to appear on the button. The submit button will execute the action attribute of the <form> tag. Without this button, the entire form is essentially worthless, because it can't do anything. The reset button returns all of the controls to their original settings. Another more versatile way to make these important buttons is with a <button> tag. The submit, name, and value attributes of the <button> tag need to all be set to "submit" or "reset" for it to function. The great thing about the button is that it requires a starting and ending <button> tag, and everything inside will be part of the button. You can use this to add images, different fonts, background colors, and whatever else you can think of to your buttons. The form below is not actually linked, but a real example is shown at the bottom of this page.

<form action="mailto:benbob007@hotmail.com" method="post" enctype="text/plain"> Tell us what you think of our theme. <br> <textarea name="theme" cols="30" rows="5" wrap="true"> I love cows. </textarea><br> <input type="submit" value="send it"> <input type="reset" value="try again"><br><br> <button name="submit" type="submit" value="submit" style="background:green">GO!</button> <button name="reset" type="reset" value="reset" style="background:red">STOP!</button> </form>

Tell us what you think of our theme. I love cows. GO! STOP!

5. Organizing Forms

You can use the <p> tag to organize your forms. Arrange your controls into logical groups, and then space them out into paragraphs. Remember that you never need a </p> tag. Pairs of <br> tags could also acheive that effect. This helps, but it still leaves the controls and names vertically unaligned.

Tables can help fix that. Make a small column for the questions or prompts on the left, and then in corresponding rows make the controls on the right. You may want to jump back to Section 4 to review. Try having the propmts aligned to the right in their cells, and the controls aligned to the left. This will make it easy to follow, and vertically aligned. Depending on how far apart the prompts end up from the controls, you may want the table to have thin borders to help identify which control goes with which prompt.

Forms also have a tag that works specifically for their organization. The <fieldset> and </fieldset> tags create sections of controls outlined by a gray box. You can make a title for the field by using a starting and ending <legend> tag. Put the title between the two tags. That title will show up on the upper left segment of the border created by the <fieldset>. The optimal organizational structure is a table inside each field, with paragraphs. A fully functional form with all the trimmings is shown below.