WEB DEVELOPMENT 1

Learning Groups: P107, P108, E101, P102

Lecturer: Mr. Maina Samuel
week 3 learning topics

 4.0 HTML forms input attributes, form attributes.

 4.1 HTML frames
 4.2 HTML i frame (inline frames)


4.0 HTML forms

HTML forms are used to collect user input.

1|P ag e
The <form> element defines an HTML form:

<form>
.
form elements
.
</form>

Form elements- are different types of input elements, checkboxes, radio buttons, submit
buttons, and more.

1. The <input> Element

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

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

Input type attribute. Examples.

Text Defines normal text input

Radio Defines radio button input (for selecting one of many choices )

Submit Defines a submit button (for submitting the form)

Password

Checkbox

Text Input

<input type="text"> defines a one-line input field for text input:

2|P ag e
 2. Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

3|P ag e
 3. The Submit Button

<input type="submit"> defines a button for submitting a form to a form-

handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

The Action Attribute

The action attribute it’s used to specify the URL of the document where the data to be
sent after the submission of the form. Can be used in the <form >element

<form action="url ">

<form action="action_page.php">

Possible values of the URL

 Absolute URL – An absolute URL contains the entire address from the protocol
(HTTPS) to the domain name (www.example.com)
 Relative URL- A Relative File Path points to an asset, relative to the current
page <img src="/img/photo.jpg" alt="Photo of Something">

4|P ag e
When Should You Use Absolute or Relative file paths?
Let’s break it down like this, if you are
 linking to content on your website, it’s often best to use a Relative file path.
 If you’re linking to an external source or website, then use an Absolute URL.

Why use absolute url?

1. Makes it difficult to clone your site

Cloned websites are used by cybercriminals to defraud a company’s customers. To
create clones, they use scraping tools that search and copy a site’s content. Absolute
URLs make it more difficult for them to do this.
2. Stops duplicate content
Duplicate website content can impact your SEO and your site’s ranking. Absolute URLs
help prevent duplicate content issues. Search engines, for example, consider the http://,
http://www, https:// and https://www versions of a website as different websites. If all
these versions were crawled and the site used relative URLs, it could lead the search
engines to index four versions of each of your web pages. As absolute URLs contain the
specified protocol, this cannot happen.
3. Assists with search engine indexing
Search engine crawlers index your site by following internal links. However, they don’t
always search the whole site. Using absolute URLs, however, makes it easier for them to
index more of your site quickly so that more of your pages are searchable online.

Why use Relative url?

1. Faster coding and development

You can code a website far easier if you only need to use, shorter relative URLs. If you
are developing a website and have live and developmental versions with different
domains, relative URLs allow you to bring your newly developed site online without
having to modify all the URLs to those of your live site.
2. Internal linking
Remember, relative URLs can only be used to link to resources with the same root
directory

5|P ag e
Form Attributes
ATTRIBUTE VALUE

name This attribute specifies the name of the form.

action specifies the destination URL

method This attribute specifies method by which data will be

passed to server. Example -GET and POST

enctype This attribute species encryption type for the data before it

is passed to the server.

HTTP Request Methods

The Hypertext Transfer Protocol (HTTP) is designed to enable communications between

clients and servers.

HTTP works as a request-response protocol between a client and server.

Example: A client (browser) sends an HTTP request to the server; then the server
returns a response to the client. The response contains status information about the
request and may also contain the requested content.

HTTP Methods

 GET
 POST
 PUT
 HEAD
 DELETE
 PATCH
 OPTIONS

The two most common HTTP methods are: GET and POST.

6|P ag e
The Method Attribute

The method attribute specifies the HTTP protocol method (GET or POST) to be
used when submitting the forms:

<form method="get" action="page.html"> </form>

Or

<form method="post" action="page.html"> </form>

The GET Method

GET is used to request data from a specified resource.

GET is one of the most common HTTP methods.

Note that the query string (name/value pairs) is sent in the URL of a GET
request: https:

/test/demo_form.php? name1=value1&name2=value2

//www.xul.fr/page.html? color=blue shape=rectangle

Some other notes on GET requests:

 GET requests can be cached

 GET requests remain in the browser history
 GET requests can be bookmarked
 GET requests should never be used when dealing with sensitive data
 GET requests have length restrictions
 GET requests are only used to request data (not modify)

7|P ag e
The POST Method

POST is used to send data to a server to create/update a resource.

The data sent to the server with POST is stored in the request body of the HTTP request:

Some other notes on POST requests:

 POST requests are never cached

 POST requests do not remain in the browser history
 POST requests cannot be bookmarked
 POST requests have no restrictions on data length

Input Type: password

<input type="password"> defines a password field:

8|P ag e
Input Type: checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example 1: A simple form to demonstrate the concept learned

9|P ag e
Example 2: creating a customer Review form

10 | P a g e
11 | P a g e
 Output

4.1 HTML frames

HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. Or a sub window inside an active
browser. possible to have more than two frames in a web page.

A collection of frames in the browser window is known as a frameset. The window is

divided into frames in a similar way the tables are organized: into rows and columns.

Frames were introduced in order to aid navigation through complex webpages. For
example, one frame could hold a menu of links, while their associated web pages are
displayed in another frame.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames
in your webpages −
 Some smaller devices cannot cope with frames often because their screen is not
big enough to be divided up.

12 | P a g e
  Sometimes your page will be displayed differently on different computers due to
different screen resolution.
 There are still few browsers that do not support frame technology.

Syntax HTML <frameset> <frameset cols=" ">............</frameset>

< frame src = "URL" > *hint frame has no <body>tag

Creating vertical frames. Create web folder and using sublime txt save all frame
documents in one folder.

1. Step one index frame page that will be used to run the linked src frames as
frame.html

2. Step two save as frame1.html

13 | P a g e
 3. Step three save as frame2.html

4. Step four save as frame3.html

Output

14 | P a g e
 4.2 HTML i frame (inline frames)
What is i frame?

To put it simply, it’s a separate web page inside of your existing web page.
Examples of iframes include tweets embedded into news articles, YouTube videos
embedded into a blog post, sidebar ads, social media buttons – the list is nearly endless.

Why are frames inHTML5 OBSOLETE? (entirely removed)

Framesets are often used in a way where they break the fundamental principle of the
Web - that each document has a single URL while current screen is now determined by
a sequence of navigation actions rather than a single navigation action. This leads to
problems with linking, bookmarks, search engines.

What is sequence navigation A ‘next’ and ‘previous’ link to pages that come before or
after the user’s current web page…example of sequence navigation

What’s the difference between frame and i frame?

Frame Iframe

Frame is part of a Frameset. is the fact that an Iframe is an inline frame

Frames are a bunch of 'boxes' put together to Inline frame is just one "box" and you can place
make one site with many pages it anywhere on your site.

frame cannot be placed in the body iframe tag is that it can be used to load external
html or xhtml pages into the current document
without disturbing the original page.

15 | P a g e
Uses of frames

 To embed and isolate third-party content into a website.

 Most of web advertising solutions are based on iframes - because they give
security (cross-domain policy) and isolated rectangle on screen which can be
fully managed by third party content and scripting (a common use case is
advertisements).

Example 1 illustrating iframe with dimensions’ width and height.

16 | P a g e
Revision Questions

1. Create a web page which should generate following output:

2. . Create a simple form

 accepting Name
 Enrollment No.
 and Submit button

NB: these individual’s practical revision exercises if tried will improve your coding skills.

Next topic lesson will be on java script since CSS (cascading style sheet) have been tacked inside
html lessons then week 7 online CAT but you can give your views I receive them from your
class reps.

17 | P a g e