FRONT END
(Html 5 Enhancements)
LECTURE-9
Today’s Agenda
Introduction To HTML 5
Improvements Given By HTML 5
Web Forms 2.0
New Input Elements
What Is HTML 5 ?
HTML5 is the latest evolution of the standard that
defines HTML.
The term represents two different concepts:
It is a new version of the language HTML, with new elements,
attributes, and behaviors, and
a larger set of technologies that allows the building of more
diverse and powerful Web sites and applications
What’s New In HTML 5?
HTML5 introduces a number of new elements and attributes that can help
us in building modern websites.
Some of the most prominent features introduced in HTML5 are:
Forms 2.0 − Improvements to HTML web forms where new attributes have been
introduced for <input> tag.
New Tags: HTML 5 has provided us new tags like <audio>,<video>, <data list> etc .
Semantic Tags:those that clearly describe their meaning in a human- and machine-
readable way like <header> , <article>,<footer>,<nav> etc
Geolocation: Let browsers locate the position of the user using geolocation.
And many more such features . . .
What Is Forms 2.0 ?
Web Forms 2.0 is an extension to the forms features found in
HTML4.
Form elements and attributes in HTML5 provide a greater
degree of functionality than HTML4 and free us from a great
deal of tedious scripting and styling that was required in
HTML4.
New Input Types In HTML 5
HTML5 introduces several new <input> types like email, date,
time, color, range, and so on. to improve the user experience
and to make the forms more interactive.
However, if a browser failed to recognize these new input
types, it will treat them like a normal text box.
New Input Types In HTML 5
In this section we're going to take a brief look at each of the
following new input types:
color
date
datetime-local
email
month
number
range
search
tel
time
url
week
The <label> Tag
Before we start working with HTML 5 input types we must learn
an important tag called <label>
The HTML <label> element represents a caption for an item in
a user interface.
The <label> is used to tell users the value that should be entered
in the associated input field.
The <label> Tag
For a <label> to work properly, it must include a for attribute,
which identifies the <input> to which it is associated.
The for attribute’s value should match the id (not the name) of
the <input> element.
Example
<label for=“fname">First Name</label><input id=“fname“><br>
<label for=“lname">Last Name</label><input id=“lname“>
<p>Do you agree to the terms and conditions?</p>
<input type="checkbox" id="agree" value="agree"><label for="agree">
Agree</label>
Another Point About <label> Tag
When a <label> is clicked or tapped and it is associated with a form control,
the resulting click event is also raised for the associated control.
For Example:
<form>
<label for="btn">Press the button</label>
<input
type="button"
value="Click Me For A Message"
onclick="greetings()"
id="btn"
/>
</form>
Input Type Color
The color input type allows the user to select a color from a
color picker and returns the color value in hexadecimal format
(#rrggbb).
If we don't specify a value, the default is #000000, which is
black.
Example
<form>
<label for="mycolor">Select Color:</label>
<input type="color" value="#00ff00" id="mycolor" /><br />
</form>
Input Type Date
The date input type allows the user to select a date from a
drop-down calendar.
The date value includes the year, month, and day, but not the
time.
Example
<form>
<label for="mybdate">Select Your BirthDate:</label>
<input type="date" id="mybdate" />
</form>
Using min & max With Date
We can go a step further by using the min and max attributes to
ensure the user can only choose from a specified date range.
For example:
<input
type="date"
id="startdate"
min="2020-01-01"
max="2021-01-01" >
Input Type Datetime-local
The datetime-local input type allows the user to select both
local date and time, including the year, month, and day as well
as the time in hours and minutes.
Example
<form>
<label for="mydatetime">Choose Date and Time:</label>
<input type="datetime-local" id="mydatetime" />
</form>
Input Type Email
The email input type allows the user to enter e-mail address.
It is very similar to a standard text input type, but if it is used in
combination with the required attribute, the browser may look
for the patterns to ensure a properly-formatted e-mail address
should be entered.
Example
<form>
<label for="youremail">Enter A Valid Email Address:</label>
<input type="email" id="youremail" required/>
</form>
Input Type Month
The month input type allows the user to select a month and
year from a drop-down calendar.
The value is a string in the format "YYYY-MM", where YYYY is
the four-digit year and MM is the month number.
Example
<form>
<label for="birthmonth">Select Your Birth Month:</label>
<input type="month" id="birthmonth" />
</form>
Input Type Number
The number input type can be used for entering a numerical value.
We can also restrict the user to enter only acceptable values using
the additional attributes min, max, and step.
We can also use the step attribute to set the increase and decrease
caused by pressing the spinner buttons.
By default, the number input type only validates if the number is an
integer. To allow float numbers, specify step="any" If omitted,
the step value defaults to 1, meaning only whole numbers are valid.
Example
<form>
<label for="userage">Enter Teen Age:</label>
<input type="number" min="13" max="19" step="any" id="userage"
/>
</form>
Input Type Range
The range input type is similar to number but more specific.
It represents a numerical value within a given range.
It also allows browsers to offer a simpler control than for number.
Most browsers render it as a slider but the user doesn’t necessarily
get to see the exact value they’re setting.
Example
<form>
<label for="volume">Set The Volume Level:</label>
<input type="range" min="1" max="10"
step="0.5" id="volume" />
</form>
Input Type Search
The search input type can be used for creating search input
fields.
A search field typically behaves like a regular text field, but in
some browsers like Chrome and Safari as soon as we start
typing in the search box a small cross appears on the right side
of the field that lets us quickly clear the search field
Example
<form>
<label for="mysearch">Search Website:</label>
<input type="search" id="mysearch" />
</form>
Input Type Time
The time input type can be used for entering a time (hours and
minutes).
Browser may use 12- or 24-hour format for inputting times,
based on local system's time setting.
Example
<form>
<label for="mytime">Select Time:</label>
<input type="time" id="mytime" />
</form>
Input Type Url
The url input type can be used for entering URL's or web
addresses.
We can use the multiple attribute to enter more than one URL.
Also, if required attribute is specified browser will
automatically carry out validation to ensure that only text that
matches the standard format for URLs is entered into the input
box
Example
<form>
<label for="myurl">Enter Website URL:</label>
<input type="url" id="myurl" required />
</form>
Input Type Tel
The tel input type can be used for entering a telephone
number.
Browsers don't support tel input validation natively.
However, we can use the placeholder attribute to help users in
entering the correct format for a phone number
Example
<form>
<label for="myphone">Telephone Number:</label>
<input type="tel" id="myphone" placeholder="xx-xxxx-
xxxx" required />
</form>
Input Type Week
The week input type allows the user to select a week and year
from a drop-down calendar.
Example
<form>
<label for="myweek">Select Week:</label>
<input type="week" id="myweek" />
</form>
End Of Lecture
Call us @ : 0755-4271659, 9826686245
Agenda for Next Lecture:
1. New HTML 5 Form Attributes
2. Introduction To Audio Tag
3. Introduction To Video Tag
