Menu ▼

Home / blogs / HTML /

This example shows you how to create a simple and sample login page in html using css styles.

Example
html login page code

Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Login Page</title>
    <style>
        /* Basics */
        html, body
        {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            font-family: "Helvetica Neue" , Helvetica, sans-serif;
            background: #FFFFFF;
        }
        .logincontent
        {
            position: fixed;
            width: 350px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -175px;
            background: #07A8C3;
            padding-top: 10px;
        }
        .loginheading
        {
            border-bottom: solid 1px #ECF2F5;
            padding-left: 18px;
            padding-bottom: 10px;
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
            font-family: sans-serif;
        }
        label
        {
            color: #ffffff;
            display: inline-block;
            margin-left: 18px;
            padding-top: 10px;
            font-size: 15px;
        }
        input[type=text], input[type=password]
        {
            font-size: 14px;
            padding-left: 10px;
            margin: 10px;
            margin-top: 12px;
            margin-left: 18px;
            width: 300px;
            height: 35px;
            border: 1px solid #ccc;
            border-radius: 2px;
            box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f5f5;
            font-size: 14px;
        }
        input[type=checkbox]
        {
            margin-left: 18px;
            margin-top: 30px;
        }
        .loginremember
        {
            background: #ECF2F5;
            height: 70px;
            margin-top: 20px;
        }
        .check
        {
            font-family: sans-serif;
            position: relative;
            top: -2px;
            margin-left: 2px;
            padding: 0px;
            font-size: 12px;
            color: #321;
        }
        .loginbtn
        {
            float: right;
            margin-right: 20px;
            margin-top: 20px;
            padding: 6px 20px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            background-color: #07A8C3;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#07A8C3), to(#6EE4E8));
            background-image: -moz-linear-gradient(top left 90deg, #07A8C3 0%, #6EE4E8 100%);
            background-image: linear-gradient(top left 90deg, #07A8C3 0%, #6EE4E8 100%);
            border-radius: 30px;
            border: 1px solid #07A8C3;
            cursor: pointer;
        }
        .loginbtn:hover
        {
            background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
            background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
            background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
        }
    </style>
</head>
<body>
    <div class="logincontent">
        <div class="loginheading">
            Login
        </div>
        <label for="txtUserName">
            Username:</label>
        <input type="text" id="txtUserName" name="txtUserName" />
        <label for="txtPassword">
            Password:</label>
        <input type="password" id="txtPassword" name="txtPassword" />
        <div class="loginremember">
            <input type="checkbox" id="chbRemember" name="chbRemember" /><label class="check"
                for="chbRemember">Remember me next time</label>
            <input type="submit" class="loginbtn" value="Login" id="btnSubmit" />
        </div>
    </div>
</body>
</html>

Read More...
Submited By : mrkraju On 17 Nov 2015

By using html meta tag we can redirect one web page to another web page, without using javascript, jquery or any other scripting language.

Syntax

<meta http-equiv="refresh" content="5; url=http://www.dotnetlearners.com/" />

http-equiv="refresh" -> indicates the page need to be refresh
content="5; url=http://www.dotnetlearners.com/"
5 -> indicates the page need to be refresh after 5 seconds
url -> indicates to which page it has to be redirected after the page refresh.

Example

html-redirect

Source Code

<html>
<head>
    <title></title>
    <meta http-equiv="refresh" content="5; url=http://www.dotnetlearners.com/" />
</head>
<body>
    <h3>
        In 5 seconds this web page will be redirect to "Dotnet Learners" website....</h3>
</body>
</html>
Read More...
Submited By : mrkraju On 21 Sep 2014
This example shows you how to resize the Textarea control while users entering data. When we are working with Textarea control some times the requirement will be the control should auto size according to the data entered by the user. We can achieve this by writing simple JavaScript and Jquery function.

Here is an live example


HTML & JavaScript/JQuery function
<textarea name="txtexample" rows="5" cols="40" id="txtexample" style="overflow: hidden;"></textarea>

For the textarea control we have given rows="5" and cols="40", the rows will be automatically increase /decrease based on the user input.

JavaScript/JQuery function
$(document).ready(function () {
    $("textarea").on("keyup", function () {
        var str = $(this).val();
        var cols = parseInt($(this).attr("cols"), 10);
        var linecount = 0;
        $(str.split("\n")).each(function (ind, val) {
            if (val.length > 0) {
                linecount += Math.ceil(val.length / cols);
            }
            else {
                linecount++;
            }
        })
        linecount++;
        if (linecount > 5)
            $(this).attr("rows", linecount);
        else
            $(this).attr("rows", 5);
    });
});     

In document.ready() event all the textarea controls keyup event will bind, if you want to bind the keyup event for a particular control then change the $("textarea").on("keyup", function () As $("#textareaid").on("keyup", function ()

Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("textarea").on("keyup", function () {
                var str = $(this).val();
                var cols = parseInt($(this).attr("cols"), 10);
                var linecount = 0;
                $(str.split("\n")).each(function (ind, val) {
                    if (val.length > 0) {
                        linecount += Math.ceil(val.length / cols);
                    }
                    else {
                        linecount++;
                    }
                })
                linecount++;
                if (linecount > 5)
                    $(this).attr("rows", linecount);
                else
                    $(this).attr("rows", 5);
            });
        });       
    </script>
</head>
<body>
    <textarea name="txtexample" rows="5" cols="40" id="txtexample" style="overflow: hidden;"></textarea>
</body>
</html>
Read More...
Submited By : mrkraju On 10 Sep 2014




Search dotnetlearners.com