eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

introduction to web programming
The Button Widgets  
So now you have all of these cool interface widgets with which you can collect user-defined input. But what do you do with them?

Well, at the end of your HTML FORM, you typically add a "SUBMIT BUTTON".

Submit buttons are easy to implement and take care of themselves.

When the user clicks the submit button, the browser will detect it and will put all the inputted data from the interface widgets into a URL encoded string and send it to the script specified in the FORM's ACTION attribute (again, we will talk about the script tomorrow).

A submit button appears below:

The code to create it looks like the following:

<FORM>
<INPUT TYPE = "SUBMIT">
</FORM>
Changing the Buttons Label  
You can notice right away that by default, the web browser will use something like "Submit Query" for the button's label.

In many cases, you will not want that default text in the button.

To change it, you simply use the VALUE attribute of the INPUT tag as follows

The code to create it looks like the following:

<FORM>
<INPUT TYPE = "SUBMIT" VALUE = "Oooooh, Touch me!">
</FORM>
Identifying the Button to the Server  
In many cases, you may have more than one submit button in a form. Thus, you need a way of identifying which submit button is being pressed.

To do so, you will use the NAME attribute of the INPUT tags.

In the following example, we create two submit buttons with different names:

The code to create it looks like the following:

    <FORM>
    <INPUT TYPE = "SUBMIT" VALUE = "Delete Item"
              NAME = "delete">
    <INPUT TYPE = "SUBMIT" VALUE = "Modify Item"
              NAME = "modify">
    </FORM>

We will talk about how the server can use this information tomorrow.

Previous | Next | Table of Contents