Introduction
This article helps to show how to design a
simple Login form using HTML 5 tools. We know that HTML is an acronym for "HyperText
Markup Language" that is used to display data in a browser. HTML 5 is the
advanced version of HTML for developing 3D or animated applications. In this
application we have implemented some designing tools and developed the simple
Login form. HTML5 is the latest version of HTML (Hypertext Markup Language). The initial phase for the development of
HTML5 started in 2004 by Web Hypertext Application Technology Working Group that
has been developed and edited by David Hyatt of Apple and Ian Hickson of Google.
The extension for HTML is ".html".
Step 1 : Open Notepad
- Click->Start button->Notepad
- Give the file a name of your choice
- Click New button->save
- There the name is "Tom.html"
![notepad.gif]()
Step 2 : Create a Folder the
name of folder
- Right click of Desktop Screen-> New->
Folder
- Name of Folder is "Sam"
- Finally all HTML files and related sources
are saved in that folder
![folder.gif]()
Step 3 : Apply the sheet of the form
Code
<style
type="text/css">
* {
margin:
0px;
padding:
0px;outline:
none;
}
body {
background:
#00FF99;
}
form {
border:
1px solid
#270644;
width:
250px;
-moz-border-radius:
20px;
-webkit-border-radius:
20px;
background:
-moz-linear-gradient(19% 75% 90deg,#CC66FF, #66FFFF);
background:-webkit-gradient(linear,
0% 0%, 0% 100%, from(#66FFFF), to(#CC66FF));
margin:50px
auto;
padding:
20px;
-moz-box-shadow:0px
-5px 300px
#270644;
-webkit-box-shadow:0px
-5px 300px
#270644;
}
label {
font-size:
12px;
font-family:
arial, sans-serif;
list-style-type:
none;
color: #fff;
text-shadow:
#000 1px
1px;
margin-bottom:
10px;
font-weight:
bold;
letter-spacing:
1px;
text-transform:
uppercase;
display:
block;
}
input {
-webkit-transition-property:
-webkit-box-shadow,
background;
-webkit-transition-duration:
0.25s;
padding:
6px;
border-bottom:
0px;
border-left:
0px;
border-right:
0px;
border-top:
1px solid
#ad64e0;
-moz-box-shadow:
0px 0px
2px #000;
-webkit-box-shadow:
0px 0px
2px #000;
margin-bottom:
10px;
background:
#8a33c6;
width:
230px;
}
input.submit {
-webkit-transition-property:
-webkit-box-shadow,
background;
-webkit-transition-duration:
0.25s;
width:
100px;
background:
-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#66FFFF), to(#781bb9));
background:
-moz-linear-gradient(19% 75% 90deg,#781bb9, #66FFFF);
color:
#fff;
text-transform:
uppercase;
text-shadow:
#000 1px
1px;
border-top:
1px solid
#ad64e0;
margin-top:
10px;
}
input.submit:hover {
-webkit-box-shadow:
0px 0px
2px #000;
background:
-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#66FFFF), to(#781bb9));
background:
-moz-linear-gradient(19% 75% 90deg,#781bb9, #66FFFF);
}
input.submit:active {
background:
-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#781bb9), to(#66FFFF));
background:
-moz-linear-gradient(19% 75% 90deg,#66FFFF, #781bb9);
}
input:hover {
-webkit-box-shadow:
0px 0px
4px #000;
background:
#9d39e1;
}
</style>
Step 4 : Define the body part and set the content of the login form.
Code
<body>
<form action="">
<label>Enter
the Username</label>
<input
type="text"
name="username"
/>
<label>Enter
the Password</label>
<input
type="password"
name="password"
/>
<input
type="submit"
value="Login"
name="submit"
class="submit"
/>
</form>
</body>
Step 5 : Write the complete code for the developed simple login form that uses the HTML 5 tools. The complete application is given
below.
Code
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"/>
<title>Tom
Login aplication</title>
<meta
name="description"
content="create login form">
<style
type="text/css">
* {
margin:
0px;
padding:
0px;outline:
none;
}
body {
background:
#00FF99;
}
form {
border:
1px solid
#270644;
width:
250px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background:
-moz-linear-gradient(19% 75% 90deg,#CC66FF, #66FFFF);
background:-webkit-gradient(linear,
0% 0%, 0% 100%, from(#66FFFF), to(#CC66FF));
margin:50px
auto;
padding:
20px;
-moz-box-shadow:0px
-5px 300px
#270644;
-webkit-box-shadow:0px
-5px 300px
#270644;
}
label {
font-size:
12px;
font-family:
arial, sans-serif;
list-style-type: none;
color:
#fff;
text-shadow:
#000 1px
1px;
margin-bottom:
10px;
font-weight:
bold;
letter-spacing:
1px;
text-transform:
uppercase;
display:
block;
}
input {
-webkit-transition-property: -webkit-box-shadow,
background;
-webkit-transition-duration: 0.25s;
padding:
6px;
border-bottom:
0px;
border-left:
0px;
border-right:
0px;
border-top:
1px solid
#ad64e0;
-moz-box-shadow: 0px
0px 2px
#000;
-webkit-box-shadow: 0px
0px 2px
#000;
margin-bottom:
10px;
background:
#8a33c6;
width:
230px;
}
input.submit
{
-webkit-transition-property: -webkit-box-shadow,
background;
-webkit-transition-duration: 0.25s;
width:
100px;
background:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#66FFFF),
to(#781bb9));
background:
-moz-linear-gradient(19% 75% 90deg,#781bb9, #66FFFF);
color:
#fff;
text-transform:
uppercase;
text-shadow:
#000 1px
1px;
border-top:
1px solid
#ad64e0;
margin-top:
10px;
}
input.submit:hover
{
-webkit-box-shadow: 0px
0px 2px
#000;
background:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#66FFFF),
to(#781bb9));
background:
-moz-linear-gradient(19% 75% 90deg,#781bb9, #66FFFF);
}
input.submit:active {
background:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9),
to(#66FFFF));
background:
-moz-linear-gradient(19% 75% 90deg,#66FFFF, #781bb9);
}
input:hover
{
-webkit-box-shadow: 0px
0px 4px
#000;
background:
#9d39e1;
}
</style>
</head>
<body>
<form action="">
<label>Enter
the Username</label>
<input
type="text"
name="username"
/>
<label>Enter
the Password</label>
<input
type="password"
name="password"
/>
<input
type="submit"
value="Login"
name="submit"
class="submit"
/>
</form>
/body>
</html>
Output
![ramooo.gif]()
![3.gif]()
Resources