WD 101: Web

Development &
Application

Layout Elements and Properties, Forms and Inputs

HTML Block and Inline
Elements
Every HTML element has a default display value, depending on what type of element it is.
The two most common display values are block and inline.

Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space (a margin)
before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it
can).

Two commonly used block elements are: <p> and <div>.

• The <p> element defines a paragraph in an HTML document.
• The <div> element defines a division or a section in an HTML document.
Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space (a
margin) before and after the element. A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

• The <p> element defines a paragraph in an HTML document.
• The <div> element defines a division or a section in an HTML document.

Here are the block-level elements in HTML:

Inline Elements
An inline element does not start on a new line. An inline element only takes up as much
width as necessary.

Example:
<p>This is an inline span <span style="border: 1px solid black">Hello World</span>
element inside a paragraph.</p>

Here are some of inline elements in HTML:

The <div> Element
The <div> element is by default a block element, meaning that it takes all
available width, and comes with line breaks before and after.

Lorem Ipsum <div style="border: 1px solid black">I am a div</div> dolor sit amet.
<p>The border is added to demonstrate the footprint of the DIV element.</p>

The <div> element has no required attributes, but style, class and id are common.
<div> as a container
The <div> element is often used to group sections of a web page together.

<div style=“background color yellow”>

<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<p>The yellow background is added to demonstrate the footprint of the DIV
element.</p>
The <span> Element
The <span> element is an inline container used to mark up a part of a text, or
a part of a document.
The <span> element has no required attributes, but style, class and id are
common.
When used together with CSS, the <span> element can be used to style parts of
the text:

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my

father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span>
eyes.</p>
Center align a <div> element
If you have a <div> element that is not 100% wide, and you want to center-align
it, set the CSS margin property to auto.

<div style="width: 300px; margin: auto; background-color: #FFF4A3;">

<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
HTML Iframes
An HTML iframe is used to display a web page within a web page.
The HTML <iframe> tag specifies an inline frame.

<iframe src="demo_iframe.htm" height="200" width="500" title="Iframe Example"></iframe>

CSS Box Model
All HTML elements can be considered as boxes.

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists
of: content, padding, borders and margins. The image below illustrates the box model:
Width and Height of an
Element
In order to set the width and height of an element correctly in all browsers,
you need to know how the box model works.

When you set the width and height properties of an element with CSS, you just set the
width and height of the content area. To calculate the total width and height of an
element, you must also include the padding and borders.

div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
CSS Outline
An outline is a line drawn outside the element's border.
CSS Outline-Offset
The outline-offset property adds space between an outline and the edge/border
of an element. The space between an element and its outline is transparent.

p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
HTML Layout Elements
Websites often display content in multiple columns (like a magazine or a newspaper).
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:

• <header> - Defines a header for a document or a section

• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-contained content
• <aside> - Defines content aside from the content (like a sidebar)
• <footer> - Defines a footer for a document or a section
• <details> - Defines additional details that the user can open and
close on demand
• <summary> - Defines a heading for the <details> element
HTML Layout Techniques
HTML has several semantic elements that define the different parts of a web page:

There are four different techniques to create multicolumn layouts. Each technique has its
pros and cons:

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid
CSS Frameworks
If you want to create your layout fast, you can use a CSS framework, like W3.CSS or
Bootstrap.
the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the doc

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn
- you just need to remember how the float and clear properties work.

Disadvantages: Floating elements are tied to the document flow, which may harm the
flexibility.
CSS Layout – Float and Clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on
which side.

The float Property

The float property is used for positioning and formatting content e.g. let an image float
left to the text in a container.

The float property can have one of the following values:

• left - The element floats to the left of its container
• right - The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in the text).
This is default
• inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
CSS Layout – Float and Clear
Example: float: right;

img {
float: right;
width:170px;
height:170px;
margin-left:15px;
}

<p>
<img src="pineapple.jpg" alt="Pineapple" style="">
Some place holder text here!
</p>
CSS Layout – Float and Clear
Example: float: left;

img {
float: left;
width:170px;
height:170px;
margin-left:15px;
}

<p>
<img src="pineapple.jpg" alt="Pineapple" style="">
Some place holder text here!
</p>
CSS Layout – Float and Clear
The clear property
When we use the float property, and we want the next element below (not on right or
left), we will have to use the clear property.

The clear property specifies what should happen with the element that is next to a
floating element.

The clear property can have one of the following values:

• none - The element is not pushed below left or right floated elements. This is default
• left - The element is pushed below left floated elements
• right - The element is pushed below right floated elements
• both - The element is pushed below both left and right floated elements
• inherit - The element inherits the clear value from its parent

When clearing floats, you should match the clear to the float: If an element is floated
to the left, then you should clear to the left. Your floated element will continue to
float, but the cleared element will appear below it on the web page.
CSS Layout – Float and Clear
When clearing floats, you should match the clear to the float: If an element is floated to the
left, then you should clear to the left. Your floated element will continue to float, but the
cleared element will appear below it on the web page.

.div1 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
}
.div2 {
padding: 10px;
border: 3px solid red;
}
.div3 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
}
.div4 {
padding: 10px;
border: 3px solid red;
clear: left;
}
CSS Layout – Flex Box
To start using the Flexbox model, you need to first define a flex container.

<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS Layout – Flex Box
The flex-direction Property
The flex-direction property defines in which direction the container wants to stack the flex
items.

flex-direction values:
• row
• row-reverse
• column
• Column-reverse

The column value stacks the flex items vertically (from top to bottom):

.flex-container {
display: flex;
flex-direction: column;
}
CSS Layout – Flex Box
The flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not.

Browser in fuller size:

Browser in smaller size:

flex-wrap values:
• nowrap (default)
• wrap
• wrap-reverse
CSS Layout – Flex Box
The flex-flow Property
The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap
properties.

flex-flow: row nowrap; (default)

The justify-content Property

The justify-content property is used to align the flex items: (horizontal)

justify-content values:
• center
• flex-start
• flex-end
• space-between
• space-around
CSS Layout – Flex Box
The align-content Property
The align-content property is used to align the flex lines. (vertical)

align-content values:
• space-between
• space-around
• stretch
• flex-start
• flex-end

Perfect Centering
SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will
be perfectly centered:

.flex-container{
display: flex;
justify-content: center;
align-items: center;
CSS Layout – Flex Items
Child Elements (Items)
The direct child elements of a flex container automatically becomes flexible (flex) items.

The flex item properties are:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

The order Property

The order property specifies the order of the flex items.

<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
CSS Layout – Flex Items
The flex-grow Property
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>

The flex-shrink Property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex
items.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
CSS Layout – Flex Items
The flex-basis Property
The flex-basis property specifies the initial length of a flex item.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>

The flex Property

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container's align-items property.
HTML Forms
An HTML form is used to collect user input. The user input is most
often sent to a server for processing.
Forms
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
. form elements .
</form>

The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
Forms
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.

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

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 focuses on the input element.
The <label> element also helps 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.
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
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.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
HTML Form Attributes
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:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
HTML Form Attributes
The Target Attribute
The target attribute specifies where to display the response that is received after
submitting the form.

<form action="/action_page.php" target="_blank">

The target attribute can have one of the following values:

HTML Form Attributes
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.

<form action="/action_page.php" method="get">

<form action="/action_page.php" method="post">
HTML Form Attributes
List of All <form> attributes
HTML Form Elements
The HTML <form> Elements
The HTML <form> element can contain one or more of the following form elements:

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>
HTML Form Elements
The <select> Element
The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option.
HTML Form Elements
Visible and Multiple Values:
Use the size attribute to specify the number of visible values:
Use the multiple attribute to allow the user to select more than one value:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
HTML Form Elements
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):

The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>

<textarea name="message" style="width:200px; height:600px;">

The cat was playing in the garden.
</textarea>
HTML Form Elements
The <button> Element
The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML Form Elements
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
HTML Form Elements
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the
<datalist> element.

<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML Form Elements
The <output> Element
The <output> element represents the result of a calculation (like one performed by a
script).

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0 <input type="range" id="a" name="a" value="50"> 100 +
<input type="number" id="b" name="b" value="50"> =
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML Input Types
Here are the different input types you can use in HTML:

<input type="button"> <input type="checkbox">

<input type="color"> <input type="date">
<input type="datetime-local"> <input type="email">
<input type="file"> <input type="hidden">
<input type="image"> <input type="month">
<input type="number"> <input type="password">
<input type="radio"> <input type="range">
<input type="reset"> <input type="search">
<input type="submit"> <input type="tel">
<input type="text"> <input type="time">
<input type="url"> <input type="week">
HTML Input Attributes
The value and readonly Attribute
The input value attribute specifies an initial value for an input field.
The input readonly attribute specifies that an input field is read-only.

<input type="text" id="fname" name="fname" value="John" readonly>

The maxlength and size Attribute

The input maxlength attribute specifies the maximum number of characters allowed in an
input field.
The input size attribute specifies the visible width, in characters, of an input field.

<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
HTML Input Attributes
The min and max Attribute
The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-
local, month, time and week.

Tip: Use the max and min attributes together to create a range of legal values.

<label for="quantity">Range:</label>
<input type=“range" id="quantity" name="quantity" min="1" max="5">

The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter more than one value in
an input field.
The multiple attribute works with the following input types: email, and file.

<label for="files">Select files:</label>

<input type="file" id="files" name="files" multiple>
HTML Input Attributes
The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is
checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel,
email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

<label for="country_code">Country code:</label>

<input type="text" id="country_code" name="country_code“ pattern="[A-Za-z]{3}"
title="Three letter country code">
HTML Input Attributes
The placeholder Attribute
The input placeholder attribute specifies a short hint that describes the expected value
of an input field (a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

<label for="phone">Enter a phone number:</label>

<input type="tel" id="phone" name="phone“ placeholder="123-45-678“
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
HTML Input Attributes
The required Attribute
The input required attribute specifies that an input field must be filled out before submitting
the form.

More Attributes:
• step
• autofocus
• height
• width
• list
• autocomplete
• form
• formaction
• formenctype
• formmethod
• formtarget
• formnovalidate