Topic 2: Hypertext Markup Languange (HTML)

TOPIC 2.5 FORM

2
 Forms Tools
The <form> Element

• HTML forms are used to

collect user input.
• The <form> element
defines an HTML form:

3
 Forms Tools
The <form> Element
The HTML <form> Elements
The HTML <form> element can contain one or more of the
following form elements:
<input>
<label>
<form> <select>
. <textarea>
<button>
form elements <fieldset>
. <legend>
</form> <datalist>
<output>
<option>
<optgroup>

4
 Forms Tools
The <input> Element

• The <input> element is the most important form element.

• The <input> element has many variations, depending on
the type attribute.

5
 Forms Tools
Textbox

✓ The <input> tag specifies an input field where the

user can enter data.
✓ <input> elements are used within a <form> element
to declare input controls that allow users to input
data.
✓ An input field can vary in many ways, depending on
the type attribute.

6
 Forms Tools
Textbox

7
 Activity 2.14 : Textbox

In the HTML document you created before

(form.htm), or a new one (as you prefer), create
1. A text field for your name that is 35 characters
long.
2. A text field for your email that is 40 characters
long.
3. Three text fields for your address, each 40
characters long, and an additional smaller field
for your postal code.
4. Test your code to ensure that it produces
something as shown below. You may find it
convenient to implement and test each part of
the form separately.

8
 Forms Tools

Radio button
✓<input type="radio"> defines a radio button. Radio buttons let a user select
ONLY ONE of a limited number of choices.

9
 Forms Tools
Combo Box
✓ The <select> element is used to create a drop-down list.
✓ The <option> tags inside the <select> element define the available options in the
list.

10
 Forms Tools
Check Box
✓ <input type="checkbox"> defines a checkbox. Checkboxes let a user select
ZERO or MORE options of a limited number of choices.

11
 Forms Tools
Textarea
✓ The <textarea> tag defines a
multi-line text input control.
✓ A text area can hold an
unlimited number of
characters, and the text
renders in a fixed-width font
(usually Courier).
✓ The size of a text area can
be specified by the cols and
rows attributes, or even
better; through CSS' height
and width properties.
12
 Activity 2.14 : Textarea

From activity Textbox you need to modify by following the instruction

below:
1. Replace the address text fields with one text area large enough to hold
the whole address. Use the facilities of the <INPUT> and <TEXTAREA>
tags to prompt the user by including placeholder information in the text
fields and text area.
2. Make the layout of the form more aesthetically pleasing by placing the
form in a two-column table, with field labels (e.g: Name:, Email: ) int the
left hand column, and the widgets in the right-hand column

13
 Forms Tools
Button
• Two button elements that act as one submit button and one reset
button (in a form):
• Syntax:
button type="button|submit|reset">
Value Description
button The button is a clickable button
submit The button is a submit button (submits
form-data)
reset The button is a reset button (resets the
form-data to its initial values) 14
 Forms Tools

Submit Button

✓ <input type="submit">
defines a submit button.
✓ A submit button is used to
send form data to a server.
The data is sent to the page
specified in the form's
action attribute.

15
 Forms Tools
Submit and Reset Button

✓ <input type=“reset">
defines a reset button.
✓ Used to clear form and
start over.

16
 Forms Tools
File upload
The accept attribute specifies
the types of files that the
server accepts (that can be
submitted through a file
upload).
Note: The accept attribute
can only be used with <input
type="file">.

17
 Forms Tools
Hidden Textfield

• The <input type="hidden"> defines a hidden input field.

• A hidden field let web developers include data that cannot
be seen or modified by users when a form is submitted.
• A hidden field often stores what database record that needs
to be updated when the form is submitted.

18
 Forms Tools
Hidden Textfield

19
 Forms Tools

Password Button / Password Textfield

20
 Activity 2.15 : HTML Forms

Write HTML coding to get the figure

below.

21
22