HTML Forms

z

You place a form anywhere inside the body of an HTML document with its elements enclosed by the <form> tag and its respective end tag </form>. All of the form elements within a <form> tag comprise a single form. The browser sends all of the values of these elements—blank, default, or user-modified—when the user submits the form to the server.

The required action attribute for the <form> tag gives the URL of the application that is to receive and process the form's data. A typical <form> tag with the action attribute looks like this:

<form action="http://html-online-learning.blogspot.com/process">
...
</form>

The example URL tells the browser to contact the server named html-online-learning.blogspot.com and pass along the user's form values to the application named update, located in the cgi-bin directory.

The browser specially encodes the form's data before it passes the data to the server so it doesn't become scrambled or corrupted during the transmission. It's up to the server to decode the parameters or pass them, still encoded, to the application.

The standard encoding format is the media type named application/x-www-form-urlencoded. You can change that encoding with the optional enctype attribute in the <form> tag. If you do elect to use an alternative encoding, the only other supported format is multipart/form-data.

The standard encoding—application/x-www-form-urlencoded—converts any spaces in the form values to a plus sign (+), nonalphanumeric characters into a percent sign (%) followed by two hexadecimal digits that are the ASCII code of the character, and the line breaks in multiline form data into %0D%0A. (See Chapter 12 for more information on URL encoding.)

The multipart/form-data encoding encapsulates the fields in the form as several parts of a single MIME-compatible compound document.

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 be easy to understand soon!

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

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

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

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

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

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

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

The RADIO BUTTON tag:
Radio button tags create round buttons that allow people to make a unique selection from a list of options that forms a group. Radio buttons work in groups so as to provide many options, where the user can only select one option from the group. From the code below, the three radio button tags allow the user to select what credit card they are going to use. The way to tell the browser that the radio buttons are part of the same group, is by giving them all the same name like the code below they are all part of the group "creditCard".

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

The CHECK BOX tag:
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 one option can be selected.

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

The DROP-DOWN-LIST, or as the savvy nerd would call it: the SELECT tag:
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 they 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 select tag creates the classic drop-down-list:

<select name="gender">
<option value="m">male</option>
<option value="f">female</option>
</select>

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

<input type="submit">

With many browsers, a form will be automatically submitted if the user hits the Enter key while the users "cursor" 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">