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:
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 declares a form. It also contains the nomination of a choice between the PHP methods
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.
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:
These examples come from the ZumGuy Promotions form, which is used to obtain information from clients about their advertisements for the ZumGuy Network:
The best element for inputting short plain text is a text box:
form tag should contain the
action (the file to which the array
$_POST['...'] is sent.
# reloads the current page. The methods are
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.
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.
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.
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.
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
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 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.
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.
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).
This is either the () default browser button, but may also be a nifty custom-made active image.
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.
Set the validation of the captcha as mandatory as follows:
Specifies the character encodings to be used in the form. Default = "UNKNOWN", inherits the coding of the document containing the form element.
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 © Renewable.Media. All rights reserved. Created : November 6, 2014 Last updated :February 14, 2016
The most recent article is:
View this item in the topic:
and many more articles in the subject:
1800 - 1860
Charles Goodyear is a model of the determined inventor, who struggled to find the secret to a better rubber, despite years of financial hardship and frustration.
If you want a helping hand, you will find one at the end of your arm.
Website © renewable-media.com | Designed by: Andrew Bone