HTML Form Tutorial – Learning the basics of HTML
HTML Form Tutorial
A HTML form can allow people to
enter data through a web page. This data can then be processed by their
computer, or sent to the web-server and processed there. HTML forms can be used
in many different ways. The most common use of a HTML form is to send a search
query to a search engine, as with, for example, Google. This HTML form tutorial
will give you all the information you need to start making your own HTML forms.
HTML form tutorial - basic elements
Each HTML form element
corresponds to a pair of HTML tags. All of these are enclosed in the form tags
<form></form>. The <form> tag attributes are used to configure the behavior of
the form (how the form data will be processed).
The most common HTML form
element is the <input> element. By setting the 'type' attribute, you can make
the input element appear in a variety of different ways. A list follows:
type="text", a text field
allowing a single line of text;
type="checkbox", a single
checkbox;
type="radio", a single radio
button;
type="file", a file selection
control which can be used to upload a file;
type="reset", this creates a
special button that when pressed will clear the values in the form;
type="submit", a submit button,
the action of this button is determined in the 'action' attribute of the
enclosing <form> tag.
type="readonly", a text field
containing text that cannot be edited, often appears dimmed/grayed;
type="hidden", a text field
that is not visible to the user, its data will be processed just the same as any
other HTML form element;
type="button", a general
purpose button, scripting code can be attached to it so that the desired action
is performed;
type="password", a text field
which will not show the characters typed into it, usually they will appear as
asterisks so to hide the entered text from view.
Other form elements are created
using a specific tag rather than the <input> tag, these are:
<button>, a general purpose
button, similar to <input type="button"> but it allows for greater variation
including the use of images;
<selection list>, use this to
create a drop-down list;
<textarea>, this form element
creates a large box for entering multi-line text.
HTML Form Tutorial - labels
Labels are automatic for some
HTML form elements, for instance buttons, but other HTML form elements like text
fields and checkboxes do not have automatic labels. For these HTML form elements
there is the <label> tag. Correct use of the label tag means that each label is
associated with exactly one form element.
To apply a label to a form
element, wrap the form element tag(s) with <label> tags. For example:
<label><input type="checkbox">Label text</label>.
Another method for a applying a
label to a form element is to use the 'for' attribute on the label tag. For
example <label for="my_checkbox">Label text</label>. You then use a
corresponding 'id' attribute on your form element: <input type="checkbox" id="my_checkbox">.
HTML Form Tutorial - access keys
Access keys allow a user to
give focus to a variety of HTML elements. This occurs when the user presses the
designated key on their keyboard. The operation can differ depending on the
user's computer operating system; on a windows machine, the user will need to
old the 'alt' key, on a Mac system the user will need to hold the 'cmd' key.
When using labels, the access
key is generally attributed to the label of the form element. For instance,
<label accesskey="s"><input type="text">Search:</label>. In this example, when
the user presses "alt-s" on a windows machine, the focus go to search field,
meaning a cursor would appear in the search field. Access keys can be set on the
following elements: <a>, <area>, <input>, <label>, <legend> and <textarea>.
HTML Form Tutorial Scripting
Forms may be combined with a
variety of scripting languages in order to create dynamic web sites.
With client-side scripting, the
script, typically JavaScript, will run on the users web browser. The Document
Object Model allows for JavaScript scripts to access the data that the user has
entered. This can be useful for pre-validation, where form data is tested before
being sent to the web-server. Note that a hacker can modify any pre-validation
code so client side validation cannot be relied upon for security purposes.
With server-side scripting, the
data is processed on the webserver. A common scripting language used is PHP, but
there are many others. Server-side scripting can ensure the security of the data
processing, and ensure that the data is processed the same way for every user.
The 'method' attribute on the <form> element determines how the data is sent to
the sever. With method="get" the data is appended to the URL, the script on the
server must then anticipate this and process the data accordingly. With
method="post", the data is sent directly to the webserver. Method="post" allows
for no limit on the amount of data being sent, and also for the data to be
encrypted. Techniques for accessing method="post" data will vary depending on
the server-side scripting language being used.
Thank you to Alex Hutton for this "HTML Form Tutorial" article.
|
