Web Design Tutorial - HTML, JavaScript, and Style

FORMS

<form name = "___" action = "script file goes here" method = "get or post"></form>

Enable web pages to get information from the user.
Does not appear on page ... used to surround FORM ELEMENTS.
Often used in conjunction with a script to process the info.
Usually form tag should contain an action attribute and a method to post.
FORM ELEMENTS should be between opening and closing form tags
name attribute not required but may be used if multiple forms in document

INPUT-TYPE FORM ELEMENTS

<input type = "_____" name = "___" value = "_____" id = "____"/>

name identifies the item
value indicates what the user entered or selected
id is used in script to refer to the element

Type	Description	Notes
text	FirstName:	name = "first" value = "JoBob" value is text in box
checkbox	Send Info	name = "sendinfo" value = "send" value not displayed if value not specified sends "on" Optional checked indicates if checked
radio	2002 2003	For 2002, name = "year" For 2002, value = "2002" For 2003, name = "year" For 2003, value = "2003" Only one selected at a time name is the same for all in set value indicates which user selects and is NOT displayed optional checked indicates selected
submit		When clicked, the contents of the form sent to another file depending on form's action attribute value = "Submit Info" name = "submitinfo"
reset		Resets the elements in the form
password		Like text element but used for entering passwords
file		Used for selecting a file
button		Can be customized. This button has been programmed to display info for other Elements on this page. name = "DisplayInfo" value = "Display" value appears on face

SELECT-TYPE FORM ELEMENTS

<select style = "width: 70px; height: 50px" name = state size = "3">
<option value = "MD" selected>MD</option>
<option value = "PA">PA</option>
</select>

For combo-box style, do not specify size.
Value depends on what user selects.
In examples below, name of combobox = "cbostate" and name of listbox = "lststate"

	Description	Notes
ComboBox	State:	-
ListBox		-

TEXT AREA

<textarea cols = "25" rows = "10" name = "text" id = "txtarea">Default text here</textarea>

EXAMPLE

Font: 8pt 12pt 20pt 24pt Width: Min. 50% 75% 100%

PRACTICE

1. Experiment with the example above:

Add a combo box with three items.
Add a textarea box.

2. Create a page with three radio buttons. Each button should represent a color. Ensure that the user can select only one radio button at a time.

3. Create a page that meets the following requirements:

Has a textbox for entering your name.
Has a textbox for entering your e-mail address.
Has a combo-box for selecting a course. You should have at least three courses in the combo-box.
Has at least three checkboxes. Each checkbox should be for a different complaint.
Has a textarea box for entering comment.
Has a button for submitting info.
Has a button for resetting all info.
Each item should be appropriately labelled as shown.

Exercise 2 screen shot

3. How can you design the page in #3 so that the form elements and descriptions are aligned?

4. Experiment with a Web Design tool.

Add a form to a page.
Insert three radio buttons for three different colors. Ensure that only one can be clicked at a time.
Make one of the radio buttons checked by default.
Insert a reset button.
Experiment with the other elements and add several to the form.

SELF-QUIZ