Web Development Week-05

This Week

• Forms
• Advanced CSS
Forms

• Used to gather information from users

• Sent to the server (usually POST HTTP request)
• Require back-end processing on the server
• Example
The <form> Element

• The HTML <form> element is used to create an HTML form for

user input

• The <form> element is a container for different types of input

elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.

• <form>

• Form elements
• </form>
The <input> Element

• The HTML <input> element is the most used form element.

• An <input> element can be displayed in many ways, depending
on the type attribute.
• Here are some examples:
Text Fields

• The <input type="text"> defines a single-line input field for

text input.
• A form with input fields for text:
The <label> Element

• The <label> tag defines a label for many form elements.

• The <label> element is useful for screen-reader users, because
the screen-reader will read out loud the label when the user focus
on the input element.
• The <label> element also help users who have difficulty clicking
on very small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.
• The for attribute of the <label> tag should be equal to the id
attribute of the <input> element to bind them together.
Radio Buttons

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

• Radio buttons let a user select ONE of a limited number of
choices.
• A form with radio buttons:
Checkboxes

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

• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
The Submit Button

• The <input type="submit"> defines a button for submitting

the form data to a form-handler.
• The form-handler is typically a file on the server with a script for
processing input data.
• The form-handler is specified in the form's action attribute.
The Name Attribute for <input>

• Notice that each input field must have a name attribute to be

submitted.
• If the name attribute is omitted, the value of the input field will
not be sent at all.
• https://www.w3schools.com/html/tryit.asp?filename=tryhtml_for
m_submit_id
The Action Attribute

• The action attribute defines the action to be performed when the

form is submitted.
• Usually, the form data is sent to a file on the server when the
user clicks on the submit button.
• In the example below, the form data is sent to a file called
"action_page.php". This file contains a server-side script that
handles the form data:
The Method Attribute

• The method attribute specifies the HTTP method to be used when

submitting the form data.

• The form-data can be sent as URL variables (with method="get")

or as HTTP post transaction (with method="post").

• The default HTTP method when submitting form data is GET.

Notes on GET

• Appends the form data to the URL, in name/value pairs

• NEVER use GET to send sensitive data! (the submitted form data
is visible in the URL!)

• The length of a URL is limited (2048 characters)

• GET is good for non-secure data, like query strings in Google

Notes on POST

• Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)

• POST has no size limitations, and can be used to send large

amounts of data.

• Tip: Always use POST if the form data contains sensitive or

personal information!
List of All <form> Attributes
CSS Syntax
• Style sheets are composed of "Rules" that describe the styling to
be applied.

• Each rule contains a Selector and a Declaration

CSS Syntax Sample

• Configure a web page to display blue text and yellow

background.

• body { color: blue;

• background-color: yellow; }

• This could also be written using hexadecimal color values as

shown below.

• body { color: #0000FF;

• background-color: #FFFF00; }
CSS Selectors

• Common Types of Selectors:

• HTML element name selector
• class selector
• id selector
• descendant selector
 Using CSS with “class”
• class Selector
• Apply a CSS rule to ONE OR MORE elements on a web page
• Does not associate the style to a particular HTML element
• <style type="text/css">
.new { color: #FF0000; font-style: italic;
• Configure with .classname }
</style>

• The sample creates a class called “new” with red italic text.

• To use the class, code the following HTML:

• <p class=“new”>This is text is red and in italics</p>
Using a CSS id Selector
<style type="text/css">
• id Selector #new { color: #FF0000;
• Apply a CSS rule to ONLY ONE element on a web page.
font-size:2em;
font-style: italic;
• Configure with #idname }
</style>
• The sample creates an id called “new” with red, large, italic text.

• To use the id, code the following HTML:

• <p id=“new”>This is text is red, large, and in italics</p>

Using a CSS Descendant Selector

• Descendant Selector
• Apply a CSS rule within the context of the container (parent) element.
• Sometimes called a contextual selector.

• Configure by listing the container selector followed by the

selector you are styling.

• The sample specifies a green text color for only the paragraph
elements located within the footer element.
<style>
footer p {color: #00ff00; }
</style>
The div element <div>

• A block-display element

• Purpose: configure a specially formatted division or area of a web

page
• There is a line break before and after the division.
• Can contain other block-level and inline elements

• Useful to define a generic area that will contain other block

display tags (such as paragraphs or spans) within it.
The Span Element <span>

• An inline-level element
• Purpose:
• Configure a specially formatted area displayed in-line with other elements,
such as within a paragraph.

• There is no line break before and after the span.

<span> Example

Embedded CSS:
<style>
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em; }
</style>

HTML:
<p>Your needs are important to us at <span
class=“companyname">Acme Web Design</span>. We will work
with you to build your website.</p>
CSS3 combinator selectors

https://www.w3schools.com/css/css_combinators.asp
CSS3 Pseudo-elements

• pseudo-element is used to style specified parts of an element.

• For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

• The syntax of pseudo-elements:

The ::first-line Pseudo-element

• The ::first-line pseudo-element is used to add a special style to

the first line of a text.
• The following example formats the first line of the text in all <p>
elements:
The ::first-letter Pseudo-element

• The ::first-letter pseudo-element is used to add a special style to

the first letter of a text.
• The following example formats the first letter of the text in all
<p> elements:
CSS3 Pseudo Elements

• https://www.w3schools.com/css/css_pseudo_elements.asp
CSS3 Pseudo-classes

• A pseudo-class is used to define a special state of an element.

• For example, it can be used to:
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus
• The syntax of pseudo-classes:
 Semantic Inline Elements
• https://www.w3schools.com/css/tryit.asp?filename=trycss_link

• Note: a:hover MUST come after a:link and a:visited in

the CSS definition in order to be effective! a:active
MUST come after a:hover in the CSS definition in order
to be effective! Pseudo-class names are not case-
sensitive.
All CSS Pseudo Classes
CSS3 Unit

• CSS has several different units for expressing a length.

• Many CSS properties take "length" values, such as width, margin,
padding, font-size, etc.
• Length is a number followed by a length unit, such as 10px, 2em,
etc.
• Set different length values, using px (pixels):

• https://www.w3schools.com/cssref/css_units.asp
Next Week

• Embedded media,
• Embedded media
• YouTube Video
• Google Maps

• advanced image use,

• their importance
• file format and performance

• icons.

• Designing the navigation for a website.