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
new input controls elements
color < details>
number <datalist>
range <video>
date pickers <audio>
email
file
syntax:
<input type=“ “ id=“ “ - - - - />
input type=“color”
This will allow you to select a color from color picker
input type=“number”
we can limit the range of permissible input values
user can give numbers from 4 to 10
Number 11
6
Value must be lesser than or equal to 10
note: when you give invalid number you will get a error message
input type=“range”
will allow us to create a slider in the web-page
min max
input type=“date” input type=“month”
Monthname Year
input type=“email”
this will allow only the email addresses
when the email is typed
in proper format we
wont get error
palle
Please insert an ‘@’, palle is missing ‘@’
Note:
if the email for mat is not correct you will get this error
input type=“file”
File type will allow the user to choose one or more files from their
device storage.
3 files
<details> element
The <details> tag specifies additional details that the user can view or
hide on demand
<datalist>
when datalist id attached to a textbox the text box
will work like a dropdown list .
datalist alone will not
display any UI
Ferrari
lexus
Ferrari
chevrolet
<video>
controls
The controls attribute is not a key and value pair.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
min max maxlength
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
pattern – part1
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.
123
ABC
pattern – part2
use title attribute to customize the message
Execute all code and do
all Exercises at Home
End of
DAY 1
Thank you
