CSS Class 6

•Make image into a button

•Create button with button element

•Group related form elements

•Control tab order

•Process form data

Make Image into a Button

• Refresher:

– File Upload Field which results in a “browse” button that cannot be changed

--no control over size, placement, or text on the “browse” button

<label>If you would like us to review a file, please upload it: <input type="file" name="upload" tabindex="90" /> </label>

Make Image into a Button

• By doing the following, the browser will place an image on the page in place of the normal gray button with text:

set input element to have its type set as image

Make Image into a Button

• Looks like this:

<p> <input type="image" src="images/contactbtn.gif" alt="Contact Us" /> </p>

Make Image into a Button

• Button should be sized in image editor but designer can use width and height to set size

• Image will submit form but to do anything else, needs JavaScript

• Oddity: (side of effect of using image type for input) browser will automatically transmit the x and y coordinates of the spot on the image actually clicked

Make Image into a Button

• See links at blog for button sources

• http://www.dynamicdrive.com/style/csslibrary/category/C7/http://vista-buttons.com/fr/vista-skin/images/collection/trial_buttons.jpg

Create a Button with Button Element

• Little-known technique

• Technique will allow you to make your buttons visually different from the other controls

• button– Takes a required type attribute set to either submit, reset, or button

• All other valid attributes of input element will apply

Create a Buttonbutton

• Advantage over input: button is a container element

• Set, therefore, as text: <button type=“submit” name=“submitbtn”>Place Order,</button>

• Mark it up further with XHTML:•<button type=“text” name=“submitbtn”><strong>Place Order</strong></button>

Group Related Form Elementsfieldset

• Attractive visual display

• Inviting, not intimidating

• XHTML provides a set of elements that can group form controls into logical blocks

• fieldset element is used to group a collection of related fields

Group Related Form Elementsfieldset legend

• When using fieldset, browser draws the border around elements

• Designer can set width, style, and color of border

• In addition, provide legend, which defines a caption for the fieldset element

• The legend will appear near the upper left corner of the fieldset, bisecting the border

Group Related Form Elementsfieldset legend

• Can nest fieldsets

Example:

user data

personal information

site data

Control the Tab Order

• Tab through form fields instead of using mouse

• By default, tab order is same as order in which fields appear in the code

• Some people (disabled) navigate the page with tab

Control the Tab Ordertabindex

• Our objective is to get the “tab” user to the most desirable part of the page

• Add tabindex attribute to field forms and anchors

• Value of attribute is an integer between 1 and 36,768

• The lower the number, the earlier in the tab order it will appear

• Value shouldn’t be consecutive

Control the Tab Ordertabindex

• If an anchor or form field is not given a tabindex attribute, it can be tabbed to after the user tabs to all the tab indexed elements

• Check boxes and radio buttons can be tabbed to once in a fieldset but after that, user must use

Process Form DataScripts that Process the Form

• Summary:– User fills out form – Presses “submit” – Browser collects data – Transmits data to page provided

in action attribute

• Now the server needs to process the form data

Approaches to Processing Form Data

• Adobe ColdFusion

• Microsoft Active Server Pages

• Microsoft ASP.NET

• PHP Hypertext Preprocessor

• Ruby on Rails

• Perl

Adobe ColdFusion

• First server scripting language developed

• USP is it is designed as a rapid development language

• Looks and acts like HTML

• Relies on tag-based markup language

• Many processes that require complex code in other languages are implied in CF

Adobe ColdFusion, cont.

• Integrated with other Adobe technologies:• Can generate PDF documents dynamically• Creates Flash-vased forms• Version 8 includes image manipulation• Language built on Java• Has access to server-side Java code, meaning

advanced developers can further expand it• Database-agnostic—can communicate with any

relational database

Microsoft Active Server Pages (ASP)

• Referred to as Active Server Pages Classic

• Still widely used• Officially discontinued by MS in 2002• Bundled with MS’s web server, Internet

Information Services, thus installs automatically on Windows servers

• Accesses other Windows services such as user account control

Microsoft Active Server Pages (ASP)

• Can be written in either Jscript (MS’s implementation of JavaScript), or VBScript.

• Technically database agnostic, most ASP pages use MS’s SQL Server as the database backend.

• Disadvantage is it only works in Windows environments without extra $$ investment

Microsoft ASP.NET

• Replacement for ASP• Is part of the bigger .NET technology• Has little in common with ASP• Most .NET pages written in either VB.NET or C#• .NET more powerful than ASP• Currently in vs. 3• Simplifies many of the redundant tasks that take

up Web developer’s time (e.g.,building database update forms)

PHP Hypertext Preprocessor

• Open-source alternative

• Originally developed as alternative to Perl

• Widely used

• Simple yet robust scripting language

• Can function with any relational database

• Most often implemented with MySQL (open-source, enterprise-grade database system)

PHP Hypertext Preprocessor

• PHP has many functions developed specifically with MySQL in mind (transitions easier)

• PHP can be run on any platform, using almost any Web server

Ruby on RailsRoR

• If designer doesn’t like PHP and wants to work in an open-source environment

• RoR is a framework that uses the Ruby programming language to implement dynamic Web sites

• The framework RoR provides sets specific file structures, naming conventions, and application structures

• Same ideals as ASP.net and ColdFusion

Perl

• Programming language developed in early days of Web

• Open source, easy to install

• Difficult to learn because of reliance on an obtuse programming syntax

• Responsible for making people aware of dynamic applications

• Many older Web aps still run Perl

Creating and Uploading Scripts

• Select the technology, then select the scripts to process form data

• Can write scripts in Notepad but WYSIWYG editors have it

• MS Expression Web makes creation of ASP.NET pages easier, vs 3 has PHP support

• D’weaver supports code handling for ASP, ASP.NET, ColdFusion and PHP

• Has “server behaviors” that can write most of the necessary code with dialogue boxes

Uploading Scripts

• Upload along with CSS and XHTML files’

• In most cases, reside along with other files

• With Perl, separate folder required (also special permissions)

Setting up the ServerConfiguration

• Depends on the technology• Download PHP, Perl, and ColdFusion from their

Web sites

Installed like any other application

Installation will automatically detect the Web server software on the machine and add the necessary settings so the server and the server technology can communicate

Setting up the ServerConfiguration

• No configuration necessary if you are on a Windows server running MS’s Internet Information Services to run ASP Classic

• If running Windows 2003 or Vista, no need to set up server to run ASP.NET scripts

• For non-Windows environments, use third-party software, requires add’lt setup