10/1/2015 ©2006 scott miller, university of victoria 1 html: the sequel forms javascript dhtml html...

04/21/23©2006 Scott Miller, University of Victoria1

HTML: The sequelHTML: The sequelFormsJavaScriptDHTMLHTML Practical Tutorial

Rev 2.0


HTML FormsHTML Forms

Forms are crucial when developing web applications that require interactive input from the user– HTML Forms contains elements such as buttons, text

boxes, pop-ups, check boxes, etc.

– Simple HTML construct using these elements for user input

– Submits information via POST method as key-value pairs in body of request

POST is better method to send data as GET has max of 256 characters


Example - FormsExample - Forms

Username: Password:

Keep me logged in

OK

Me.comWebserver

SMTP

ForgotPWD.pl

DB

Login.pl

CGI

CGI

SelectFrom

Username

Set accept cookie

SMTP

<form name=“login” method=“post” action=“http://www.me.com/cgi-bin/Login.pl”>Username:<input type=“text” name=username>Password:<input type=“password” name=pwd><input type=“submit” value=“MySpoonIsTooBig” name=“sbutton”></form>

CheckBox1


Example - Form RequestExample - Form Request

POST /cgi-bin/Login.pl HTTP/1.1Content-Length: 42Content-Type: url-encoded-form/UTF-8Host: www.me.comUser-Agent: Internet Explorer<blank line>username=scottpwd=foosbutton=MySpoonIsTooBig


JavaScriptJavaScript

Used for presentation (formatting), form validation, cookie creation, browser detection and more

Parsed on the client sideScripting embedded inside

<script></script> tags– Tags can be embedded throughout web pages

Used heavily for event handling


JavaScriptJavaScript

Main uses:– Form validation– Action driven content (mouse-overs)– Read/Write HTML elements

Problems:– Horrible task of code mixed in with presentation –

makes for a maintenance nightmare– Limited trust for client-side form validation– Can lead to security issues as well

JavaScript ≠ Java


JavaScript – Case StudyJavaScript – Case Study Form Validation

– Saves Bandwidth– Saves CPU time on web server (eases the load for

other clients with more serious needs) Verifies the form(s) is completely and correctly

filled out– E.g. Ensure phone number in format of (xxx)xxx-

xxxx Verifies form on client side BEFORE bothering

the web server Can use any client side scripting language to do

this (JavaScript, VBScript, etc.)


JavaScript – Case Study JavaScript – Case Study JavaScript can access all forms on a page

via the “forms” array (which is a property of the “document” object– document.forms[0].elements.length– document.forms[0].username.value

e.x.<script type = “text/javascript”>function verify() {alert(“Form Verified”)}</script>


JavaScript - ExampleJavaScript - Example<html><head>

<script type=“text/javascript”>function verify() {

alert(“Form Verified”)}</script>

</head><body>

<form><input type=“button” onclick=“verify()” value=“Click me”>

</form></body></html>

Example 1

Example 2


JavaScript – More CasesJavaScript – More CasesAnother example of JavaScript

Places you’ll find JS– Client: embedded in HTML, inside Applets– Server: JSPs, Servlets ( CGI program

generates JS)

Country:

Province/State:

Canada

B.C.

Choose

Constrains


Dynamic HTML : DHTMLDynamic HTML : DHTML

DHTML is simply a term for HTML, CSS, and JavaScript all used together– HTML presentation, CSS formatting for presentation,

JavaScript “dynamic content”. Not used for Dynamic Content (as in web

applications: DB queries, user authentication, etc.), but for more interactive presentation– e.x. Separate pages for specific browsers, different

content based on cookie settings for presentation, mouse-over/click events, etc.


HTML TutorialHTML TutorialA Short Practical Overview of the Markup Language, Elements and Basic Tags

Rev 2.0


Review of Basic HTML Syntax Review of Basic HTML Syntax

There are 3 parts to an HTML tag– Start Tag– Contents– End Tag

e.x. <strong>This is bold</strong> Tags denote the formatting of the text (contents)

between the start and end tags Tags denote elements, such as forms, tables, etc.

– Elements are objects within a web page Tags are all lowercase

HTML BasicsHTML Basics Like any language, comments are available to

use and make your code more clear– 

– SSI and similar languages use comment blocks to enter their own code

All HTML documents contain the following components:– <html>,</html>: entire document

– <head>,</head>: head section; includes page title, scripting functions, meta information, CSS includes, etc.

– <body>,</body>: bulk of the document; the viewable portion


HTML Basics: Common TagsHTML Basics: Common Tags

Common formatting tags– <title>: Sets the title in the browser’s bar

– <strong>: Sets text bold

– <em>: Sets text italic

– <code>: Displays as code

– <h1>,<h2>,etc.: Display as (sub)header

– <p></p>: Paragraph

– <br>: Add a line break

– <hr>: Adds a horizontal line


HTML Basics: AttributesHTML Basics: Attributes

Many HTML elements have attributes to add additional formatting – e.g. <body bgcolor=“#ffffff”>

– e.g. <table border=“1”> Many HTML tags have 1 or more of these

attributes, which makes them very hard to list– While building your own pages, any decent reference

will list the attributes with each tag you use


HTML Basics: EntitiesHTML Basics: Entities

Certain characters cannot be written as literals (e.g. &), so these entities are denoted in another way– &lt = <– &amp = &– &gt = >– &quot = “– &apos = ‘– &nbsp = space (non-breaking space)– &divide = division sign– &copy = ©


HTML Basics: HyperlinkingHTML Basics: Hyperlinking

<a>: Sets an anchor point Example:

– <a href=“http://location/page.html”> text to display as this link </a>

<a href=“page” target=“_blank”>: open link into a new window

In-page anchors are used to link to references on the same page. They are usually used for TOC on large pages– e.x. <a name=“thisIsAnAnchor”>Anchor</a>

<a href=“#thisIsAnAnchor”>


HTML Basics: FramesHTML Basics: Frames

Frames display SEPARATE PAGES in different defined areas of a single view– Good for menus, navigation– e.x.

<frameset rows="25%,75%"> <frame src=“1frame.html">

<frameset cols="25%,75%"> <frame src=“2frame.html"> <frame src=“3frame.html">

</frameset></frameset>


HTML Basics: TablesHTML Basics: Tables

Tables are very easy to build in HTML– <table>: defines a table– <tr>: defines a row– <td>: defines a boundary for a column<table border="1">

<tr><td>100</td><td>200</td><td>300</td>

</tr><tr><td>400</td><td>500</td><td>600</td>

</tr></table>


HTML Basics: ImagesHTML Basics: Images

General form to include an image:– <img src=“url”>

If only a filename is present, the current directory is assumed Relative paths (src=“/images/1.gif”) are allowed

– alt attribute writes alterative text if the picture is unavailable, or the browser can’t display images

Images can be used to make image maps– These are images where different areas of the image

link to different resources


HTML Basics: Colour and HTML Basics: Colour and BackgroundsBackgrounds Many elements in HTML can have colour

defined– e.x. <body bgcolor=“…”>

…= “#000000” …= “black” …= “rgb(0,0,0)”

Background images can be added in much the same way– e.x. <body background=“bg.jpg”>

Note: although these colour and background tags work, most colour in any element (not just body) has been depreciated. All style is supposed to be done through Style Sheets


Final ThoughtsFinal Thoughts

As mentioned, any formatting in the HTML web page itself will work, but proper coding style now dictates formatting should be done with Style Sheets

Once you have become more comfortable with HTML, JavaScript, Style Sheets, and languages like SSI are very easy to pick up

10/1/2015 ©2006 scott miller, university of victoria 1 html: the sequel forms javascript dhtml html...

Documents

university of victoria

characters2006 scott

example form requestpost

html formsforms

javascript examplefunction

dynamic html

xxxxverifies form

simple html construct