CPC 223(b)

Web Application Development

AY 2021 – 2022 2nd Semester

Lesson 1: Getting started with the Web

Topics Covered:

Lesson 1: Getting started with the Web

• Web overview
• Common Software used
• Installing basic software
• Dealing with files
• Website file and folder naming convention
Web overview

• Mr. Tim Berners-Lee in late 1991 created the first HTML and was released officially and published
during 1995 and it was called as the HTML 2.0. Its main purposed then was just to use it use and
share documents. As the year progress and HTML was evolving, in the late 1999 HTML 4.01 was
published and was a major version of HTML. HTML is a very evolving markup language and has
evolved with various versions updating. Today the recent version of HTML is 5.

• HTML known as the Hypertext Markup Language, is a standard the construction and presentation of
information over the Internet. Web developers uses HTML tags to instruct a Web browser how the
content on the web will be placed and display as Web pages.
Common Software used
When people speak about web development tools, they're usually referring to the apps and software that
allows web developers to test and debug the code and interface of a website or web application.

 A computer. Maybe that sounds obvious to some people, but some of you are reading this article on your phone
• or a library computer. For serious web development, it's better to invest in a desktop or laptop
• computer running Windows, macOS or Linux.

 A text editor. One of the tools we need for us to be able to create a web page is a text editor. here are some of
• the most known text editor that we can use in developing web applications. Popular text editor used are as follows:

• • Visual Studio Code

• • Notepad++
• • Sublime Text
• • Atom
• • or a hybrid editor like Dreamweaver or WebStorm
Common Software used
 Web browsers. Currently, the most-used browsers are

• • Firefox
• • Chrome
• • Opera
• • Safari
• • Microsoft Edge

Note:

• You should also test how your site performs on mobile devices and on any old browsers your target
audience may still be using (such as IE 8–10). A graphics editor, like GIMP, Figma, Paint.NET,
Photoshop, Sketch or XD, to make images or graphics for your web pages.
Common Software used

 Web Design and Prototyping Tools. Part of being a web designer is understanding what goes into good
UI and UX design—from prototyping and wire-framing to creating a visual language for your
app. These design tools are vital.

• Adobe XD
• Sketch
• Balsamiq
Common Software used
 Servers. is a computer or system that provides resources, data, services, or programs to other computers,
known as clients, over a network. In theory, whenever computers share resources with client
machines they are considered servers.

Sample Local Server used in Web Application Development are:

 XAMPP
 LAMP
 WAMP
 MAMP
Common Software used
 Database. is an organized collection of structured information, or data, typically stored electronically in a
computer system. A database is usually controlled by a database management system (DBMS).
Some database used in web application development are:
 MySQl
 PostgreSQL
 SQLite
 Microsoft SQL Server
 Amazon Relational Database Service (RDS)
Installing basic software
• Installing a text editor
• Installing modern web browsers
• Installing a local web server
Alternative sites:

For HTML, CSS & JavaScript

 https://codepen.io/pen/
 https://www.w3schools.com/tryit/

For PHP

 https://sandbox.onlinephpfunctions.com/
Dealing with files
• Where should your website live on your computer?
• An aside on casing and spacing
• What structure should your website have?
• File paths
Dealing with files
An aside on casing and spacing
You'll notice that throughout this article, we ask you to name folders and files completely in lowercase with
no spaces. This is because:

1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your
website at test-site/MyImage.jpg and then in a different file you try to invoke the image as test-
site/myimage.jpg, it may not work.

1. Browsers, web servers, and programming languages do not handle spaces consistently. For example, if
you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will
replace the areas in your filenames with "%20" (the character code for spaces in URLs), resulting in all
your links being broken. It's better to separate words with hyphens, rather than underscores: my-file.html
vs. my_file.html.
Dealing with files
What structure should your website have?
Next, let's look at what structure our test site should have. The most common things we'll have on any website project we create are an
index HTML file and folders to contain images, style files, and script files. Let's create these now:

1. index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to
your site. Using your text editor, create a new file called index.html and save it just inside your test-site folder.

2. images folder: This folder will contain all the images that you use on your site. Create a folder called images, inside your test-site
folder.

3. styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors).
Create a folder called styles, inside your test-site folder.

4. scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load
data when clicked). Create a folder called scripts, inside your test-site folder.
Dealing with files

File paths

To make files talk to one another, you have to provide a file path between them — basically a route, so
one file knows where another one is.
Website file and folder naming convention
File Types
On the Web Application Development, we will encounter several files and it is important that we knew what type of file we will be dealing with.

File Type Filename Extension Icon

HTML .html

CSS .css

JS .js

PHP .php
Project Structure
Project Structure is simple the organization of such files into sub folders. One main objective of doing this is for us to be
able to easily locate the files we are trying to open or gain access with it.

Below is an example of an organized file of a sample web application project

This is the main folder and the name of

the project
This is where the Styling sheets or the
Cascading Style Sheet files are being
stored

This is where the images use in the web

page files are being stored

This is where the JavaScript files are

being stored

This is the initial page or the landing page

file of the web page
Topics Covered:

Lesson 2: HTML - Structuring the Web

CPC 223(b)
Web Application Development
AY 2021 – 2022 2nd Semester

LESSON 2: HTML - STRUCTURING THE WEB

Topics Covered:

Lesson 2: HTML - Structuring the Web

• Getting started with HTML
• What's in the head? Metadata in HTML
• HTML text fundamentals
• Creating hyperlinks
• Document and website structure
Getting started with HTML

Understanding the HTML structure

We’ve got two (2) main parts of the HTML structure

1. The Head
2. The Body

The Head part contains all the details a web page needed but will not be seen on the web page. It takes
care all the behind the scenes happening on the web application. The body part is the one responsible on
the content to be displayed on the web page. Anything written between the body tag will be displayed on
the web page.
Getting started with HTML
Understanding the HTML structure
The Start and the
ending of the
HTML code

Head

Body
Getting started with HTML
Understanding the HTML structure
NOTE:

When saving an HTML file always make sure that the save as type file will always be HTML

HTML
Getting started with HTML
Understanding the HTML structure
Doctypes

Doctypes simple means ‘document type'. This helps the browsers understand the version of an HTML document. Doctype
declarations are not HTML tags and belong at the very top of a document. In declaring the doctype it should always be added at the
top of an HTML document, before the <html> tag. The latest doctype declaration is <!DOCTYPE>. This indicates that the html
version is an HTML5

Below is a sample html code with doctype declaration.

NOTE:

While if you were asking if the DOCTYPE is case sensitive? The answer is
No. therefore the following DOCTYPEs are also valid:

<!doctype html>

<!dOCtyPe html>

<!DocTYpe html>
Getting started with HTML
Understanding the HTML structure
Comments

Every Source code need to a hint or remarks. So, for us to do that we will be using the HTML comments tags. The HTML Comment tags are not displayed in
the browser, as the source code rendered, anything between the HTML comment tags will not be displayed. Comment can help document your HTML source
code served as guide or remarks so that if anyone will work on your code, they will immediate have an hint what the source code was for.

To add comments to your HTML source used the following syntax:

This is a single line comment

<!-- Write your comments here -->

This is a multiple line comment

<!--
Write your comments here
Write your comments here
Write your comments here
-->

Note that the exclamation point (!) is in the start tag only and not in the end tag.
What's in the head? Metadata in HTML
Meta Information

The metadata about an HTML document was defines by the <meta> tag. A metadata is data
(information) about data. The <head> element will always have the Html <meta> tags inside it. It is
usually used to specify character set, page description, keywords, author of the document, and viewport
settings. The Metadata will not be displayed on the webpage. Metadata is used by browsers on how to
display content or reload page, search engines (keywords), and other web services.

The Meta tag usually used to:

• character set
• page description
• keywords
• author of the document
• viewport settings.
What's in the head? Metadata in HTML
Function Tag

Define keywords for search engines: <meta name="keywords" content="HTML, CSS">

Define a description of your web page: <meta name="description" content="Web Application Development Class">

Define the author of a page: <meta name="author" content="Reden Paul">

Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">

Setting the viewport to make your website <meta name="viewport" content="width=device-width, initial-scale=1.0">
look good on all devices:
HTML text fundamentals

Headings

The heading HTML tags were defined as a title or a subtitle whenever you want to display on the
webpage. heading tags characterize by six heights of section headings. <h1> which display the biggest
font size while <h6> has the smallest font size to display. The <h1> tag is mainly used for most
significant heading and <h6> is used for least significant detail or information on the webpage.
HTML text fundamentals
Headings

The examples are given below for the heading HTML tags from <h1> tag to <h6> tag.
Tag Display

<h1>Hello Class</h1> Hello Class

<h2> Hello Class </h2> Hello Class
<h3> Hello Class </h3> Hello Class
<h4> Hello Class </h4> Hello Class

<h5> Hello Class </h5>

Hello Class

Hello Class
<h6> Hello Class </h6>
HTML text fundamentals
Paragraphs
The HTML tag paragraph or the <p> tag main purpose is to define a paragraph in a webpage. The <p>
tag specifies the starting of new paragraph within a webpage. If we will be using various <p> tags in one
HTML file the browser will automatically add one single blank line between the two <p> tag or
paragraphs. The paragraph will always be the starts on a new line, and is frequently a block of text.
The browser will automatically remove any extra spaces and lines when the page is displayed:
HTML text fundamentals
Text Formatting
The HTML Text Formatting formats the text to have a better look and feel. These tags offer us ability to
format text without using CSS. Let us have some of the formatting tags in HTML. These tags are used on
a webpage to make the content text bold, italicized, or underlined.

The HTML Text Formatting tags are divided into two types:

1. Physical tag: provides the visual appearance to the text.

2. Logical tag: used to add some logical or semantic value to the text.
HTML text fundamentals
Text Formatting
Element name Description
<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.
Creating hyperlinks
Anchors and Hyperlinks
The connection from one web page to another web page or website is what we called a link. We also use hyperlink as
other term for the connection of one webpage from the other webpage. It allows the users to navigate and move from
one page to the other page effortless.

A link is composed of what we called anchors. It starts the anchor and points to the destination anchor or what we call
path that makes the composition of the URL on are webpage or website.

the default links will look like this as follow in most of the browsers:

 A purple underlined on the clicked or visited link.

 A blue underlined on the link that is not clicked or visited.
 A red underlined on an active link.
The HTML<a> tag is used to specified a link. The <a> tag has the attribute of href that specifies the target or
destination of the link. Its value can be an absolute or relative URL. An absolute URL includes every part of the path
or URL format. It includes the http:// or https:// prefix. While the relative URL never includes the http:// or https://
prefix.
Creating hyperlinks
Below are the two examples of an absolute URL and a relative URL:

Absolute URL
• https://www.yahoo.com/ Path or the URL
Link Syntax

• https://www.google.com/
• https://www.facebook.com/
taskapp/user/admin/register.html
<a href="url">Link text</a>
Relative URL

• register.html
Root Folder Filename & Filename
• pic/user.png Opening
Text Link Extension
Anchor Tag File path Closing Anchor
Tag Sub Folder
• admin/contact/formfill.html
Hypertext
REFerence Sub Folder of the sub
Note: folder

The path or URL is where the location of the file saved on your computer.
URL stands for Uniform Resource Locator. This is also the internet address of a webpage or website. It is a standardized
naming convention for addressing documents we access over the Internet.
Document and website structure

Div Element

The element div in the HTML is a container that summarizes other elements and can be used to group and
separate parts of a webpage. The element div itself does not fundamentally represent anything. We consider it as an empty box, yet its
usefulness is too powerful as used as tool in web design.

To divide or section other HTML tags we add an attribute to a div element tag. We used Id or class attribute to give identification for each
div tag used in the html page or website.

To label sections or parts of your HTML document one of the two attribute called ID can be used. However using an ID you must take
note that it can only be used once per page, You may not use the same ID on the page so save it for important major sections of your page.

The other attribute we can use to divide or section other HTML tag is called class. The Class attribute can be used multiple times within
the web page unlike ID which can only be used only once per page.
Document and website structure
Div Element
Sample div syntax

<div>
<p>Hello Class! This is a line div syntax.</p>
</div>

<div id = ”name”>
<p>Hello Class! This is a line div syntax.</p>
</div>

<div class = ”name”>

<p>Hello Class! This is a line div syntax.</p>
</div>
Document and website structure
Nesting div tags

One common practice using div is to place <div> inside another <div>. The <div class="outer-div">
is used to group together two <div class="inner-div"> elements; each containing a <p> element.

<div class="outer-div">

<div class="inner-div">
<p>This is the first line sample</p>
</div>

<div class="inner-div">
<p>This is another line sample </p>
</div>
</div>
Document and website structure

Sectioning Elements

Aside from div there are other tags in HTML called semantic elements that can be used to
define different parts of a web page. Here are some of the following tags use as follows:
Tags Description
• <header> <header> <header> element represents a container for introductory content or a set of navigational links.

• <nav>
• <aside> <nav>
<nav> element defines a set of navigation links.

• <section> <aside> The <aside> element defines some content aside from the content it is placed in (like a sidebar).

• <article>
• <footer> <aside>
<section>
<aside>
<section> defines a section in a document.

<article> element specifies independent, self-contained content.

<article>
<footer> element defines a footer for a document or section.

<footer>
Document and website structure

Lists
The HTML lists tag are used in presenting a list of information in a website or webpage. Below are the three types of HTML
list.
Unordered list - Used to create a list of related items, in no particular order.
An unordered list created using the <ul> tag, and each list item starts with the <li> element.
<ul>
<li>ID Number</li>
<li>Name</li>
<li>Section</li>
</ul>
This will be the output of the given code above:
 ID Number
 Name
 Section
Document and website structure
Lists
We can also use list to represent sub-items of a list item by nesting it.

<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>sub-item 2.1</li>
<li>sub-item 2.2</li>
</ul>
</li>
<li>item 3</li>
</ul>
Document and website structure

Lists
Ordered list - Used to create a list of related items, in a specific order.
This created using the <ol> tag, and each list item starts with the <li> element also.
Ordered lists are used when the order of the list's items is important.

<ol>
<li>ID Number</li>
<li>Name</li>
<li>Section</li>
</ol>
This will be the output of the given code above:

1. ID Number
2. Name
3. Section
Document and website structure
We can manually change the starting numbers which numbers appear on the list items in an ordered list. By
Setting the starting number using the start attribute. The list now will start at this defined number at the attributes and continue incrementing
by one as usual.

<ol start = 100>

<li>ID Number</li>
<li>Name</li>
<li>Section</li>
</ol>

This will be the output of the given code above:

100. ID Number
101. Name
102. Section
Document and website structure
Changing the type of numeral

To change the type of numeral shown in the list item marker by using the type attribute

<ol type="1|a|A|i|I">

Type Description Examples

1 - Default value - Decimal numbers 1,2,3,4
a - Alphabetically ordered (lowercase) a,b,c,d
A - Alphabetically ordered (uppercase) A,B,C,D
i - Roman Numerals (lowercase) i,ii,iii,iv
I - Roman Numerals (uppercase) I,II,III,IV
Document and website structure
Description list - Used to create a list of terms and their descriptions.
It is a list of items with a description or definition of each item.
The description list is created using <dl> element. The <dl> element is used together with the <dt> element which specify a term,
and the <dd> element which specify the term's definition. The browsers usually render the definition lists by putting the terms
and definitions in separate lines, where the term's definitions are slightly indented.

<dl>
<dt>ID Number</dt>
<dd>The unique Identifier of the user. </dd>
<dt>Name</dt>
<dd> The given of the user. </dd>
</dl>

This will be the output of the given code above:

ID Number
The unique Identifier of the user.
Name
The given of the user.
Topics Covered:

Lesson 3: Multimedia and embedding

CPC 223(b)
Web Application Development
AY 2021 – 2022 2nd Semester

LESSON 3: MULTIMEDIA AND EMBEDDING

Topics Covered:

Lesson 3: Multimedia and embedding

• Images in HTML
• Video and audio content
Images in HTML

Images

Using Images to a webpage improves the webpage look and feel and its visual appearance it makes the web pages more
interesting and livelier.

For us to be able to add an image on our webpage the <img> tag is used. This tag will insert images in the HTML
documents. This tag is an empty element and contains attributes only. Below is a sample syntax of the <img> tag:
Images in HTML Img tag syntax

<img src="url" alt="some_text">

Image tag
Text
File path

Source attribute Alt attribute

The image syntax, two common attributes: the src attribute, and an alt attribute.

The src attribute is where we indicate the path or the URL of the image file so that the browser knows where to find the image. While the alt
attribute will also be useful as it provides an alternative text for the image if incase it is unavailable or cannot be displayed for some reason. Its
value should be a meaningful substitute for the image.
Video and audio content

At this moment were all about to talk about how HTML5 provides a new standard for embedding
an audio and or video file on a web page.

We can embed an audio file to our webpage using the <audio> element:
The syntax is provided below:

<audio controls>
<source src="file.mp3" type="audio/mpeg">
This is a sample audio element.
</audio>
Video and audio content

Here is how to embed video file on a webpage:

We can embed also a video to our webpage using the <video> element:
The syntax is provided below:

<video width="500" height="700" controls>

<source src="video.mp4" type="video/mp4">
This is a sample video element.
</video>
Video and audio content
Using HTML <audio> element to embed video/audio content in a document gives additional attraction in
our webpage especially if it is necessary or a must to insert. The video/audio element can contain one or
more video/audio sources. To specify a source, use either the src attribute or the <source> element; the
browser will choose the most suitable one.

Aside from inserting it on the main page of our page we can also use video as our webpage background. To
Add a video that will autoplay on a loop and has no controls or sound the syntax sample is given below:

<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">

<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
Topics Covered:

Lesson 4: HTML tables

CPC 223(b)
Web Application Development
AY 2021 – 2022 2nd Semester

LESSON 4: HTML TABLES

Topics Covered:

Lesson 4: HTML tables

• HTML tables overview

•HTML table basic
• Input Control Elements
HTML tables

• If you want to have a data grid to present your data on a web page, the HTML table is the tag you
are looking for. It allows you to arrange data into rows and columns. They are commonly used to
display the given data on a webpage on a tabular data like Student Data, Customer's details, Sale’s
reports, etc.

• To create a table, start using the <table> element. In the <table> element inside, use the <tr> tag to
create rows, and <td> tag to create columns inside a row. To define a cell as a header for a group of
table cells use the <th> tag.
HTML tables
<h2>Student Info</h2>
<table>
<tr>
<th> ID Number </th>
<th>Name</th>
<th>Section</th>
</tr> This will be the output of the given code above:
<tr>
<td>1</td>
<td>Jose Uzumaki</td> Student Info
<td>BSIT 2Z </td> ID Number Name Section
</tr> 1 Jose Uzumaki BSIT 2Z
<tr>
<td>2</td> 2 Juan Uchia BSIT 2Z
<td> Juan Uchia </td> 3 Hanzo Sarotobi BSIT 2Z
<td> BSIT 2Z </td>
</tr>
<tr>
<td>3</td>
<td>Hanzo Sarotobi</td>
<td> BSIT 2Z </td>
</tr>
</table>
HTML tables
Note: If you want to put some boarder line try adding this code on the <head> part:

<style>
table {
width: 300px;
border-collapse: collapse;
Output:
} Student Info
table, th, td {
ID Number Name Section
border: 1px solid black;
1 Jose Uzumaki BSIT 2Z
}
2 Juan Uchia BSIT 2Z
th, td {
3 Hanzo Sarotobi BSIT 2Z
padding: 10px;
}
</style>
Input Control Elements
If we recall on our previous lessons, there are some HTML elements that don't have a closing tag or any contents and
we call this as void elements. One of the given examples on our earlier lesson as void element is the HTML Input Tag.
The HTML Input Tag is self-closing and may be written on our text editor as <input />, however as html evolves and
improves over the years, on the HTML5 version the HTML Input Tag does not require to put this forward slash as part
of its syntax.

Like the other HTML tags, because of its attributes, the <input> element is so powerful. The type attribute is the
most important part of the input tags syntax. With this, every <input> element, regardless of its type, is based on the
HTMLInputElement interface, these HTML input Tags theoretically share the same set of attributes. However, most
attributes have an effect on only a specific subset of input types. In addition, the way some attributes influence an
input rest on on the input type, affecting different input types in different ways
Input Control Elements
The valid input types in HTML as follows:
 text (default value)  checkbox  image  submit
 password  radio  reset
 hidden  file  button

There are also these newly introduced input types as a part of HTML 5 standard. However there those whose
types are not supported by all web browsers. For those types that are not supported by all web browsers, the
default of the input type will be text.
The newly introduced input types as a part of HTML 5 standard are as follows:
 color  month  tel
 date  number  time
 datetime-local  range  url
 email  search  week
Input Control Elements
Aside to type, HTML Input Tags has other parameters to complete its syntax. The following are some of the common
parameters added on the syntax of an HTML input tag aside from type:
Parameter Details
class The attribute that indicates the Class of the input
id The attribute that indicates the ID of the input
name The attribute that indicates the name of the input
disabled The attribute that indicates the input should be disabled. It uses a Boolean value that disabled controls and this controls cannot be edited, it
cannot also receive focus and not sent on form submission.
checked the attribute indicates a checkbox.
multiple This attribute applies only to file and email type inputs HTML5 tags. This attribute Indicates multiple files or values will be passed.
placeholder This attribute gives a caption of the input so that the user will have an idea of what can be entered on the input.
autocomplete This attribute automatically completes the details inserted on the input tag.
readonly This attribute cannot be modified for it is a read-only control and is not editable. Readonly controls are still sent on form during submission,
however will not also receive focus.
required The input control will indicate that a value must be existing on the input or the element must be checked in order for the form to be submitted.
alt This attribute functions as an alternative text for images in case they are not displayed
autofocus This attribute functions get the focus in the input control when page loads.
value Specifies the value of input tag element.
step This attribute specifies the legal step number intervals. This attribute works with the following input types: number, range, date, datetime-local,
month, time and week.
Input Control Elements
Syntax:
Input Tag Parameter

<input type="text" name=” userbox” class="user" placeholder="Username” alt="user textbox" required>

Attribute Type Name of the input Input caption of the input

Input Control Elements
Note:
Remember that the most basic input type and the default input if no type is specified is text. The input type text
defines a single-line text field with line-breaks which is automatically removed from the input value. Any
characters can be entered into the text input type. The input elements are used inside a form element for to be
able to declare input controls that will allow users to input their data on the webpage or website.
Common Input Control Elements sample syntax

 <input type="text">
 <input type="checkbox">
 <input type="radio">
 <input type="password">
 <input type="hidden">
 <input type="email">
 <input type="date">
Input Control Elements

<input type="text">

The input type text has a default width of a text field input of 20. However, we can modify this and changed it by specifying a value for

the size attribute something like this:

<input type="text" size="50">

On an input field, it will only allow one line of text but If in case you will be needing a multi-line text input for considerable amount of
text, use the <textarea> element instead.
Input Control Elements

<input type="checkbox"> and <input type="radio">

Using checkboxes and radio buttons are good option when we need to present our site visitors the option to choose items from a
group of choices. The checkbox works when the user needs to choose several items on the options while the radio button only
allows the user to select one item from a group of choices.

Take note that with all the given input elements, we need to define a name for an input element for it to be usable. Any input
element that has no name won't be identifiable when sending data to the server via posting the form to a server for processing. We
may also need to set a value if necessary. The value will also be sent to the server if in the case of a checkbox has been checked or
a radio button has been clicked. Below is an example of an input type checkbox syntax:

<input type="checkbox" name="nameOfChoice" value="1">

Input Control Elements

<input type="password">

The next input element will have the type attribute of password. This type attribute of password creates a
single-line text field similar to the input type=text but the difference is that the text will not be displayed on
the text field as the user enters it. Below is the sample syntax for the input type attribute password:
<input type="password" name="password" placeholder="Password">
Input Control Elements

Forms

An HTML Forms are required especially when collecting some data from the site visitor. The HTML form element
signifies a document section which contains an interactive control for submitting information on the server. At the
moment a form will take the input from the user and will send its data and will be posted on a back-end application
such as PHP script. The required processing on the passed data will be performed by the back-end application.
Input Control Elements

To create and HTML form, the HTML <form> tag is used. See below sample for the form syntax:

<form action = "Script URL" method = "GET|POST">

form elements like input, textarea etc.
</form>

There are two attributes on the html form that are very important to know what their function is. First, the action
attribute tells where the data submitted on the form will go. The second attribute is what we call the method
attribute. It defines the HTTP method of the form and tell how the data will be going to be collected. It is either GET
or POST.
Input Control Elements
We’ve got two methods, the GET and the POST method. The GET method is used to request data from a specified resource. It is one of the
most common HTTP methods. Any data collected from the form that uses the GET request method, the collected data will be send and will be

displayed in the URL. However, it has A limitation length of a data being send on the URL and it is limited about 3000 characters only. For
sensitive data it is not suggested to use Get method because as stated above earlier data send will be visible in the URL. With this, GET is
better for non-secure data.

<form action="dbcon.php" method="get" >

POST is used to send data also to the server. Unlike the GET Method, POST methods Attached form-data inside the body of the HTTP request
for that reason, the data is not being exposed in URL. The other advantage of POST method is in terms of length limitation, it has no size
limitations for Form submissions and with POST method, data send cannot be bookmarked because the data is stored in the request body of
the HTTP request.

<form action="add.php" method="post" >

Topics Covered:

Lesson 5: CSS — Styling the Web