HTML ll

Cyndi Hageman

Forms

Overview Method to collect and process user input and

to formulate personalized replies. Built using HTML/XHTML on the client side Processed on the server side using server

software Can be dynamic – we can capture the client

side events (a click for example) and change our form accordingly

The Form Tag

<form></form> Attributes

Action – required tag that tells the browser what URL to send the form to.

Method – how do you want to send your data

Get – default – sends the data by appending the “Action” url with the form data

Post – contacts the server (defined in the “Action” attribute, then sends the data

When to use Method=“GET”

Form is very short No concerns about the security of

the data in the form If you do not know how to write

server side applications

When to use Method=“POST”

Long forms with a lot of data Security – POST data is encrypted

and safer to use when sending sensitive data (e.g. SSN)

When you have a server side forms processing application or are comfortable writing your own server side application.

The Form tag

Attributes Name or id – a unique string that

identifies that particular form. You can use both.

Target – this can be used if you would like the URL in the Action attribute to open into a new window.

Form Tag Example

<form name=“form1” id = “form1” Method = “POST” Action = “processform.asp”>

</form>

Input Tags

Text Name or id – used to identify the

textbox. You can use both Value – this would be a default value

you want the form to have. It can be left blank.

Size – this will determine how big the size of the text box is

Maxlength – determines the maximum number of characters allowed in the box

Text Example

<input type=“text” name = “txtName” id = “txtName” size = 40 maxlength = 40 value = “” />

Input Tags

Button Name or id – used to identify the form

element. You can use both. Value – this is what you want displayed

as text on the button onclick – determines what will be done

when the button is clicked. Note: there are several events that can be captured, onclick is one example

Button tag

<input type = “button” name=“btnYes” id = “btnYes” onclick=“javascript:alert(‘You clicked the YES button’)” />

Input tags

Submit Name or id – not necessary if you want

this button to just submit the form Value – this will display what the button

says. If this is left blank, the word “Submit” will appear on the button

By default, the submit button will submit the form to the URL in the Action attribute. However, it is always good make sure a form has been validated before submitting it.

Submit Example

<input type = “Submit” Value = “Submit mForm”>

If you want to use a JavaScript function to validate your form, add that to the form tag. When the Submit button is clicked it will submit the form once the function returns true

<form name=“form1” id = “form1” Method=“POST” onSubmit = “return checkForm()” Action=“processform.asp”></form>

Input tag

Reset Value – this can be set to display

whatever wording you wish on the button. If you do set this it will default to “Reset”

This button will wipe out all information entered on the form.

<input type = “Reset” Value = “Clear Form”>

Input tags

Radio Button Group Name or id – used to identify this form

element Value – the value you want to be

passed to the form (not the value displayed on your web page)

Checked – by putting this word in the input tag of one of the buttons in the group, this one will be checked or selected when the form loads.

Input tags

Radio Button Group cont. When you use several radio buttons

with the same name you are grouping them. This means that only one of the options can be selected.

When you create a radio button group, the form elements in this group will be referred to as one element with several parts – in JavaScript this will be read as an array.

Radio Button Example

<input type = “radio” id = “rdoMF” name = “rdoMF” value = “M” />Male

<input type = “radio” id = “rdoMF” name = “rdoMF” value = “F” />Female

Input tags

Checkbox Name or id – identifies this form

element Value – what will be submitted with the

form, not displayed on the page Checked – if “checked” then this will

have a checkmark in the box for that element

Input tag

Checkbox cont. To group several checkboxes together,

give them the same name. More than one checkbox can be

checked. This is seen as one element with

several parts – when this is read by JavaScript it will be seen as an array.

Checkbox example

<input type = “checkbox” name = “chkInstrument” id = “chkInstrument” checked = “checked” value = “G” />Guitar

<input type = “checkbox” name = “chkInstrument” id = “chkInstrument” value = “P” />Piano

<input type = “checkbox” name = “chkInstrument” id = “chkInstrument” value = “D” />Drums

Input Tag

Select Tag Drop down list that gives the client

different options to select from. Name or id – used to identify the form

element Size – shows how many options to

display Multiple – allows the user to select

multiple options in the drop down list.

Input Tag

Option tag The option tag is used to define each

option within the Select tags Value = this is the value that is

submitted on the form Selected – allows you to preselect a

particular option

Select/Option Example

<select id=“dlStates” name=“dlstates”><option value=“IA”>Iowa</option><option value = “MN”>Minnesota</option><option value = “IL”>Illinois</option><option value = “WI” selected>

Wisconsin</option></select>

Input Tag

Password Similar to a text field, but the

information typed in this field is masked for security purposes.

When the form is submitted, it is not encrypted. If collecting sensitive data, add extra security to your website, such as SSL

Name, id, maxlength, size and value attributes are the same as a textbox

Password Example

<input type=“password” name=“txtSSN” id = “txtSSN” size = 9 maxlength = 9 />

Input Tag

Textarea Used to allow the user to enter multiple

lines of text. Cols – specifies how many columns in

the textarea Rows – specifies how many rows in the

textarea Wrap - allows the text entered to wrap

in the textarea

Textarea Example

<textarea cols = 20 rows = 5 wrap = “true” ></textarea>

Input Tag

Hidden Used to include information on a form that

is not displayed to or entered by the user. Information may be something specific

about the form itself or information retrieved from the server that is part of the form, but does not need to be displayed.

Name – used to identify the form element Value – used to store the value assigned

Hidden Tag Example

<input type=“hidden” name=“txtType” value = “Order Form” />

Input Tag

Label Used to add a label to a form element

that gathers data. A label is for display purposes only.

For – contains the id of the form element associated with it.

Label Examples

<label for=“txtName”>Name:</label>

<input type = “text” id=“txtName” name = “Name”>

<label>Name: <input type=“text” Name = “Name” /></label>

Form Tag

Fieldset Groups of set of form elements. Used for organizational or display

purposes Can use a legend tag to label a fieldset

Fieldset Example

<fieldset><legend>Personal Information</legend>.....(input fields)…..

</fieldset>

Processing Form Data

Email Used to email form results to a

designated email address Used when there is no access to server

side form processing programs Used when there is no concern for

security

Email Example

<form method=“Post” action=mailto:chageman@kirkwood.edu enctype = “text/plain” onSubmit=“window.alert(‘The form has been sent by email.’)”>…..

</form>

Forms Processing

Server Side Processing CGI-Bin ASP PHP

HTML ll

Events, Framesets and XHTML

onclick

Captures the click event Can be used with most tags Examples

onclick=“javascript:alert(‘Thank you for subscribing!’)”

onclick=“checkfield(form1)”

ondoubleclick

Captures the double click event Used on most tags Example

ondblclick = “javascript:document.getElementById(‘txtName’).value = this.value”

onmouseover/onmouseout

Captures the movement of the mouse

Used with most tags Example:

onMouseOver="javascript:this.src=‘world.jpg'"

onmouseout="javascript:this.src='web.gif'"

onfocus/onblur

Captures event when you set focus on an element or lose focus.

Used with <a>, <area>, <input>,<label>, <body>, <textarea>,<button>,<frameset>,<select>

Example: onfocus=“javascript:alert(‘This field is

required’)” onblur=“javascript:if (this.value) == “”)

{alert(‘You must enter a value in this field’)}”

Frameset

Breaks your page into rows and columns. Each frame is essentially it’s own document.

Attributes: rows or cols – you must define one or

the other Border, frameborder, framespacing or

border color

Frameset example

<frameset cols=“150, *”>

</frameset>

Frame Content

Defines each frame within the frameset Attributes:

Src = defines the URL that will be displayed in the frame

Name or id – used to uniquely identify the frame

Noresize – keeps the user from resizing the frame

Scrolling – allows vertical or horizontal scrolling Frameborder and bordercolor – determines if

there is a border and it’s color

noframes

This replaces the body and is read by browsers that do not support frames

It is best to include this especially if you are unsure of what browser your audience will be using

Frames Example

<frameset cols=“150, *”><frame src=“navbar.htm” name=“frame1”><frame src=“content.htm” name=“frame2”>

</frameset><noframes>

We apologize, but this page must be viewed in a frame-capable browser.

</noframe>

Inline frames

Allows you use frames inside a traditional document

Attributes Name – identifies the frame Src – the url of what is to be in the

frame when the page loads Height and width – needs to set or

defaults will apply (width is 300px, height is 100px)

Disadvantages of using frames

Search engines cannot read the text on your pages contained in the frames, therefore you’re page is not getting found.

Orphan pages – pages can be looked at individually outside the frameset. You may loose your navigation.

Many browsers cannot print frame pages correctly.

Difficult to accurately bookmark a frames page.

External .js files

Can be linked so javascript functions can be reused on different pages.

<script language=“javascript” src =“openwindow.js” type=“text/javascript”></script>

DTD

The doctype declaration should be the very first thing in an HTML document, before the <html> tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

DTD

HTML 4.01 Strict contains all HTML elements and

attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DTD

HTML 4.01 Transitional contains all HTML elements and

attributes, including presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DTD

HTML 4.01 Frameset equal to HTML 4.01 Transitional, but

allows the use of frameset content. <!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTD

XHTML 1.0 Strict contains all HTML elements and

attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DTD

XHTML 1.0 Transitional contains all HTML elements and

attributes, including presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD

XHTML 1.0 Frameset equal to XHTML 1.0 Transitional, but

allows the use of frameset content. <!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

DTD

XHTML 1.1 equal to XHTML 1.0 Strict, but

allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML

Like HTML but uses DTD to define XML elements

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

XHTML

Nested Tags Same as current HTML <b>This statement is <i>itallic</i></b>

End Tags are required <p></p> <br /> <input type = “text” name=“txtName” />

XHTML

Case sensitive All html tags need to be lower case

Attributes in Quotes All attribute values must be in double

quotes <table name=“tblTableOne” cols=“3”

rows=“5” width=“500”>

XHTML

Explicit Attribute values All attributes must have a value <option value=“IA” selected=“selected”> <input type=“radio” name=“rdoMF”

value=“M” checked=“checked”> Special Characters

Put javascript in external files <img src=“saltandpepper.jpg” alt=“Salt

&amp; Pepper”> See appendix F for character definitions

XHTML

Name vs. Id XHTML has a strong preference for the

Id tag If you have to use the name attribute

for a tag, then also add the id attribute

Getting Your Web Site Found

Meta Tags

Description Tag This allows you to influence the

description of your page with the web crawlers

<meta name=“description” content=“Dream Travel taking you on your favorite vacation in America, Mexico or Jamaica”>

Meta Tags

Keywords Tag Can supplement the content of your

web page in getting it found. A keyword tag on it’s own will not get your site found.

<meta name=“keywords” contents=“travel, Jamaica, Mexico, vacation”>

Meta Tags

Robots Tag Used to get robots to index your page,

or not index your page.<meta tag=“robots” content=“index,

follow”><meta tag=“robots”

content=“noindex”>

Meta Tag

Author Ignored by the web crawlers but used

for the authors purpose. Good for tracking web sites you have authored.

<meta name=“author” content=“Cyndi Hageman”>

How does a web crawler work?

Scans through internet pages to create an index of the data it is looking for.

Main purpose is to collect data so they can quickly provide web surfers with requested information

Used by search engines and others, such as linguist trying to find commonly used words.

Web Crawlers

Also known as web spider, web robot, bot

Can be used to gather specific types of information, such as email addresses for spam purposes

Search Engine Optimization

Process of editing and organizing the content on a webpage or across a website to increase its potential relevance to specific keywords on specific search engines

Ensures that external links to the site are correctly titled and in abundance.

SEO cont.

Consider how search engines work and what people search for

Involves editing its content and HTML coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines

How to Get Your Web Site Found

Provide content – make sure your web site content is relevant to what you are selling or trying to say.

Use the Title Meta Tag – Many search engines compare your title tag to your keywords and page content.

Getting Your Web Site Found

There’s more out there than Google – there are a lot of search engines out there, make sure you are found by as many as possible

Use keywords meta tags – still used by search engines to compare to the content of your page

Get Your Web Site Found

Description Meta Tag – may not be the most important but still use to tell a search engine exaclty what your web site is about.

Submit your site to major search engines, but don’t “spam” them – do this when your site is completely finished.

Get Your Web Site Found

Use the revisit Meta Tag – this will keep the web crawlers coming back<meta name=“revisit-after” content=“30 days”>

Add a site map if your site is large – make this available on your home page.

Get Your Web Site Found

Add a robots.txt file on your root directory and add a robots meta tag<meta name=“robots” content=“index, follow”>

Reciprocal linking – find a few other sites like yours and trade links with them. The more links to your site the more you will be found.

Get Your Web Site Found

Get Advice from Others – once your web site is up, ask other developers for advice.

Keep on top of the latest search engine technologies

Tips and Tricks

Make your web site flow. Users usually scan a web site from upper left to lower right

Make your own web site navigation-never leave it up to the user to have to click the back key

Tips

Make your forms easy to complete – do not make your user have to move between mouse and keyboard too much

We are a society of little patience – speed of your web site is important in today’s world. Test your site over different connections

Tips

TEST, TEST, TEST – try absolutely everything to break your site. Try your site in different browsers. Have other people test your site.

Thank You

Cyndi Hageman HTML ll