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 If you would like us to review a file, please upload it:

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:

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 ary/category/C7/ ary/category/C7/

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: Place Order, Mark it up further with XHTML: Place Order

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