Simple Login Form using HTML 5

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"

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

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

Resources

Simple Login Form using HTML 5

Reactions

5 Comments

Introduction