Science Library - free educational site

Forms

Forms are a common means for obtaining information from a site visitor. When a visitor needs to register or log-in, she enters some basic information, such as user name and password. When the submit button is pressed, the form sends the data to be entered into and/or verified against a database. This is usually handled by a server-side scripting language like PHP, and a database management language like MySQL.

Let us first look at the basic HTML which composes a form:

Elements of a form

Depending on what the purpose of a form is, there are a number of different elements which can be inserted in any order.

Form Tag

The form tag declares a form. It also contains the nomination of a choice between the PHP methods post and get. These, with the url location file nominated in the action parameter, inform the processing script what to do and where to go with the information once the form has been filled in and submitted.

<form method="post" action="next_stop.php" >

After all the elements of the form have been created, the form is finished with a </form> closing tag.

Often, it is desired to stay on the same page and retain the information input in the form, even though the data has been sent to the server. This allows the user to make changes, and to complete the form if the validation process finds incompatibilities of datatypes or mandatory fields have not been completed. To stay on the same page after submit, insert a hash (#) as the action URL: action="#".

Form Elements

These examples come from the ZumGuy Promotions form, which is used to obtain information from clients about their advertisements for the ZumGuy Network:

Text Boxes

The best element for inputting short plain text is a text box:

<form action="#" method="post" id="ad_submit_form">

<label for="fname" class="comp">First name: </label><input type="text" id="fname" name="firstname" size="35" maxlength="60" value="" />

</form>

The form tag should contain the action (the file to which the array $_POST['...'] is sent. # reloads the current page. The methods are post and get. Get adds a short amount of information to the URL, while the post method creates an array of all inputs from a form. Post is the best to use if more than 2 inputs are to be transferred to another file. The id identifies the form for, amongst other things, CSS styling purposes.

The value in this case is set to a post array variable named $_POST['fname']. This is an example of making a form 'sticky'. If the form was previously filled in, and submitted with an action of #, the page is reloaded retaining the entered values, for the convenience of the user.

The for="idname" associates the label with the id in the label tag. If for is used, the id must be defined, otherwise id is optional. title may also be used to label the form element.

Text Area

When larger amounts of text are to be inserted, a text area element, textarea, provides an expandable box, which can be preset to a set number of rows and columns. Again, in this example the the form is sticky, reprinting any previously entered text.

<label for="ad_text">Ad text : </label><textarea name="ad_text" id="ad_text" rows="8" cols="25"><?php if (isset($_POST['ad_text'])) echo $_POST['ad_text']; ?></textarea>

Password Boxes

A password box displays a bullet or asterisk in place of each character. PHP sends the input data to the server, where the encrypted version is compared to a database value. If these match, the password is returned TRUE.

<label>Password : </label><input type="password" name="user_password" size="16" maxlength="12" />

name is the text which identifies the input data to the server for a match attempt. size defines the size of the box. maxlength is the maximum number of characters that may be entered as a password. There is no preset value for obvious reasons.

Radio Buttons

Radio buttons present one or more options to be selected. The main difference between radio buttons and checkboxes is that only one radio button may be selected. The checked="checked" is optional, and preselects one of the radio buttons.

<label>Ad Type</label>

<input class="ad_button" type="radio" name="ad_type" value="Static" checked="checked" /> Static

<input class="ad_button"type="radio" name="ad_type" value="Animated" /> Animated

Check Boxes

In the checkbox element, any number, or no, check boxes may be ticked. The data is sent as an array. The checked="checked" preselects one or more of the checkboxes (in this case English and German), which the user may cancel.

<label>Languages

<input type="checkbox" name="english" value="English chosen" checked="checked" /> English

<input type="checkbox" name="german" value="German chosen" checked="checked" /> German

<input type="checkbox" name="italian" value="Italian chosen" /> Italian

Dropdown Menus

As the name suggests, a dropdown menu is a pre-set list. A typical example is a list of countries for users to choose their country from. It is not only convenient for the user, but avoids synonyms (e.g. U.K., UK, Great Britain, England, etc.) which may be a problem for the programme. In this case, the menu is created by an included list of countries (country_dropdown).

<label>Country: <?php include(country_dropdown.inc.php'); ?>

Submit Button

This is either the () default browser button, but may also be a nifty custom-made active image.


<input type="submit" name="submit" id="submit" value="Submit" class="button_submit" onmouseover="this.className='button_submit_over'" onmouseout="this.className='button_submit'" />

<input type="hidden" name="submitted" value="TRUE" />

.button_submit { clear:both; min-width: 100px; min-height: 25px; padding: 5px; margin: auto; text-align: center; font-size: 1em; font-weight: bold; color:#FFCC66; border: 2px solid #ccc; background:#900; } .button_submit_over { min-width: 100px; min-height: 25px; padding: 5px; margin: auto; text-align: center; font-size: 1em; font-weight: bold; color:#900; border: 2px solid #ccc; background:#FFCC66 none; }

Captcha Spam Filters

Captchas do not need to be complex to be effective. Asking a simple question like 'What is three plus three?', requiring the answer to input as a single character '6', is enough to block automatic robots from submitting forms.

<label for="captcha"> How much is three plus three? <input type="captcha" id="captcha" name="captcha" size="4" maxlength="1" value="<?php if (isset($_POST['captcha'])) { echo $_POST['captcha']; }; ?>" />

Set the validation of the captcha as mandatory as follows:

//CAPTCHA validation
 if (isset($scrubbed['captcha']) && ($scrubbed['captcha'] != '')) 
 {if ($scrubbed['captcha'] == '6') { $captcha = $scrubbed['captcha']; } 
 else { $errors[] = 'Wrong answer!'; }
 } else {$errors[] = 'You have forgotten to enter an answer 
to the spamming check question!';}

Attributes

accept

accept-charset

Specifies the character encodings to be used in the form. Default = "UNKNOWN", inherits the coding of the document containing the form element.

<form action="post.php" accept-charset="UTF-8 ISO-8859-1">

Space separated list. In this example, both Unicode and Latin alphabet encodings are accepted.

In HTML5, the default character encoding is UTF-8, replacing the HTML 4.01 ISO-8859-1 standard, and Window's ANSI (ISO-8859-1 with 32 extra characters). All standards prior to Unicode were limited and contained a cultural/linguistic bias, not suitable to multilingual environments.

The Unicode Standard is default for HTML5, and covers all the characters, punctuations and symbols in the world.

Conclusion: use HTML5 and Unicode! accept-charset does not need to be declared specifically.

Content © Andrew Bone. All rights reserved. Created : November 6, 2014 Last updated :February 14, 2016

Latest Item on Science Library:

The most recent article is:

Air Resistance and Terminal Velocity

View this item in the topic:

Mechanics

and many more articles in the subject:

Subject of the Week

Universe

'Universe' on ScienceLibrary.info covers astronomy, cosmology, and space exploration. Learn Science with ScienceLibrary.info.

Science

Great Scientists

Adam Smith

1723 - 1790

Adam Smith was a Scottish economist, or indeed 'the Father of Modern Economy'. He penned the Wealth of Nations, published in 1776, a not insignificant year for revolutionary ideas...

Read about history on ScienceLibrary.info
Lugano English

Quote of the day...

You can observe a lot just by watching.

ZumGuy Internet Promotions

Vitruvian Boy