[go: up one dir, main page]
Scribd
Upload
34 views19 pages

Week 7 8

Web development lecture

Uploaded by

fredo gaming
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
34 views19 pages

Week 7 8

Web development lecture

Uploaded by

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

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

National Highway, Crossing Rubber, Tupi, South Cotabato

COLLEGE OF INFORMATION AND COMMUNICATION TECHNOLOGY

___________________________________________________

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 1 of 19
LEARNING MODULE
FOR
IT 123: WEB DEVELOPMENT 1

_____________________________________________________

WEEK 7 & 8

COURSE OUTLINE

COURSE CODE : IT 123


TITLE : Web Development 1
TARGET POPULATION : All BS Information Technology Students
:

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 2 of 19
Overview:

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.

 Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link
available on a webpage is called Hypertext.

 As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text
document with tags that tell a Web browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs,
lists, and so forth to facilitate the sharing of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.

Content:

Forms
 How to collect information from visitors
 Different kinds of form controls
 New HTML form controls

Objectives:

General Objective

 To know how to create forms on your website


 To understand the importance of form to your website
 To know the different tools for collecting data

Instruction to the Learner

Each chapter in this module contains a major lesson involving the basics of Web page coding and HTML editing
tool. The units are characterized by continuity, and are arranged in such a manner that the present unit is related to
the next unit. For this reason, you are advised to read this module. After each unit, there are exercises to be given.
Submission of task given will be every Monday during your scheduled class hour.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 3 of 19
Why Forms?
The best known form on the web is probably the search box that sits right in the middle of Google’s homepage.

In addition to enabling users to search, forms also allow users to perform other functions online. You will see forms
when registering as a member of a website, when shopping online, and when signing up for newsletters or mailing
lists.

Form Controls
There are several types of form controls that you can use to collect information form visitors to your site.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 4 of 19
How forms work
A user fills in a form and then presses a button to submit the information to the server.

A form may have several form controls, each gathering different information. The server needs to know which piece
of inputted data corresponds with this form element.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 5 of 19
Form Structure

<form> Example
Form controls live inside a <!DOCTYPE html>
<form> element. This element <html>
should always carry the action <head>
attribute and will usually have <body>
a method and id attribute too. <form action="http://www.example.com/subscribe.php"
method="get">
<p>This is where the form controls will appear.</p>
action </form>
Every (form) element requires <body>
an action attribute. Its value is </html>
the URL for the page on the
server that will receive the
information in the form when Output
it is submitted.

method
forms can be sent using one
of two methods: get or post.

With the get method, the values With the post method the If the method attribute is not
from the form are added to the values are sent in what are used, the form data will be sent
end of the URL specified in the known as HTTP headers. As a using the get method.
action attribute. The get method rule of thumb you should use
is ideal for: the post method if your form:
 Short forms (such as search  Allows users to upload a file
boxes) is very long.
 When you are just retrieving  Contains sensitive data (e.g.
data from the web server passwords)
(not sending information  Adds information to, or
that should be added to or deletes information from, a
deleted from a database) database.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 6 of 19
Text Input

<input>
The <input> elements is used to create several different form controls. The value of the type attribute determines
what kind of input they will be creating.

Type=”text”
When the type attribute has a value of text, it creates a single-line text input.

Name
When users enter information into a form, the server needs to know which form control each piece of data was
entered into. (For example, in a login form, the server needs to know what has been entered as the username and
what has been given as the password.) Therefore, each form control requires a name attribute. The value of this
attribute identifies the form control and is sent along with the information they enter to the server

maxlength
You can use the maxlength attribute to limit the number of characters a user may enter into the text field. Its value
is the number of characters they may enter. For example, if you were asking for a year, the maxlength attribute
could have a value of 4.

Size
The size attribute should not be used on new forms. It was used in older forms to indicate the width of the text input
(measured by the number of characters that would be seen).

Example
<!DOCTYPE html>
<html>
<head>
<body>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" />
</p>
</form>
<body>
</html>

Output

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 7 of 19
Password Input

<input>

type=”password”
When the type attribute has a value of password it creates a text box that acts just like a single-line text input,
except the characters are blocked out. They are hidden in this way so that if someone is looking over the user's
shoulder, they cannot see sensitive data such as passwords.

Name
The name attribute indicates the name of the password input, which is sent to the server with the password the user
enters.

Size, maxlength
It can also carry the size and maxlength attributes like the the single-line text input.

Example
<!DOCTYPE html>
<html>
<head>
<body>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" size="15" maxlength="30" />
</p>
</form>
<body>
</html>

Output

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 8 of 19
Text Area

<textarea>
The <textarea> element is used to create a mutli-line text input. Unlike other input elements this is not an empty
element. It should therefore have an opening and a closing tag. Any text that appears between the opening
<textarea> and closing</textarea> tags will appear in the text box when the page loads.

Example
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="http://www.example.com/comments.php">
<p>What did you think of this gig?</p>
<textarea name="comments" cols="20" rows="4">Enter
your comments...</textarea>
</form>
<body>
</html>

Output

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 9 of 19
Radio Button
<input>

type=”radio” Example
Radio buttons allow users to pick <!DOCTYPE html>
just one of a number of options. <html>
<head></head>
name <body>
The name attribute is sent to the <form
server with the value of the option action="http://www.example.com/profile.php">
the user selects. When a question <p>Please select your favorite genre:
provides users with options for <br />
answers in the form of radio buttons, <input type="radio" name="genre"
the value of the name attribute value="rock"
checked="checked" /> Rock
should be the same for all of the
<input type="radio" name="genre"
radio buttons used to answer that
value="pop" />
question. Pop
<input type="radio" name="genre"
value value="jazz" />
The value attribute indicates the Jazz
value that is sent to the server for </p>
the selected option. The value of </form>
each of the buttons in a group <body>
should be different (so that the </html>
server knows which option the
user has selected). Output

checked
The checked attribute can be used
to indicate which value (if any)
should be selected when the page
loads. The value of this attribute is
checked. Only one radio button in
a group should use this attribute.

Note:
Once a radio button has been selected it cannot be deselected. The user can only select a different option. If you are
only allowing the user one option and want them to be able to deselect it (for example if they are indicating they
agree to terms and conditions), you should use a checkbox instead.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 10 of 19
Checkbox
<input>

type=”checkbox” Example
Checkboxes allow users to select <!DOCTYPE html>
(and unselect) one or more options <html>
in answer to a question. <head></head>
<body>
name <form
The name attribute is sent to the action="http://www.example.com/profile.php">
server with the value of the <p>Please select your favorite music
option(s) the user selects. service(s):
<br />
<input type="checkbox" name="service"
value
value="itunes" checked="checked" />
The value attribute indicates the
iTunes
value sent to the server if this
<input type="checkbox" name="service"
checkbox is checked. value="lastfm" /> Last.fm
<input type="checkbox" name="service"
checked value="spotify" /> Spotify
The checked attribute indicates that </p>
this box should be checked when the </form>
page loads. If used, its value should <body>
be checked.
Output

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 11 of 19
Drop Down List Box

<select> Example
A drop down list box (also <!DOCTYPE html>
known as a select box) allows <html>
users to select one option from <head></head>
a drop down list. The <select> <body>
element is used to create a drop <form
down list box. It contains two or action="http://www.example.com/profile.php">
more <option> elements. <p>What device do you listen to music on?
</p>
name <select name="devices">
<option value="ipod">iPod</option>
The name attribute indicates the
<option value="radio">Radio</option>
name of the form control being
<option
sent to the server, along with the
value="computer">Computer</option>
value the user selected. </select>
</form>
<option>
The <option> element is used to Output
specify the options that the user
can select from. The words between
the opening and closing tags will be
shown to the user in the drop down
box.

value
The <option> element uses the value
attribute to indicate the value that is
sent to the server along with the name
of the control if this option is selected.

Selected
The selected attribute can be used to The function of the drop down list box is
indicate the option that should be
similar to that of the radio buttons (in that
selected when the page loads. The
only one option can be selected). There are
value of this attribute should be
selected. two key factors in choosing which to use:

1. If users need to see all options at a


The selected attribute can be used glance, radio buttons are better suited.
to indicate the option that should be
2. If there is a very long list of options (such
selected when the page loads. The
as a list of countries), drop down list
value of this attribute should be
boxes work better.
selected.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 12 of 19
Multiple Select Box

<select>
size Example
You can turn a drop down select <!DOCTYPE html>
box into a box that shows more <html>
than one option by adding the size <head></head>
attribute. Its value should be the <body>
<form action="http://www.example.com/profile.php">
number of options you want to <p>Do you play any of the following instruments?
show at once. In the example you (You can select more than one option by holding
can see that three of the four down control on a PC or command key on a Mac
options are shown. while selecting different options.)</p>
<select name="instruments" size="4"
multiple="multiple">
Unfortunately, the way that browsers <option value="guitar" selected="selected">
have implemented this attribute is Guitar</option>
not perfect, and it should be tested <option value="drums">Drums</option>
thoroughly if used (in particular in <option value="keyboard"
Firefox and Safari on a Mac). selected="selected">Keyboard</option>
<option value="bass">Bass</option>
</select>
multiple </form>
You can allow users to select multiple <body>
options from this list by adding the </html>
multiple attribute with a value of
multiple.
Output

Note
It is good idea to tell users if they
can select more than one option
at a time. It is also helpful to indicate
that on a PC they should hold down
the control key while selecting
multiple options and on a Mac they
should use the command key while
selecting options.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 13 of 19
File Input Box

<input> Example
If you want to allow users to <!DOCTYPE html>
upload a file (for example an <html>
image, video, mp3, or a PDF), <head></head>
you will need to use a file <body>
<form action="http://www.example.com/upload.php"
input box.
method="post">
<p>Upload your song in MP3 format:</p>
type=”file” <input type="file" name="user-song" /><br />
This type of input creates a box <input type="submit" value="Upload" />
that looks like a text input </form>
followed by a browse button. <body>
</html>
When the user clicks on the
browse button, a window opens
up that allows them to select a
file from their computer to be Output
uploaded to the website.

Submit Button
<input>

type=”submit” Example
The submit button is used to <!DOCTYPE html>
send a form to the server. <html>
<head></head>
name <body>
<form
it can use a name attribute but action="http://www.example.com/subscribe.php">
it does not need to have one. <p>Subscribe to our email list:</p>
<input type="text" name="email" />
value <input type="submit" name="subscribe"
The value attribute is used to value="Subscribe" />
</form>
control the text that appears <body>
on a button. It is a good idea </html>
to specify the words you want
to appear on a button because
the default value of buttons on Output
some browsers is ‘Submit query’
and this might not be appropriate
for all kinds of form.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 14 of 19
Image Button

<input>
type=”image”
If you want to use an image for the submit button, you can give the type attribute a value of image. The src, width,
height, and alt attributes work just like they do when used with the <img> element.

Example Output
<!DOCTYPE html>
<html>
<head></head>
<body>
<form
Output
action="http://www.example.org/subscribe.p
hp">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image"
src="images/subscribe.jpg"
width="100" height="20" />
</form>
<body>
</html>

Button & Hidden Controls

<button> Example
The <button> element was
<!DOCTYPE html>
introduced to allow users more <html>
control over how their buttons <head></head>
appear, and to allow other <body>
elements to appear inside the <form action="http://www.example.com/add.php">
button. This means that you <button><img src="images/add.gif"
can combine text and images alt="add"
between the opening <button> width="10" height="10" /> Add</button>
tag and closing </button> tag. <input type="hidden" name="bookmark"
value="lyrics" />
<input> </form>
type=”hidden” <body>
</html>
This example also shows a hidden
form control. These form controls Output
are not shown on the page
(although you can see them if you
use the View Source option in the
browser). They allow web page
authors to add values to forms
that users cannot see. For example,
a web page author might use a
hidden field to indicate which page
the user was on when they
submitted a form.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 15 of 19
Labelling Form Controls

<label> Example
When introducing form controls, <!DOCTYPE html>
the code was kept simple by <html>
indicating the purpose of each <head></head>
one in text next to it. <body>
<label>Age: <input type="text"
name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender"
value="f">
<label for="female">Female</label>
The <label> element can be used
<input id="male" type="radio" name="gender"
in two ways. It can: value="m">
1. Wrap around both the text <label for="male">Male</label>
description and the form <body>
input (as shown on the first </html>
line on the example to the
right). Output
2. Be kept separate from the
form control and use the
for attribute to indicate
which form control it is a
label for (as shown with
the radio button).

Grouping Form Elements

<fieldset> Example
You can group related form <!DOCTYPE html>
controls together inside the <html>
<fieldset> element. This is <head></head>
particularly helpful for longer <body>
<fieldset>
forms. Most browsers will <legend>Contact details</legend>
show the fieldset with a line <label>Email:<br />
around the edge to show how <input type="text" name="email"
they are related. The /></label><br />
appearance of these lines <label>Mobile:<br />
<input type="text" name="mobile" /></label><br
can be adjusted using CSS. />
<label>Telephone:<br />
<legend> <input type="text" name="telephone" /></label>
The <legend> element can </fieldset>
come directly after the <body>
opening <fieldset> tag Output
and contains a caption
which helps identify the
purpose of that group
of form controls.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 16 of 19
HTML: Form Validation
Example
You have probably seen forms <!DOCTYPE html>
on the web that give users <html>
messages if the form control <head></head>
has not been filled in correctly; <body>
<form action="http://www.example.com/login/"
this is known as form validation. method="post">
<label for="username">Username:</label>
Traditionally, form validation <input type="text" name="username"
has been performed using required="required" /></title><br /> <br />
JavaScript (which is beyond the <label for="password">Password:</label>
<input type="password" name="password"
scope of this book). But HTML5 required="required" />
is introducing validation and <input type="submit" value="Submit" />
leaving the work to the browser. </form>
<body>
Validation helps ensure the </html>
user enters information in a form
that the server will be able to Output
understand when the form is
submitted. Validating the
contents of the form before it is
sent to the server the helps:

 Reduce the amount of work


the service has to do
 Enables users to see if there
are problems with the form
faster than if validation were
performed on the server.

HTML: Date Input

<input> Example
Many forms need to gather <!DOCTYPE html>
information such as dates, <html>
email addresses, and URLs. <head></head>
<body>
This has traditionally been
<form action="http://www.example.com/bookings/"
done using text inputs. method="post">
HTML introduces new form <label for="username">Departure date:</label>
controls to standardize the <input type="date" name="depart" />
way that some information <input type="submit" value="Submit" />
is gathered. Older browsers </form>
<body>
that do not recognize these </html>
inputs will just treat them
as a single line text box.
Output
type=”date”
If you are asking the user for
a date, you can use an <input>
element and give the type
attribute a value of date.
This will create a date input
in browsers that support
the new HMTL input types.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 17 of 19
HTML: Email & URL Input
Example
<input> <!DOCTYPE html>
HTML has also introduced <html>
inputs that allow visitors to <head></head>
enter email addresses and <body>
<form
URLs. Browsers that do not
action="http://www.example.org/subscribe.php">
support these input types <p>Please enter your email address:</p>
will just treat them as text <input type="email" name="email" />
boxes. <input type="submit" value="Submit" />
</form>
<body>
type=”email”
If you ask a user for an email Output
address, you can use the email
input. Browsers that support
HTML validation will check that
the user has provided information
in the correct format of an email
address. Some smart phones also
optimize their keyboard to display
the keys you are most likely to
need when entering an
email address (such as the Example
@ symbol). <!DOCTYPE html>
<html>
<head></head>
type=”url” <body>
A URL input can be used when <form action="http://www.example.org/profile.php">
<p>Please enter your website address:</p>
you are asking a user for a web <input type="url" name="website" />
page address. Browsers that <input type="submit" value="Submit" />
support HTML validation will </form>
check that the user has <body>
provided information in the </html>
format of a URL. Some smart
phones also optimize their Output
keyboard to display the keys
you are most likely to need
when entering a URL.

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 18 of 19
Review Questions
1. What is the primary purpose of the form element?
2. What does the HTML button input element typically do?
3. What does the HTML password element do?
4. What is the reset input element for?
5. The text input element is particularly useful for what type of item?
6. What type of HTML form element is particularly good for menus?
7. What is the advantage of grouping several checkboxes together?
8. When it is appropriate to use forms?
9. Is the size of the text a user can enter in a text field limited by the value of the SIZE attribute in the <input>
tag?
10. How do menu buttons and scrolling lists differ in how they save space on a Web?

Test Yourself
1. Add 2 radio button to the form. One for “male”, and one for “female”, both with name=”gender”.
Sample Output:

2. Add a submit button to the form, and specify that the form should go to “demo_form.html”.
Sample Output:

Challenge
1. Open a new notepad or any HTML text editor.
2. Create a simple Registration form containing the following:
a. First Name
b. Middle Name
c. Last Name
d. Gender (radio button)
e. Address
f. Date of birth (date)
g. Hobbies (check box)
h. Marital Status (radio button)
i. Submit and Reset button
j. “I accept” check box.
3. After creating your registration form save it on your folder and name it “registration.html.”

IT 123 : Web Development 1

SOUTH EAST ASIAN INSTITUTE OF TECHNOLOGY, INC.

Page 19 of 19

You might also like