html5_course_material_introduction_to_html.pdf

HTML5
1. HTML5 is the latest version of HTML
2. HTML5 has many new input controls
3. supports audio and video tags

new input types & new elements
syntax:
<input type=“ “ id=“ “ - - - - />
color
number
range
date pickers
email
file
< details>
<datalist>
<video>
<audio>
elements
new input controls

This will allow you to select a color from color picker
input type=“color”

we can limit the range of permissible input values
user can give numbers from 4 to 10
note: when you give invalid number you will get a error message
6
11
Number
Value must be lesser than or equal to 10
input type=“number”

min max
will allow us to create a slider in the web-page
input type=“range”

input type=“date” input type=“month”
Monthname Year

this will allow only the email addresses
Please insert an ‘@’, palle is missing ‘@’
palle
Note:
if the email for mat is not correct you will get this error
input type=“email”
when the email is typed
in proper format we
wont get error

File type will allow the user to choose one or more files from their
device storage.
3 files
input type=“file”

The <details> tag specifies additional details that the user can view or
hide on demand
<details> element

<datalist>
when datalist id attached to a textbox the text box
will work like a dropdown list .
Ferrari
chevrolet
lexus
Ferrari
datalist alone will not
display any UI

<video>
The controls attribute is not a key and value pair.
controls is an attribute but not
having value. controls add play
pause sound etc.. options

<audio>
the <audio> tag defines sound, such as music or other
audio streams
controls is an attribute but not
having value. controls add play
pause volumne etc.. options

validations
using validations we can
check the users data format
correctness
required minlength
maxlength
min max
pattern

required attribute
required attribute will not have value. it is used for checking
emptyness of a textbox before submitting the form.
example :-

placeholder
1. The placeholder attribute is used in input tags.
2. It will show a short hint that describes the
expected value
example :-

minlength and maxlength attribute
It will specify the minimum and maximum length of the
text data (strings)
Example:
You cannot type more than
10 characters (maxlength) in
this textbox

min and max attribute
It specifies the minimum and maximum values of
numerical input types.
Example:
This textbox will allow to
enter the numbers
between the min and
max values

1. It allows us to define our own rules to validate the input value
using regular expression
2. if the value does not match the specified pattern, the input will
throw an error.
example :-
Req : I want a textbox which can accept only lower case letters.
ABC
123
pattern – part1

use title attribute to customize the message
pattern – part2

Execute all code and do
all Exercises at Home
End of
DAY 1

html5_course_material_introduction_to_html.pdf

More Related Content

Similar to html5_course_material_introduction_to_html.pdf (20)

Recently uploaded (20)

html5_course_material_introduction_to_html.pdf