In this tutorial all about forms in HTML5 is discussed briefly. Basically there are two parts to a working form. The first part is the form that you see on the page. The other part is a web form is the application on the server that is used to process the information.
Example of form
Get in touch Signup
Get news about webtags.com.pk
Source code of above form
<
!DOCTYPE html
>
<
html
>
<
head
>
<
title
>
Get in touch Signup<
/title
>
<
meta
charset
="
utf-8
"
>
<
style
>
.demo
{
background-color
:
white
;
padding
:
20px
;
margin
:
25px
;
border
:
1px solid grey
;
outline
:
3px solid lightgreen
;
max-height
:
400px
;
}
.demo
input
{
margin
:
10px
;
border-radius
:
5px
;
border-color
:
lightgreen
;
}
.demo
label
{
margin
:
10px
;
border-radius
:
5px
;
border-color
:
lightgreen
;
font-size
:
20px
;
font-weight
:
300px
;
}
.demo
input:hover
{
background-color
:
lightgrey
;
border-color
:
green
;
}
.s-form
:hover
{
cursor
:
pointer
;
}
<
/style
>
<
/head
>
<
body
class
="
demo
"
>
<
h1
>
Get in touch Signup<
/h1
>
<
form
action
="
#
"
method
="
post
"
>
<
legend
>
Join our email list<
/legend
>
<
p
>
Get news about webtags.com.pk<
/p
>
<
ol
>
<
li
>
<
label
for
="
firstlast
"
>
Name:<
/label
>
<
input
type
="
text
"
name
="
username
"
>
<
/li
>
<
li
>
<
label
for
="
"
>
Email:<
/label
>
<
input
type
="
text
"
name
="
"
>
<
/li
>
<
/ol
>
<
input
class
="
s-form
"
type
="
submit
"
value
="
Submit
"
>
<
/form
>
<
/body
>
<
/html
>
Explanation
In this example form
element is used which is
like a container having various input types. Some input type
are used in this example like text
, submit
etc. The legend
element is used for heading. While in
the form label
and input
is used. label
is used to define label in form elements and input
is used
for different input fields. While some styles are also applied.
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.