Configuration - Comcast.net

duckexcellentInternet and Web Development

Feb 5, 2013 (4 years and 7 months ago)

115 views

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/csslibr
ary/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 Button

button




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 Elements

fieldset


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 Elements

fieldset 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 Elements

fieldset 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 Order

tabindex


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 Order

tabindex


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 Data

Scripts 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 Rails

RoR


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 Server

Configuration


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 Server

Configuration


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