HTML 5 - Features

HTML 5 Layout
Page layout is the part of graphic design that deals with the
arrangement of visual elements on a page. Page layout is used to make
the web pages look better. It establishes the overall appearance,
relative importance, and relationships between the graphic elements to
achieve a smooth flow of information and eye movement for
maximum effectiveness or impact.

Page Layout Information:

 Header: The part of a front end which is used at the top of the page.
<header> tag is used to add header section in web pages.
 Navigation bar: The navigation bar is same as menu list. It is used to
display the content information using hyperlink.
 Index / Sidebar: It holds additional information or advertisements and is
not always necessary to be added into the page.
 Content Section: The content section is the main part where content is
displayed.
 Footer: The footer section contains the contact information and other
query related to web pages. The footer section always put on the bottom of
the web pages. The <footer> tag is used to set the footer in web pages.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
<style>
.head1 {
font-size:40px;
color:#009900;
font-weight:bold;
}
.head2 {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
body {
margin: 0 auto;
background-position:center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding:10px 0px 10px 0px;
color:white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.body_sec {
margin-left:20px;
}
</style>
</head>
<body>


<header>
<div class="head1">Html5 page layout</div>
<div class="head2">A computer science portal</div>
</header>


<div class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">NOTIFICATIONS</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</div>


<div class = "body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</div>


<footer>Footer Section</footer>
</body>
</html>
Supported Browser:
 Google Chrome
 Microsoft Edge
 Firefox
 Opera
 Safari
Why is HTML5 important?

It is so important in this modern era because the way technology moving is
unbelievable, so we need to be updated, and we need to learn HTML5 to
create web apps easily. It can provide some advanced features which are not
available in before versions or updates.
Advantages of HTML5
1. It helps developers to develop an application that fits different
resolutions, screen sizes, aspect ratios, and guidelines.

2. With HTML5, programmers can use some advanced features such as
GPS, camera, and accelerometer in their web applications.
3. Applications can be used internally, which is nothing but localhost and
can also be seen in browsers.
4. Mobile applications can use the same monetization and sharing
channels as native applications.
5. JavaScript, HTML, and CSS are the main programming languages for
web applications.
6. We can easily convert HTML5 web applications to mobile applications.
This is the main advantage of HTML.
7. HTML5 Application will be responsive, and it automatically fit for each
and every mobile and desktop screen.
8. Easy to write
9. Easy to understand
10.Easy to use
11.Every browser understands html language
12.You can develop rich graphics and animations.

Disadvantages of HTML5
1. HTML5 works only on updated browsers.
2. Not flexible as Flash
HTML Form Validation

What data should be validated?
Form validation is needed anytime you accept data from a user.
This may include:
1. Validating the format of fields such as email address, phone

number, zip code, name, password.
2. Validating mandatory fields
3. Checking the type of data such as string vs number for fields
such as social security number.
4. Ensuring that the value entered is a valid value such as country,
date, and so on.
HTML Form Validation
How to set up client side validation
On the client side, validation can be done in two ways:
1. Using HTML5 functionality

2. Using JavaScript
How to set up validation with HTML5 functionality
HTML5 provides a bunch of attributes to help validate data.
Here are some common validation cases:
 Making fields required using required
 Constraining the length of data:
 minlength, maxlength: for text data
 min and max for max value of num type
 Restricting the type of data using type:
 <input type="email" name="multiple>
 Specifying data patterns using pattern:
 specifies a regex pattern that the entered form data needs to
match
When the input value matches the above HTML5 validation, it
gets assigned a psuedo-class: valid, and: invalid if it doesn't.
Let's try an example:
<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" id="firstname"
required maxlength="45">
<label for="lastname"> Last Name: </label>
<input type="text" name="lastname" id="lastname"
required maxlength="45">
<button>Submit</button>
</form>
1. Using HTML5 built-in functionality

Example
<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
form {
font-size: 30px;
form input {
margin-left: 10px;
font-size: 15px;
</style>
</head>
<body>
<div class = "formData" >
<form action = "#" >
Name: <input type = "text" name = "name" required>
<input type = "submit" >
</form>
</div>
</body>
</html>
Form Validation Attributes

Pattern
The pattern attribute is available for input elements with

type text, search, url, tel, email, and password.
 It lets us set a regular expression as the value and the

browser will validate it against it.
Min
This attribute applies to range, number, date, month, week, datetime, datetime-

local, and time inputs.
 When it’s applied to a range or number input, it’ll check if the

inputted number is the value of the min attribute or higher.
 When it’s applied to the date, month, or week element, then it’ll

check if the date is greater than or equal to the one given in the
value of this attribute.
 For the datetime, datetime-local, time type inputs, both the date

and time are checked to see if it’s greater than or equal to the
one given in the value of the min attribute.
Max
The max attribute is the opposite of the min attribute. It checks if

something entered is less than or equal to what’s given in the value
of this attribute.
 When it’s applied to a range or number input, it’ll check if the

inputted number is the value of the min attribute or lower.
 When it’s applied to the date, month, or week element, then it’ll

check if the date is less than or equal to the one given in the
value of this attribute.
 For the datetime, datetime-local, time type inputs, both the date
and time are checked to see if it’s less than or equal to the one
given in the value of the min attribute.
Required
The required attribute checks if the input value is entered by the

user.
 It’s available
to text, search, url, tel, email, password, date, datetime, datetime-local,
month, week, time, number, checkbox, radio, file, and also on
the <select> and <textarea> elements.
Step
The step attribute checks if the input is an integer.
 If it’s applied to an input element with the type date, then it

checks for an integer number of days.
 If it’s applied to an input element with the type month, then it

checks for an integer number of months.
 If it’s applied to an input element with the type week, then it

checks for an integer number of weeks.
 If it’s applied to an input element with the

type datetime, datetime-local, time, then it checks for an integer
number of seconds.
 If it’s applied to an input element with the type range, number,
then it checks for an integer.
Minlength
The minlength attribute is available to the input with

types text, search, url, tel, email, password. It’s also available on
the textarea element.
 It checks for a greater than or equal to the number of

characters of text that the user entered.
Maxlength
The maxlength attribute is available to the input with

types text, search, url, tel, email, password. It’s also available on
the textarea element.
 It checks for a less than or equal to the number of characters

of text that the user entered.
HTML: HTML5 Form Validation Examples
1. The 'required' attribute
The simplest change you can make to your forms is to mark a text
input field as 'required':
Your Name: <input type="text" name="name" required>
Your Name:
This informs the (HTML5-aware) web browser that the field is to be

considered mandatory. Different browsers may mark the input box
in some way (Firefox 4 Beta adds a red box-shadow by default),
display a warning (Opera) or even prevent the form from being
submitted if this field has no value. Hopefully these behaviors will
converge in future releases.
For these examples we have created our own valid/invalid CSS

formatting to override the browser default. More on that below.
That's why you may see something like the following:
Before you type anything into the box a red marker is shown. As
soon as a single character has been entered this changes to a green
marker to indicate that the input is 'valid'.
Using CSS you can place markers inside or alongside the input box,
or simply use background colors and borders as some browsers do
by default.
2. New text INPUT types
This is where HTML5 really gets interesting and more useful. Along
with the text input type, there are now a host of other options,
including email, url, number, tel, date and many others.
On the iPhone/iPad the different input types are associated with

different keyboards, making it easier for people to complete your
online forms. In other web browsers they can be used in
combination with the required attribute to limit or give advice on
allowable input values.
INPUT type="email"
By changing the input type to email while also using

the required attribute, the browser can be used to validate (in a
limited fashion) email addresses:
Email Address: <input type="email" name="email" required placeholder="Enter a
valid email address">
Note that for this example we've made use of another HTML5
attribute placeholder which lets us display a prompt or instructions
inside the field - something that previously had to be implemented
using messy onfocus and onblur JavaScript events.
The above code displays an input box as follows:
Email Address:
Again, different browsers implement this differently. In Opera it's

sufficient to enter just *@* for the input to be accepted. In Safari,
Chrome and Firefox you need to enter at least *@-.-. Obviously
neither example is very limiting, but it will prevent people from
entering completely wrong values, such as phone number, strings
with multiple '@'s or spaces.
Here is how it appears in Safari (with our CSS formatting to show

the (in)valid state):
INPUT type="url"
In a similar fashion to the email input type above, this one is

designed to accept only properly-formatted URLs. Of course it
currently does nothing of the kind, but later you will see how to
improve it's behaviour using the pattern attribute.
Website: <input type="url" name="website" required>
Again, the input box appears as normal:
Website:
This time the minimum requirement for most browsers is one or

more letters followed by a colon. Again, not very helpful, but it will
stop people trying to input their email address or other such
nonsense.
As mentioned above, we can improve on this by making use of

the pattern attribute which accepts a JavaScript regular expression.
So the code above becomes:
Website: <input type="url" name="website" required pattern="https?://.
+">
Now our input box will only accept text starting
with http:// or https:// and at least one additional character:
Website: starting with http
If you're not yet familiar with regular expressions, you really

should make it a priority to learn. For those already familiar, note
that the ^ and $ are already implicit so the input has to match the
entire expression. Pattern modifiers are not supported.
If anyone wants to contribute a more thorough expression to test

for valid email or url format, feel free to post it using the Feedback
option above..
INPUT type="number" and type="range"
The number and range input types also accept parameters

for min, max and step. In most cases you can leave out step as it
defaults to 1.
Here you see an example including both a number input, typically

displayed as a 'roller' and a range input displayed as a 'slider':
Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>
Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5"
value="3">
As with other HTML5 input types, browsers that don't recognise the
new options will default to simple text inputs. For that reason it's a
good idea to include a size for the input box.
AgeSatisfaction (1-5)
The slider option is a bit bizarre in that no values are displayed, but
may be useful for more 'analog' inputs. There are some bugs with
the number input in that if you don't set a max value, clicking 'down'
with the input blank will result in a very large number.
Here is how the two inputs are displayed in Safari:
and in Opera:
They are currently not supported in Firefox 4 Beta.
If you want to restrict the input of a text field to numbers without

having the up/down arrows associated with the input box, you can
always just set the input type to text and use a pattern of "\d+" (one
or more numbers).
INPUT type="password"
We have a separate article with details on validating passwords

using HTML5, including JavaScript code for customising the browser
generated alert messages.
3. Other HTML5 INPUT types
Other HTML5 input types include:
 color
 date
 datetime
 datetime-local
 month
 search
 tel
 time
 week

HTML 5 - Features

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 5 - Features

Uploaded by

Copyright:

Available Formats

HTML 5 Layout

Page Layout Information:

Why is HTML5 important?

unbelievable, so we need to be updated, and we need to learn HTML5 to

available in before versions or updates.

1. It helps developers to develop an application that fits different

resolutions, screen sizes, aspect ratios, and guidelines.

GPS, camera, and accelerometer in their web applications.

3. Applications can be used internally, which is nothing but localhost and

can also be seen in browsers.

4. Mobile applications can use the same monetization and sharing

channels as native applications.

6. We can easily convert HTML5 web applications to mobile applications.

This is the main advantage of HTML.

7. HTML5 Application will be responsive, and it automatically fit for each

and every mobile and desktop screen.

11.Every browser understands html language

12.You can develop rich graphics and animations.

2. Not flexible as Flash

HTML Form Validation

1. Validating the format of fields such as email address, phone

1. Using HTML5 functionality

1. Using HTML5 built-in functionality

<div class = "formData" >

<form action = "#" >

Name: <input type = "text" name = "name" required>

<input type = "submit" >

Form Validation Attributes

The pattern attribute is available for input elements with

 It lets us set a regular expression as the value and the

This attribute applies to range, number, date, month, week, datetime, datetime-

 When it’s applied to a range or number input, it’ll check if the

 When it’s applied to the date, month, or week element, then it’ll

 For the datetime, datetime-local, time type inputs, both the date

The max attribute is the opposite of the min attribute. It checks if

 When it’s applied to a range or number input, it’ll check if the

 When it’s applied to the date, month, or week element, then it’ll

The required attribute checks if the input value is entered by the

The step attribute checks if the input is an integer.

 If it’s applied to an input element with the type date, then it

 If it’s applied to an input element with the type month, then it

 If it’s applied to an input element with the type week, then it

 If it’s applied to an input element with the

The minlength attribute is available to the input with

 It checks for a greater than or equal to the number of

The maxlength attribute is available to the input with

 It checks for a less than or equal to the number of characters

HTML: HTML5 Form Validation Examples

1. The 'required' attribute

This informs the (HTML5-aware) web browser that the field is to be

For these examples we have created our own valid/invalid CSS

2. New text INPUT types

On the iPhone/iPad the different input types are associated with

By changing the input type to email while also using

Email Address: <input type="email" name="email" required placeholder="Enter a

valid email address">

The above code displays an input box as follows:

Again, different browsers implement this differently. In Opera it's