Acquired Knowledge Systems .. Easy Internet Business SolutionsE-Commerce and Web Hosting Solutions for Your Business or Organization
Design Your Own Web Storefront Sign Up ! Support Center.. Get Answers Fast Expert Web Site Design and E-Commerce Development Web Hosting and E-Commerce Solutions Client Services Area Free Temporary Home for Your Domain Internet Access Accounts Home About Acquired Knowledge Systems E-Business Home Try Out a Web Store for 30 days for Free E-Commerce Planning Guide Web Site Design TutorialsGet Your E-Mail


By Alan Flum of Celestial Graphics Inc.
Links To This Guide: Introduction | More Text Tags | Text Color and Size | Adding Links | Images | Table Basics | Great Looking Pages | Forms | Going Further |
HTML Forms : Making Your Web Pages Interactive

So far, you have learned how to create web pages using HTML that have a nice look and feel. These pages are basically static and unchanging. One of the key reasons why the web is both interesting and useful is that it can be dynamic and responsive to the user.

In this section you will learn how to create forms. Forms are a fundamental part of making web your web pages dynamic and responsive.

This page is near the end of this tutorial. If you came to this page out of sequence, you may want to go back to the Introduction.
What Does it Mean To Have A Dynamic Web Page?

 A dynamic web page responded to input from the customer. As an example, fill out the form below and click enter.
What is Your Name?

 Lets see how this works. Below is the HTML for the form:
<form method="post" action="html-tutorial-simple-form.php3">

<b>What is Your Name?</b><br>
<input type="text" name="name" size="20" maxlength="20">
<input type="submit" name="Submit" value="Enter">

</form>

Lets look at the HTML line by line:

<form method="post" action+"html-tutorial-simple-form.php3> This this the opening tag of the <form></form> tag set. It has two attributes method and action.

The "Action" attribute tells your browser what action you want the form to take. Usually this means calling a computer program or script that acts on the information or "data" that you entered into the form. In this case, it calls a script called html-tutorial-simple-form.php3. Will look at this in more detail in a little bit.

The "method" action tells your browser how it should send the data inside the form. There are two methods: Get and Post. Get adds the data to the URL. For example, lets say you entered the name Jane in the form above. If the form used method="get", the URL that you would see in your browser would change from html-tutorial-simple-form.php3 to html-tutorial-simple-form.php3?name=Jane . "Get" simply added your input, in this case, Jane. "name" is the name of the text box where you filled in the information and the ? separates the data from the URL. The "Post" method also sends the data to script that is called by the form. It does not embed the data in the URL like post. It sends it in a way where the information remains hidden.

<b>What is Your Name?</b><br> This of course is just standard HTML markup. <b></b> makes the text contained inside it, What is Your Name?, bold. The <br> creates a new line.

<input type="text" name="name" size="20" maxlength="20"> This line creates the text entry box that you see inside the form. Notice that the <input> tag has the attributes type, name and the optional attributes size and maxlength. Type="textbox" tells us that the form input is a box where the user can enter text. Name="name" tells us that information you type inside the text box will be assigned the name, name. If the form had said Name="user-info", then the information would have been assigned the name, user-info.
Size="20" and maxlength="20" indicate the size of the text box in characters and the maximum number of characters you are allowed to enter into the text box respectively.

<input type="submit" name="Submit" value="Enter"> Finally, this line creates the button at the bottom of the form. Type="submit" indicates that this is a standard HTML submit button. The name indicates the name of the button that will be passed to the script. This is useful if there is more than one button. For example, you could have one button with name="accept" and another with the name="decline". The script would process the user data differently based on whatever button was pressed. Value="Enter" is simple the name that appears on the button. If we the form contained value+"go" the the button would have said go.

Next, we will look at exactly how the form gets processed.

    Previous: Table for Layout          Next: Forms (part 2)   


Copyright © by Acquired Knowledge Systems Inc.
Website Design by Celestial Graphics™

Privacy Policy | Site Security | Terms of Use | Contact and Internet Access Info |
| About Us | Give Us Your Feedback |