Scribd
Upload
56 views18 pages

HTML 5 - Features

Page layout refers to the arrangement of visual elements on a web page. It establishes the overall appearance, importance, and relationships between graphic elements. Key elements of HTML5 page layout include headers, navigation bars, content sections, and footers. Form validation is also important and can be done using HTML5 attributes like required, pattern, min, and max to check data type, length, and values.

Uploaded by

devendra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
56 views18 pages

HTML 5 - Features

Page layout refers to the arrangement of visual elements on a web page. It establishes the overall appearance, importance, and relationships between graphic elements. Key elements of HTML5 page layout include headers, navigation bars, content sections, and footers. Form validation is also important and can be done using HTML5 attributes like required, pattern, min, and max to check data type, length, and values.

Uploaded by

devendra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 18

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 Section -->


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

<!-- Menu Navigation Bar -->


<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>

<!-- Body section -->


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

<!-- Footer Section -->


<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

You might also like