HTML

Comprehensive Concepts and Techniques

Shelly Cashman Series
Instructor: Erwin Donavan Ong

3 components of a web
page form
Input controls
A <form> tag, which contains the
necessary information to process the
form
A submit button

Input Controls
An input control is any type of input
mechanism on a form
A data input control is either a radio
button, a check box, a Submit button, a
Reset button, or a selection menu
A text input control is either a text box, a
textarea box, or a password text box

Input Controls

Text control
A text control creates a text box that is
used for a single line of input.
2 attributes:
1. size determines the number of
characters that display on the form
2. maxlength specifies the maximum
length of the input field

Password control
A password control also creates a text box
used for a single line of input except that
the characters entered into the field can
display as asterisks or bullets.

Radio control
A radio control limits the web page visitor
to only one choice from a list of choices.

Checkbox control
A checkbox control allows a web page
visitor to select more than one choice
from the list of choices.

Select control
A select control creates a selection menu
from which the visitor selects one or
more choices. (drop down menu)

Text area control

The text area control creates a field that
allows multiple lines of input.
2 attributes:
1. rows specifies the number of rows
2. cols specifies the number of columns

Fieldset control
A fieldset control helps to group related
form elements together. This makes the
form easier to read and complete.

Each input
one or two

control has
attributes:

1. Name the name attribute identifies

the specific information that is being
sent when the form is submitted for
processing.
2. Value all controls except textarea
have a value attributes. This is the data
that the visitor enters.

HTML Tags Used to Create

Forms

<form> </form>
attributes
action

URL for action

completed by the user

method

HTTP method (post)

target

Location at which the

resource will display

<input> attributes
type

Type of input control (text,

password, checkbox, radio,
submit, reset, file, hidden, image,
button)

name

Name of the control

value

Value submitted if a control is

selected ( required for radio and
checkbox controls)

checked

Sets a radio button to a checked

state(only one can be checked)

disabled

Disables a control

<input> attributes
readonly

Used for text passwords

size

Number of characters that display

on the form

maxlength

Maximum number of characters

that can be entered

src

URL to the location of an image

stored on the server

alt

Alternate text for image control

tabindex

Sets tabbing order among control

elements

<legend></legend>
attributes
align

Indicates how a legend

should be aligned

<select></select>
attributes
name

Name of the element

size

Number of options visible when the

web page is first opened
Allows for multiple selections in
select list
Disables a control

multiple
disabled
tabindex

Sets the tabbing order among

control elements

<option></option>
attributes
selected

Specifies whether an option is

selected

disabled

Disables a control

value

Value submitted if a control is

selected

<textarea></textarea>
attributes
name

Name of the control

rows

Width in number of rows

cols

Height in number of columns

disabled

Disables a control

readonly

Used for text passwords

tabindex

Sets the tabbing order among

control elements

In creating a form, the first step is to begin

with a <form> tag and ends with a
</form> tag.
Example:
<form method=post action=mailto:erwindonavan@yahoo.com>

Adding text boxes

Example:
<input name=address type=text
size=25 maxlength=25>

Adding check boxes

Example:
<p>Select what you want:
<br />
<input name=pictype type=checkbox value=cross>Cross Hatch
<input name=pictype type=checkbox value=fullcolor>Full Color
<input name=pictype type=checkbox value=ink>Ink Wash
</p>

Adding a Selection Box

Example:
<br />Credit card type:
<select name=payment>
<option>Visa</option>
<option>MasterCard</option>
<option>American Express</option>
</select>

Adding more advanced

selection menus
Simple selection menus
The size attribute value set to 3 wherein
3 items were displayed
Multiple choices can be made
One choice selected as default

4 sample variations:
<p>Sample 1:

<p>Sample 2:

<select name=color>

<select name=color size=3>

<option>Red</option>

<option>Red</option>

<option>Blue</option>

<option>Blue</option>

<option>Yellow</option>

<option>Yellow</option>

<option>Black</option>

<option>Black</option>

<option>White</option>

<option>White</option>

</select>

</select>

</p>

</p>

4 sample variations:
<p>Sample 3:

<p>Sample 4:

<select name=color multiple>

<select name=color multiple>

<option>Red</option>

<option>Red</option>

<option>Blue</option>

<option>Blue</option>

<option>Yellow</option>

<option>Yellow</option>

<option>Black</option>

<option selected>Black</option>

<option>White</option>

<option>White</option>

</select>

</select>

</p>

</p>

Adding radio buttons

Example:
<p>
Would you like to receive our email newsletter?
<input name=newsletter type=radio value=yes>Yes
<input name=newsletter type=radio value=no>No
</p>

Adding a Textarea
Example:
<p>Describe yourself:
<br /><textarea name=describeyourself
rows=6 cols=50></textarea></p>

Submit and Reset button

Example:
<p><input type=submit value=Submit>
<input type=reset value=Reset>
</p>

Form Groupings
Example:
<fieldset><legend align=left>Information</legend>
.
.
.
.
.
</fieldset>

Case Study # 6
Create a web page that sell items and provide the visitor
with an order form.
Minimum number of items on sale is 10.
Each item should have a picture and should contain
detailed information and description.
Use as many input controls as possible.
Save your file on drive Z:
Surname_firstname_cs6.html

Format
(Hard Copy &
Computerized)

Title Page
Case Study Question
Source Code
Screen Shots for every html file
Web Structure
Discussion
Note: B&W only.