HTML Forms: Basic Concepts - Part 2

HTML FORMS PART 1 | HTML FORMS PART 2

BEFORE YOU BEGIN

If you are new to web design in general, then you have to check out my online course on web design before you can benefit from this article to it's fullest.

HTML FORMS: BASIC CONCEPTS – part 2

HTML forms are a key part of web design; this article goes beyond the basic concepts and bites into the 'meat' of an HTML form with some concrete examples and nifty tips.

HTML Form Tags

HTML forms are made up of several sub-items some people refer to as 'controls'. These sub-elements include text fields, list boxes, text areas, radio buttons, check boxes and others form gizmos that allows you to collect information from people.

The purpose of an HTML form (and its sub-elements) is to collect information from people for processing; typically you would store this information in a database or even have it emailed to you.

Processing the form data

This last step (of processing the form) is actually handled on the server using a server side script like a CGI or PHP script. Web designers typically don't have to worry about what happens after the form is submitted (after someone clicks the 'submit' button) so I will not go into detail here.

Form tags need unique names

HTML form elements (tags) must each be given a unique name. When a server side script (a PHP script for example) receives a forms submission, it identifies the individual form elements (tags) by their given name.

This means that you have to name each tag with a unique name so you know what information your server side script is 'looking' at. This may all be unclear to you right now, but give yourself a chance because it will easy to understand soon!

For example:

If you have a text field that allows people to enter in their first name, you would probably call that text field: 'firstName'. Then in your PHP script, you can look for (nerds would say: 'parse for') the form element called 'firstName.' The PHP script would then extract what the person entered into that text field – we assume it would be their first name, but that is often not the case!

Now we are getting ahead of ourselves because web designers don't have to worry about server side scripts!

The list of HTML form tags

The following is a list of the most commonly used form tags.

The TEXTFIELD tag:

<input type="text" name="nameFirst" value="Your Name">
	

This tag creates a little box called an: 'input field' where people can enter text.

The PASSWORD tag:

<input type="password" name="nameFirst" value="Your Name"> 
		

This tag is just like the textfield tag except when someone enters text; the text is hidden with obscuring characters, usually asterisks.

The TEXTAREA tag:

		< textarea name="comments" rows="10" cols="30"> 

	  </textarea> 
	  

This tag creates a multi-line text box where users can enter in multiple lines of text.

The RADIO BUTTON tag:

This is the hardest tag to describe. I've rewritten this section many times and I'm still not 100% satisfied that it is clear enough. Read it through and just check out the live examples; I think the example with make it clear.

	        <input type="radio" name="creditCard" value="visa"> 

	        <input type="radio" name="creditCard" value="mastercard"> 

	        <input type="radio" name="creditCard" value="amex"> 
  

Radio button tags create round buttons that allow people to make a unique selection from a list of options that forms a group. Ok, this last sentence maybe a mouthful; let me try to break it down ...

RADIO BUTTONS are created in groups

Radio buttons work in groups so as to provide many options, where the user can only select one option from the group. As you see in the above code, the three radio button tags allow the user the select what credit card they are going to use.

As I mentioned above, radio buttons work by creating groups; the way to tell the browser that the radio buttons are part of the same group, is by giving them all the same name. In the above example, the three buttons are part of the group 'creditCard'.

The CHECK BOX tag:

<input type="checkbox" name="...">

Very similar to radio buttons; check boxes allow users to select options from a list. The difference between the check box and the radio button is that check boxes do not work in groups. That is to say that you can use check boxes to create a list of options for the user to select, and from that list of options, the user can select many at the same time. Where as with radio buttons, only on option can be selected.

The DROP-DOWN-LIST, or as the savvy nerd would call it: the select tag:

The select tag creates the classic drop-down-list:

	        <select name="...">

	        <option value="m">man</option>

	        <option value="f">woman</option>

	        </select>
  

For each item in the drop-down-list you need to insert an <option> tag. If you think about it, the 'mechanics' of the drop-down-list and RADIO BUTTONS are the same in that the present a group of option for the person to choose from. DROP-DOWN-LIST provides you with the added advantage of being able to hide many options in the list – a good space saver.

The SUBMIT button tag:

		<input type="submit">

This is probably the simplest form tag there is, when clicked this button causes the form to be submitted.

Submitting your form

There are two basic ways to deal with the form once filled in:

1. Send the form data to a server side/resident script or like an ASP or PHP page.
2. Send the form data to an email address.

I spoke about the basic concepts of submitting a form in Part 1 of this article, so I won't go into details about what this about, instead let's look at how you can have the form submit/send it's contents to you via email.

Sending a form via email

The easiest way to receive the form information is to have the form sends its' information via email. You can do this by making this change to your form tag:

<form method="post" enctype="text/plain" action= mailto:you@yoursite.com> 

The thing to look for is the email address after the text: 'mailto:' - Just insert the email address you want to have the form information mailed to. This will work in most browsers used today.

Neat tricks to make your forms more useful

I think this part of article will be useful to experienced HTML nerds as well as total beginners. Here are some nifty tricks that can add spice to your forms.

SET THE TAB ORDER FOR FORM ELEMENTS

You may or may not know that you can move around a web page and an HTML form using your computers Tab key. With the Tab key, people can jump from link to link and from form tag to for tag. You can control the tab order by using the code : 'tabindex' for each tag:

	      First Name: <input type="text" name="firstName" tabindex="1"/>

	      <br> <br>

        Last Name: <input type="text" name="lastName" tabindex="2"/>
  

Try it out!

Prevent form elements from being changed.

<input name="userAgreement" type="text" value="You agree" readonly="true">
		

What makes this trick work is the text: 'readonly="true"' – this makes the text un-editable.

Automatically select the contents of text boxes.

<input name="email" type="text" onFocus="this.select()" value="enter your email">
		

What makes this trick work is the text: 'onFocus="this.select()"' – this causes the text that is already in the text box to be selected automatically when the user places their curser in the text box. I use this use trick on Killersites.com.

Prevent forms from automatically being submitted.

With many browsers, a form will be automatically submitted if the user hits the Enter key while the users curser is in a text field. This can be a useful feature in some cases but it can also be a source of problems in others Ex: where you need the user to fill out the whole form.

To prevent the form from being submitted this way, all you need to do is use a BUTTON input tag (with a little JavaScript) instead of the SUBMIT button:

<input type="button" value="submit form" onClick="submit()">
		

Instead of this:

<input type="submit">

Using PHP to capture form input:

Just for fun (ok, watching a movie is fun, but hey I'm a nerd!) I thought that it would be cool to take a sneak peak at how you can use PHP to capture form data. When I say: 'capture form data' I am talking about retrieving the information that someone has entered into a form and submitted it to your script; in this case we would be using a PHP script.

Why choose PHP?

PHP is now probably the most popular server side scripting language used today. There is a good reason for this, PHP is powerful and easy to use and learn. I plan on talking more about PHP in the near future. Ok, back to the subject at hand, capturing the form data using a simple PHP script.

Since PHP was designed for the web, it makes this job really easy. Here is the PHP code you would need to capture the information from two text boxes, the first is named 'nameFirst' and the second text box is named 'nameLast'.

The code:

	        <?php

	        $lastName = $_POST['nameFirst'];

	        $firstName = $_POST['nameLast'];

            ?>
			  

This is really basic, and I don't expect you to use it or even understand it right now. I just wanted to show you how easy it can be to process forms so that you can say, insert the information into a database like MySQL.

Stefan Mischook

Top

© 1996 -
Fatal error: Uncaught Error: Undefined constant "Y" in /home/killersi/public_html/articles/newsletterArchive/html-forms-part2.php:239 Stack trace: #0 {main} thrown in /home/killersi/public_html/articles/newsletterArchive/html-forms-part2.php on line 239