Learn Advanced and Basic HTML - Lesson 4 (ii)

1
Learn HTML BasicsLesson No 04 (Second Part)

• Publisher Attitude Academy

2
The ltinputgt Attribute
The ltinputgt element is the most important form
element. The ltinputgt element has many variations,
depending on the type attribute. Here are the
types used in this chapter
ltinput typeThe all Value of type attribute /gt ltinput typeThe all Value of type attribute /gt ltinput typeThe all Value of type attribute /gt ltinput typeThe all Value of type attribute /gt ltinput typeThe all Value of type attribute /gt
text Email Password Radio Checkbox
Color Number Date Datetime month
range date-time-local time File reset
Search Button submit
3
Typetext
ltinput type"text"gt defines a one-line input
field for text input Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltformgt First
nameltbrgt ltinput type"text" name"firstname"gtltb
rgt Last nameltbrgt ltinput type"text"
name"lastname"gt lt/formgt lt/bodygt lt/htmlgt
4
Typeemail
The ltinput type"email"gt is used for input fields
that should contain an e-mail address. Depending
on browser support, the e-mail address can be
automatically validated when submitted. Some
smart phones recognize the email type, and adds
".com" to the keyboard to match email
input. ltpgtltbgtNotelt/bgttype"email" is not
supported in IE9 and earlier.lt/pgt EXAMPLE ltbodygt
ltform action"action_page.php"gt E-mail
ltinput type"email" name"email"gt ltinput
type"submit"gt lt/formgt lt/bodygt
5
Typepassword
ltinput type"password"gt defines a password field
ltbodygt ltform action""gt User nameltbrgt ltinput
type"text" name"userid"gt ltbrgt User
passwordltbrgt ltinput type"password"
name"psw"gt lt/formgt ltpgtThe characters in a
password field are masked (shown as asterisks or
circles).lt/pgt lt/bodygt
6
TypeRadio
ltinput type"radio"gt defines a radio
button. Radio buttons let a user select ONE of a
limited number of choices Example
lt!DOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage
Titlelt/titlegtlt/headgt ltbodygt ltformgt ltinput
type"radio" name"gender" value"male" checkedgt
Maleltbrgt ltinput type"radio" name"gender"
value"female"gt Femaleltbrgt ltinput type"radio"
name"gender" value"other"gt Other lt/formgt lt/bodygt
lt/htmlgt
7
Typecheckbox
ltinput type"checkbox"gt defines
a checkbox. Checkboxes let a user select ZERO or
MORE options of a limited number of choices.
ltbodygt ltform action"action_page.php"gt ltinput
type"checkbox" name"vehicle1" value"Bike"gtI
have a bike ltbrgt ltinput type"checkbox"
name"vehicle2" value"Car"gtI have a
car ltbrgt ltinput type"submit"gt lt/formgt lt/bodygt
8
Typecolor
The ltinput type"color"gt is used for input fields
that should contain a color. Depending on browser
support, a color picker can show up in the input
field. ltpgtltbgtNotelt/bgt type"color" is not
supported in Internet Explorer /
Edge.lt/pgt EXAMPLE ltbodygt ltform
action"action_page.php"gt Select your favorite
color ltinput type"color" name"favcolor"
value"ff0000"gt ltinput type"submit"gt lt/formgt lt
/bodygt
9
Typenumber
The ltinput type"number"gt is used for input
fields that should contain a numeric value. You
can set restrictions on the numbers. Depending on
browser support, the restrictions can apply to
the input field. ltpgtltbgtNotelt/bgt type"number" is
not supported in IE9 and earlier.lt/pgt EXAMPLE ltb
odygt ltform action"action_page.php"gt Quantity
(between 1 and 5) ltinput type"number"
name"quantity" min"1" max"5"gt ltinput
type"submit"gt lt/formgt lt/bodygt
10
Typedate
The ltinput type"date"gt is used for input fields
that should contain a date. Depending on browser
support, a date picker can show up in the input
field. ltpgtltstronggtNotelt/stronggt type"date" is
not supported in Internet Explorer 10 and earlier
versions.lt/pgt EXAMPLE ltbodygt ltform
action"action_page.php"gt Birthday ltinput
type"date" name"bday"gt ltinput
type"submit"gt lt/formgt lt/bodygt
11
Typedatetime
The ltinput type"datetime"gt allows the user to
select a date and time (with time zone). (Note
type"datetime" is not supported in Chrome,
Firefox, or IE) EXAMPLE ltbodygt ltform
action"action_page.php"gt Birthday (date and
time) ltinput type"datetime" name"bdaytime"gt
ltinput type"submit"gt lt/formgt lt/bodygt
12
Typemonth
The ltinput type"month"gt allows the user to
select a month and year.Depending on browser
support, a date picker can show up in the input
field.
ltbodygt ltform action"action_page.php"gt Birthday
(month and year) ltinput type"month"
name"bdaymonth"gt ltinput type"submit"gt lt/formgt
ltpgtltstronggtNotelt/stronggt type"month" is not
supported in Internet Explorer 10 and earlier
versions.lt/pgt lt/bodygt
13
Typerange
The ltinput type"range"gt is used for input fields
that should contain a value within a range.
Depending on browser support, the input field can
be displayed as a slider control. (Note
type"range" is not supported in Internet
Explorer 9 and earlier versions.
) EXAMPLE ltbodygt ltform action"action_page.php"
method"get"gt Points ltinput type"range"
name"points" min"0" max"10"gt ltinput
type"submit"gt lt/formgt lt/bodygt
14
Typedatetime-local
The ltinput type"datetime-local"gt allows the user
to select a date and time (no time
zone).Depending on browser support, a date picker
can show up in the input field. ( Note
type"time" is not supported in Firefox, or
Internet Explorer 10 and earlier
versions.) EXAMPLE ltbodygt ltform
action"action_page.php"gt Birthday (date and
time) ltinput type"datetime-local"
name"bdaytime"gt ltinput type"submit"
value"Send"gt lt/formgt lt/bodygt
15
Typetime
The ltinput type"time"gt allows the user to select
a time (no time zone). Depending on browser
support, a time picker can show up in the input
field.
ltbodygt ltform action"action_page.php"gt Select a
time ltinput type"time" name"usr_time"gt
ltinput type"submit"gt lt/formgt ltpgtltstronggtNotelt/st
ronggt type"time" is not supported in Firefox, or
Internet Explorer 10 and earlier
versions.lt/pgt lt/bodygt
16
Typefile
ltinput type"reset"gt defines a reset button that
will reset all form values to their default
values If you change the input values and then
click the "Reset" button, the form-data will be
reset to the default values.
ltbodygt   ltform action"action_page.php"gt Choose
file like (PDF etc) ltinput type"file"
gt lt/formgt lt/bodygt
17
Typereset
ltinput type"reset"gt defines a reset button that
will reset all form values to their default
values If you change the input values and then
click the "Reset" button, the form-data will be
reset to the default values.
ltbodygt ltform action"action_page.php"gt  First
nameltbrgt  ltinput type"text" name"firstname" va
lue"Mickey"gtltbrgt  Last nameltbrgt  ltinput type"
text" name"lastname" value"Mouse"gtltbrgtltbrgt  ltin
put type"submit" value"Submit"gt  ltinput type"r
eset"gtlt/formgt lt/bodygt
18
Typesearch
The ltinput type"search"gt is used for search
fields (a search field behaves like a regular
text field). EXAMPLE ltbodygt ltform
action"action_page.php"gt Search Google
ltinput type"search" name"googlesearch"gt
ltinput type"submit"gt lt/formgt lt/bodygt
19
TypeButton
ltinput type"submit"gt defines a button
for submitting a form to a form-handler. The
form-handler is typically a server page with a
script for processing input data. The
form-handler is specified in the
form's action attribute
ltbodygt ltform action"action_page.php"gt First
nameltbrgt ltinput type"text" name"firstname"
value"Mickey"gt ltbrgt Last nameltbrgt ltinput
type"text" name"lastname" value"Mouse"gt
ltbrgtltbrgt ltinput type"button"
value"Submit"gt lt/formgt lt/bodygt
20
TypeSubmit
ltinput type"submit"gt defines a button
for submitting a form to a form-handler. The
form-handler is typically a server page with a
script for processing input data. The
form-handler is specified in the
form's action attribute
ltbodygt ltform action"action_page.php"gt First
nameltbrgt ltinput type"text" name"firstname"
value"Mickey"gt ltbrgt Last nameltbrgt ltinput
type"text" name"lastname" value"Mouse"gt
ltbrgtltbrgt ltinput type"submit"
value"Submit"gt lt/formgt lt/bodygt
21
PRACTICAL IMPLEMENTATION
22

• Visit Us Attitude Academy