Scribd
Upload
116 views

CBWP 2203 Web Programming: Topic 5: Form in Web Pages

The document discusses different form elements that can be used in HTML pages, including input boxes, selection lists, radio buttons, check boxes, text areas, and submit/reset buttons. Forms allow users to enter information on a website through these interactive elements. The different form elements are described and examples are provided of how to implement them using HTML tags like <form>, <input>, <select>, <textarea>, and <button>.

Uploaded by

Aisyah Miesya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
116 views

CBWP 2203 Web Programming: Topic 5: Form in Web Pages

The document discusses different form elements that can be used in HTML pages, including input boxes, selection lists, radio buttons, check boxes, text areas, and submit/reset buttons. Forms allow users to enter information on a website through these interactive elements. The different form elements are described and examples are provided of how to implement them using HTML tags like <form>, <input>, <select>, <textarea>, and <button>.

Uploaded by

Aisyah Miesya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

CBWP 2203

Web Programming

Topic 5: Form in Web Pages


Introduction
• Form: A document with spaces
(also named as field) in which
to write or select.

Fill up Submit
Introduction
• Forms are sometimes a
necessity in web pages.
• You may be developing a
website in which you would like
visitors to give certain input :
log in / registration / fill in the
questionnaires.
• For this purpose, you need
forms which are objects in
HTML to get the values visitors
keyed in and process it.
Form Tag
• Before using the elements above, you need to declare to the web
browser that the website will be using forms.
• Syntax:

• Between the <FORM> tags, you can insert other tags like heading,
graphic, link, table and more.
• You can also have more than one form in the same HTML file.
• To differentiate one form from another, you can insert NAME
property in <FORM> :
Form Element
• Input box
• Selection list
• Radio button
• Check box
• Text area
• Submit and Reset
button
Form Element
Full Name:
1) Input Box <INPUT TYPE = "TEXT” / “PASSWORD” NAME ="Name" SIZE = “40" VALUE=“Your Full Name">

Input boxes allow you to add


information in text or numbers.

2) Selection List
Selection List is a list box that allows the user
to choose an item of choice using the mouse.

Negeri:
<SELECT NAME= "Negeri" SIZE ="1">
<OPTION VALUE= "C1">Selangor</OPTION>
<OPTION VALUE= "C2" SELECTED>Kuala Lumpur</OPTION>
<OPTION VALUE= "C3">Rawang</OPTION>
<OPTION VALUE= "C4">Selangor</OPTION>
</SELECT>
Form Element
<P>JANTINA:
3) Radio Button <P><INPUT TYPE= "RADIO" NAME= "F" VALUE="1“>Perempuan</p>
<p><INPUT TYPE= "RADIO" NAME= "M" VALUE="2“CHECKED>Lelaki</p>

Radio Button is a fixed list in button form.

4) Check box

The Check Box is a form element used to


determine whether or not an item is there.

<P>HOBI:</p>
<P><INPUT TYPE= "CHECKBOX" CHECKED NAME= "Baca" VALUE="1">Membaca</p>
<p><INPUT TYPE= "CHECKBOX" NAME= "Tulis" VALUE="2">Menulis</p>
<p><INPUT TYPE= "CHECKBOX" CHECKED NAME= "Pancing" VALUE="3">Memancing</p>
<p><INPUT TYPE= "CHECKBOX" NAME= "Sukan" VALUE="3">Bersukan</p>
Form Element
<P>HURAIAN :
5) Text Area <TEXTAREA NAME= "Comments" ROWS= "5" COLS= "50" WRAP="VIRTUAL">
Sila masukkan huraian ringkas tentang diri anda.</TEXTAREA></P>

Text Area is a form element that allows


users to insert text that exceeds one line.

6) Button
Executes operations when clicked.
The 3 operations: Running an application, submitting
a form and resetting information in a form.

<INPUT TYPE = "SUBMIT" VALUE ="Sila Daftar..!">


<INPUT TYPE = "RESET" VALUE ="Batalkan Pendaftaran..!">
Form Element
Form Element
Q2
• Use HTML and JavaScript to
create an online enquiry form to
allow the visitor to post any
enquiry about COVID-19
pandemic as shown in the Figure
1 (Sample form). When the visitor
clicks the “Submit” button, the
output will be displayed as shown
in the Figure 2 (Sample of data
displayed).
Figure 1: Sample Form / Rajah 1: Contoh Borang

You might also like