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 Text Field Widget  
The most common interface widget is the Text Field. A Text Field allows a user to type in a line of text and looks like the following:

Try it out...type in some text.

Behind the scenes, the above text field was created with the following HTML code

    <FORM>
    <INPUT TYPE = "TEXT" NAME = "demo">
    </FORM>
    

Notice that the Text Field widget is specified as an input TYPE of "TEXT". Also notice that if you hit return after typing in some text, you will be returned to this page. This is because we have not specified an ACTION in the FORM tag. I did this so you can focus on the widget instead of a CGI script.

The Text Field also has several other attributes that affect how it works. The following table outlines them:

Attribute Description
TYPE Specifies the type of interface widget. For a Text Field, you use "TEXT"
NAME Specifies the variable name associated with this widget
VALUE Specifies initial default text that should appear in the text field
MAXLENGTH Specifies the maximum number of characters allowed to be input into the widget
SIZE Specifies the width of the field

Let's take a closer look at each of these attributes.

The VALUE attribute  
The VALUE attribute allows you to specify default text. Here is an example:

And here is the code that we used to make that text field.

    <FORM>
    <INPUT TYPE = "TEXT" NAME = "demo" VALUE = "default text">
    </FORM>
    

The MAXLENGTH attribute  
The MAXLENGTH attribute allows you to specify the maximum number of characters allowed for input. Here is an example that only allows you to type in 5 characters. Try it out for yourself:

And here is the code that we used to make that text field.

    <FORM>
    <INPUT TYPE = "TEXT" NAME = "demo" MAXLENGTH = "5">
    </FORM>
    

The SIZE attribute  
The SIZE attribute allows you to specify the width of the text field itself. Here are two examples that show the attribute being used:

And here is the code that we used to make the text fields.

    <FORM>
    <INPUT TYPE = "TEXT" NAME = "demo" SIZE = "30">
    <INPUT TYPE = "TEXT" NAME = "demo" SIZE = "20">
    </FORM>
    

Previous | Next | Table of Contents