In this tutorial here is discussed about form elements. Basically the forms are added to web-pages by the form elements. The form element consists on the control of the form and it works like a container.
List of form elements
1) label
2) input
3) select
4) textarea
5) legend
6) button
7) fieldset
8) datalist
9) output
10) option
Example of form elements
Get in tuch Signup
Get news about webtags.com.pk
Source code of above form elements
<
!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 some the of the form elements are used,
like input
element. The input
element is mostly used elements and it also consists
different type
for input values. While
label
element is used to define some labels
in the form. This is also mostly used element. The
legend
element is used defines a caption.
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.