View
224
Download
3
Embed Size (px)
Citation preview
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:[email protected] 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
& 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