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

For any queries mail us @: [email protected]

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