Install Your Own Scripts Form Building Tutorial

Welcome to Part 1 of Building Your Own Forms

If you are running any kind of business on the internet - whether it's a product or service you're selling - chance are you need a form of some kind. As an example, you may need certain information from your customers in order to install a script. You can't find a form like this, so you'll need to build one.

Building a form doesn't need to be difficult. It's simply a matter of knowing the form tags and their functions, labels, buttons, and how to lay them all out.

We are going to go through the steps to building a custom form. After completing this ecourse, you'll be able to build and use forms for just about anything.

Let's begin with going through the different tags, labels, buttons, etc.

Tired of paying others to install your scripts for you?

Are you interested in telling your script installer to "Take a hike!"?

Then you need Install Your Own Scripts. The new ebook from script installer Michael Ambrosio. It's Jam-Packed with extremely easy to follow step-by-step script installation lessons.

And you learn by actually installing THREE different scripts!

Don't delay. Order Now.
Tell your installer to Take A Hike!

NOTE: There are many different ways to design and build forms. There are even tools and software that can help you. This tutorial is designed to give you basic knowledge as well as an understanding of the tags and their definitions and use.

If you already know basic form building you may need a more advanced course than this one. Every effort has been made to ensure accuracy and completness of this course. If you find any errors or have any comments or suggestions, please email me here:


Creating a Form Interface

There are two parts to building interactivity using forms: building the form interface and processing the results submitted by your users. This section focuses on the building a form interface using HTML tags.

The Form Tag:

Forms are created using the form tag and it's attributes.

<form>
</form>

form tags always begin with an opening form tag and end with a closing tag. All form elements must be placed within these opening and closing tags.

Input Tag:

The input tag and its attributes are used to create most of the form elements. The input tag has no closing tag. The input tag has many attributes but the only required attribute for all form elements is type.

The type attribute defines the kind of form element that will be displayed. Possible values are: text, checkbox, radio, password, hidden, submit, reset, and image. Examples:

<input type="text">
<input type=PASSWORD>
<input type=CHECKBOX>
<input type=RADIO>
<input type=SUBMIT>
<input type=RESET>
<input type=IMAGE SRC="checkout.gif">
<input type="hidden" NAME="getCoords"
VALUE="NO">

The last input type, HIDDEN, is not visiable to your viewer. It is used to pass information to the server.

The NAME Attribute:

The NAME attribute is used after the user submits the form and the information is collected and processed. No matter what you use to process the information, you need a way to identify each element with the user's input. The NAME attribute associates the user's input with the name you supply for each form's element. (The contents of the NAME attribute our not visible to the user.)

<input type=text NAME="LastName">

The line of code above would create an input box that looks like:



Text Label:

The Text Label is simply the visible label that the user sees. This tells them what to put in the text box.

Last Name: <input type=text NAME="lastname">

The line of code above would create an input box that looks like:

Last Name:

TEXT & PASSWORD Elements:

The TEXT box and PASSWORD attributes of the input tag allows your users to enter a single line of text into a box on your webpage.

Passwords are displayed by astericks instead of characters on the screen. The NAME attribute is required.

Examples:

<input NAME="LastName">
<input NAME="LastName" type="text">
<input NAME="LastName" type="password">

The SIZE attribute specifies the size of the input box. The default varies among different browsers so it is recommended that you specify a size within all your text boxes.

Last Name: <input type=text SIZE=30>

Last Name:

Last Name: <input type=text SIZE=20>

Last Name:

The Maxlength attribute indicates the number of characters that can be entered into a text box field. If the maxlength exceeds the SIZE of the text box, the text will scroll horizontally in the window while the user enters the information. The default is to allow an unlimited number of characters.

Last Name: <input type=text maxlength="10">

Last Name:


The VALUE attribute will display default text in a text box. The user can type over text.

Last Name: <input type="text" value="Enter Last Name Here">

Last Name:

Tired of paying others to install your scripts for you?

Are you interested in telling your script installer to "Take a hike!"?

Then you need Install Your Own Scripts. The new ebook from script installer Michael Ambrosio. It's Jam-Packed with extremely easy to follow step-by-step script installation lessons.

And you learn by actually installing THREE different scripts!

Don't delay. Order Now.
Tell your installer to Take A Hike!

 

CHECKBOXES:

The CHECKBOX input type enables you to create checkboxes in your HTML form. It allows the user to give a yes or no type of answer. Yes if the checkbox is selected; No if it is not.

<input type=checkbox NAME="MailingList" VALUE="Yes"> 

 Add me to your mailing list.   

Checkboxes work well for Yes/No type answers. They can allow your users to select multiple choices from a list of choices:

        
  <input type=checkbox NAME="car" VALUE="minivan"> Minivan
   <input type=checkbox NAME="car" VALUE="suv"> SUV
   <input type=checkbox NAME="car" VALUE="sport"> Sport

        
What type of car do you own?:
   Mnivan
   SUV
   Sport

In this example, each checkbox has the same NAME but a different VALUE. The user can choose from a group of choices. They can choose no choice at all or as many as they want.

Pre-Selected Checkboxes:

If you want one choice to be pre-selected when the page is displayed, the value CHECKED can be added to the input tag. In the example below, the 'Minivan' choice is checked by default. The user can deselect it if desired.

        <input type=checkbox NAME="car" VALUE="minivan" CHECKED> Minivan
        <input type=checkbox NAME="car" VALUE="suv"> SUV
        <input type=checkbox NAME="car" VALUE="sport"> Sport

         Minivan
         SUV
         Sport
RADIO Buttons:

Adding the type=RADIO to an input tag allows you to create radio buttons within your form. Radio buttons are very similar to checkboxes except they allow a user to choose only one option from a group of options.

     <input type="radio" name="color" value="Blue">Blue
        <input type="radio" name="color" value="Green">Green
        <input type="radio" name="color" value="Red">Red

        Blue
        Green
        Red

Each radio button in a group must be given the same NAME value using the NAME attribute. The NAME attribute provides a unique identifier for a logically related group of fields. Only one choice within a group can be selected.

Pre Selected Radio Button:

To have one choice be the default choice, add the CHECKED attribute to the input tag:

<input type="radio" name="addme" value="Yes" CHECKED> Yes        
<input type="radio" name="addme" value="No"> No

       
 Yes
 No
SUBMIT:

The SUBMIT button allows a user to send the information to the webserver for processing. SUBMIT is added to the TYPE attribute of the input tag. Example:

        <input type="submit">

        

The text that is written on the submit button can be changed using the VALUE attribute:

        <input type="submi"t VALUE="Yes! Sign Me Up Now!">

        
RESET:

The RESET button allows a user to clear the input on a form. RESET is added to the TYPE attribute of the input tag. Example:

        <input type="reset">

        

The text that is written on the RESET button can be changed using the VALUE attribute:

        
        <input type="Reset" value="Clear This Form">

        

IMAGE:

The IMAGE type of the input tag allows you to add an image to display instead of the default SUBMIT button. It requires the attribute SRC attribute. The ALT, WIDTH, and HEIGHT attributes are recommended for usability. A BORDER tag can also be added if needed. Example:

        <input type="image" src="checkout.gif" 
        alt="Submit" border="0" width="150" height="26">

        

When a user clicks on the graphic above, the user will be submitting the form's input to the server.


End of Part 1

Our next lesson will go through some of the more advanced tag elements. Until then, practice what you've learned.


The "One More Chance" box. Click on our sponsors below for excellent products and services.

Tired of paying others to install your scripts for you?

Are you interested in telling your script installer to "Take a hike!"?

Then you need Install Your Own Scripts. The new ebook from script installer Michael Ambrosio. It's Jam-Packed with extremely easy to follow step-by-step script installation lessons.

And you learn by actually installing THREE different scripts!

Don't delay. Order Now.
Tell your installer to Take A Hike!