Scribd
Upload
84 views

Form

In web authoring, a form is an element in a web page which is used to provide input from user back to scripts or to submit data to the server for further process. A form comprises a complex yet flexible framework to allow users basic controls.

Uploaded by

api-3742735
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
84 views

Form

In web authoring, a form is an element in a web page which is used to provide input from user back to scripts or to submit data to the server for further process. A form comprises a complex yet flexible framework to allow users basic controls.

Uploaded by

api-3742735
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 9

F.

4 CIT – HTML – Form page 1

Introduction
In computer science, a form is a screen display in which user is expected to fill in information and then
submit to a program after completion. A form comprises a complex yet flexible framework to allow
users basic controls. It provides an interactive and user-friendly interface to user by placing a handful of
GUI (Graphical User Interface) controls on the user agent to allow the user to enter data.
In web authoring, a form is an element in a web page which is used to provide input from user back to
scripts or to submit data to the server for further process.

<FORM> Tag
A form is inserted unto the web document by placing form fields within <form> tags. The entire form
or any of the tags can be formatted like any other element in the document, and can be placed within any
element capable of holding other elements.
Usage:
<form action=”url_of_handler” method=”get | post”>
Attribute:
action: The URL of the handler which the destination of the data and where the data is processed in the next step.
method: It controls how the data is sent to the handler.
Possible values: get | post
Example:
<html>
<head></head>
<body>
<form action=”forum.php” method=”get”>
<label for=”Name”>Name</label>
<input type=”text” name=”Name” size=”50”><br>
<label for=”Name”>Message</label>
<textarea name=”Msg” cols=”50” rows=”10”>Your message
here.</textarea><br>
<input type=”submit”>
</form>
</body>
</html>

POST Method (HTTP POST):


The HTTP POST method passes data encoded in the HTTP data stream. As such, it is not typically
visible to a user and is a more secure method to pass data, but can be harder to implement. Thankfully,
HTML forms and most other Web technologies make passing data via POST a trivial task.
GET Method (HTTP GET):
The HTTP GET method attaches data to the actual URL text to pass the data to the target. The data
appears after the question mark and is in the name/value pairs.
F.4 CIT – HTML – Form page 2

Common GUI and Related Tags


1. Field Labels
A field label is used to associate text with a form control, and is defined by <label> tag.
Usage:
<label for=”id_of_control”>Text_Label</label>
Attribute:
for: The id (attribute value) of the controls.
Example:
<label for=”Name”>Name</label>
<input type=”text” name=”Name” size=”50”>
2. Text Input Boxes
A text input box is a control which allows user to type some text in a rectangular box of one row
height.
A text input box is defined by <input type=”text”>. Note that <input> tag has no end tag.

Figure 1. A text input box


Usage:
<input type=”text” attr1=”value” attr2=”value”…>
Attribute:
name: Name of the text input box. In fact, name is a common attribute for the following controls.
id: An id given to the component and is common to all tags.
value: The initial value of the text box.
size: The size (width) of the text box.
maxlength: The maximum length (i.e. number of characters) that the text box can hold.
Example:
The following code defines a text box to accept an e-mail address. It appears 20 characters wide, only accepts 40
characters at most, and has an initial value of “[email protected]”.
E-mail: <input type=”text” name=”email”
value=”[email protected]” size=”20” maxlength=”40”>
Variations:
Password Input Boxes:
A password input box is a text box that all input characters are visually obscured by
displaying asterisks (or dots in WinXP), and the process is called masking. However, input data are masked
visibly. At data level, the input data are not encoded.
Basic Usage:
<input type=”password” name=”name_of_control”>
3. Radio Buttons
Radio buttons are groups of small, round buttons that allow a user to choose one option in a group.
Radio buttons are mutually exclusive – only one of the group can be set. When one is selected, the
others in the group are deselected.
F.4 CIT – HTML – Form page 3

OptionButton1
1

OptionButton2

OptionButton3

Figure 2. A group of radio buttons


Radio buttons are defined by <input type=“radio”> and radio buttons in the same group
share the same name attribute.
Usage:
<input type=”radio” name=”gp_name” value=”sel_value” [checked]>
<input type=”radio” name=”gp_name” value=”sel_value” [checked]>
...
Attirbute:
name: The group name of the radio buttons. It is shared among the same group of radio buttons.
value: It is the value of the radio buttons group which is sent to the handler. This value must be unique b
etween buttons in the same group.
checked: The radio button which has this attribute will be checked. In XHTML, this attribute is written as
checked=”checked”
Example:
<p>Gender:
<input type=”radio” name=”gender” value=”male” checked>Male
<input type=”radio” name=”gender” value=”female” >Female
</p>
4. Check Boxes
Check boxes are small, square boxes that are used to select non-mutually exclusive choices. Check
boxes are very similar in definition to radio buttons, except the mutually exclusive issue.

✘ CheckBox1

✘ CheckBox2

CheckBox3

Figure 3. A group of check boxes


Usage:
<input type=”checkbox” name=”box_name” value=”sel_value” [checked]>

Attirbute:
name: The name of the check boxes.
value: It is the value of the check boxes group which is sent to the handler. If this attribute is not set, the
selected check boxes are given the value “on”.
F.4 CIT – HTML – Form page 4

checked: The radio button which has this attribute will be checked. In XHTML, this attribute is written as
checked=”checked”
Example:
<p>Interest:
<input type=”checkbox” name=”sports”>Sports
<input type=”checkbox” name=”reading”>Reading
<input type=” checkbox” name=”others”>Others
</p>
5. List Boxes
List boxes are used to allow a user to pick one or more textual items from a list. The list can
be presented in it entirely, with each element visible or as a pull-down list where the user can scroll
to their choices.

Figure 4. List Boxes


List boxes are implemented using <select> and <option> tags, and optionally the
<optgroup> tag.
The <select> tag provides the container for the list and has the following format. The
<option> tag defines the items for the list. Each item is given its own <option> tag.
Usage:
<select name=”field_name” size=”items_to_show” [multiple]”>
<option [label=”label_name”] [value=val_to_send] [selected]>
<option [label=”label_name”] [value=val_to_send] [selected]>
...
</select>
Attribute:
<select> tag:
name: Name of the list box.
size: Number of items that will be visible in the list box.
multiple: Indicates that multiple selection in the list box is enabled.
<option> tag:
label: A shorter label for the item that the user agent can use.
selected: Indicates that the item should be initially selected.
value: The value that should be sent to the handler if the item is selected. If this attribute is
omitted, the text of the item is send.
Example:
<select name=”weekdays” size=”4” multiple>
<option selected>Monday
<option>Tuesday
F.4 CIT – HTML – Form page 5

<option>Wednesday
<option>Thursday
<option>Friday
<option>Saturday
<option>Sunday
</selected>
Variation:
Occasionally, one might want to group options of a list together for clarity. <optgroup> tag can serve
such purpose. The <optgroup> tag encapsulates items that should be in that group. The group is visibly
divided by the name of the option group which is set in the label attribute of <optgroup> tag. Although the
group name is shown in the list box, it cannot be selected.
Example:
<select name=”weekdays” size=”4” multiple>
<optgroup label=”Weekday”>
<option selected>Monday
<option>Tuesday
<option>Wednesday
<option>Thursday
<option>Friday
</optgroup>
<optgroup label=”Weekend”>
<option>Saturday
<option>Sunday
</optgroup>
</selected>

6. Text Areas
For large pieces of text, one can use <textarea> tag. This tag defines a text area which can
accept textual input of up to 1024 characters and uses a multiline text box for input.
Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text,
Text, Text, Text, Text, Text,
Figure 5. A text area
Usage:
<textarea name=”field_name” cols=”cols_no” rows=”rows_no”>
[Initial content]</textarea>
Attribute:
name: The name of the text area.
cols: The number of visible columns.
F.4 CIT – HTML – Form page 6

rows: The number of visible lines.


Example:
<textarea name=”Address” cols=”20” rows=”5”>
Shek Wai Kok Estate
Tsuen Wan
N.T.</textarea>

Note that the format of the text which is placed between the <textarea> tags is preserved.
Therefore, for example, the following code will produce a newline character, rather than a blank
text area.
<textarea>
</textarea>
In addition, the text entered into the <textarea> field wraps within the width of the box, but
these automatically created newline characters will not be sent to the handler.

7. Buttons
A custom button can be added to the form by using <input type=”button”>.

CommandButton1

Figure 6. A button
Usage:
<input type=”button” name=”button_name” value=”Caption”>
Attribute:
name: The name of the button.
value: The caption of the button.
Example:
<input type=”button” name=”helloBtn” value=”Press Me!”>

However, buttons by themselves are useless on a form. To have the button actually do something,
the button should be linked to a script via the event handler. For example:
<input type=”button” name=”helloBtn” value=”Press Me!”
onclick=”JavaScript:alert(‘Hello!’)”>
Variations
Submit Button:
A submit button allows users to submit the data entered to the handler.
The format of a submit button:
<input type=”submit” [value=”caption”]>
Reset Button”
A reset button resets the form to its default state. That is, it will reset all controls to their initial states.
The format of a reset button:
F.4 CIT – HTML – Form page 7

<input type=”reset” [value=”caption”]>


8. Images
Images provide a graphical means to convey a message. It can be regarded as an image button.
Like a normal button, image button is itself useless. It must be coped with a script.
Usage:
<input type=”image” name=”field_name” src=”url_of_image_file”>
9. File Fields
File fields allow a user to browse for a local file and send it as an attachment to the form data. A
file field is composed of a text box which the user can type the path and name of the file and a
button that enables the user to browse for a file using their platform’s file browser.
Usage:
<input type=file” name=”field_name” size=”display_size”>
When using file fields, you must specify the form as multipart and use the POST method of form
delivery. That is, the <form> tag should resemble the following:
<form action=” handler” method=”post” enctype=”form/multipart”>

10. Hidden Fields


A hidden field is a field which is invisible on the form and is used to add data to the form without
displaying it to the user.
Usage:
<input type=”hidden” name=”name_of_field” value=”value_of_field”>

Common Attributes
Several attributes are shared among controls.
1. name / id: These two attributes are the identity of the controls. However, they have
difference which is significant when writing scripts and CSS.
In fact, name and id attributes are applicable to almost all HTML tags.
2. tabindex: It defines what order the fields are selected in when the user presses the Tab key.
This attribute takes a numeric argument tags specifies field’s order in the form.
3. accesskey: It defines a key that user can press to directly access the field. This attribute takes a
single letter, which becomes the shortcut to the field as an argument.
However, accesskey attribute usually require an additional key to be pressed
with the access key. For example, user agents running on Windows require Alt key
to be pressed along with the letter specified.
Example:
<input type=”text” id=”fn” name=”fn” tabindex=”3” accesskey=”F” size=”30”>

4. readonly: This attribute keeps the users from being able to edit the data contained in the
controls. This attribute does not take any argument.
5. disabled: This attribute effectively disables a control (usually greying out the control) so
the user cannot use the control.
F.4 CIT – HTML – Form page 8
F.4 CIT – HTML – Form page 9

Example:
<input type=”text” size=”20” value=”Read only field” readonly>

<input type=”text” size=”20” value=”Disabled field” disabled>

(In XML standard, the above codes should be rewritten as:


<input type=”text” size=”20” value=”Read only field” readonly=”readonly”>

<input type=”text” size=”20” value=”Disabled field” disabled=”disabled”>)

Fieldsets and Legends


In order to increase the user-friendiness and accessibility of the form, it is advantageous to visually
group certain controls on the form. This is a standard practice for graphical user agents.
A fieldset is a visual container which groups form elements visually and results in a thin border being
displayed around the elements it surround.
A legend is the caption on the border of a fieldset. Legend
Legend
Label:
OptionButton1
1 Fieldset

OptionButton2

OptionButton3
Figure 7. Fieldset and Legent

Fieldset and legend are defined by <fieldset> and <legend> tags.


Example:
<fieldset>
<p>
<legend>Gender</legend>
<input type=”radio” name=”gender” value=”male”>Male<br>
<input type=”radio” name=”gender” value=”female”>Female
</p>
</fieldset>

You might also like