Java Technology Hub

Thursday, 22 November 2012

Login form using html and css styles

Login form using html and css styles

This login form created by using HTML with CSS styles. This login form contains two text fields (for enter mail id and password) and button. That text fields initially having light blue color while click on that text fields that color will be changes to blue color and button initially having blue color with white text, while click on that button that will be changes to white color and button text changes to blue color. This login form easy to understand and with simple code.

code :

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            /*initially button color*/
            #nav{
                width: 65px;
                height: 25px;
                background-color:blue;
                color:white;
                border: solid #616161 2px;
                text-decoration: none;
                text-align: center;
                font: 7px;
                font-weight: bold;

                cursor: pointer;
                     -moz-border-radius: 5px ;
            }
            /*this is for when you click on that submit button that will be changes*/
            #nav:hover{
                background-color: white;
                color: blue;
                border: solid blue 2px;
            }
             /*initially text field color*/
            #textfield
            {
                width: 130px;
                height: 20px;

                padding: 2px;
                border: solid cornflowerblue 1px;
                font: 4px;
                -moz-border-radius:5px;

            }
            /*this is for when you click on that text field that will be changes*/
            #textfield:hover{
                border: solid blue 1px;
            }
            label{
                color: blue;
            }
            h1{
               color: darkcyan;
               font-family: cursive;
            }
        </style>

    </head>
    <body>
    <center><h1>User Sign In </h1>
        <form action="" method="">
            <table>
                <tr><td><label>Email id </label></td>
                    <td> <input type="text" name="mailid" value="" id="textfield"/></td></tr>
                <tr><td><label>Password</label> </td>
                    <td><input type="password" name="mailid" value="" id="textfield"/></td></tr>
                <tr><td></td>
                    <td><input type="submit" value="Sign In" id="nav"/></td></tr>
            </table>
        </form>
    </center>
    </body>
</html>

output :

Tuesday, 20 November 2012

Drop down Menu With CSS style

DROP DOWN MENU WITH CSS STYLES :

Here login box also include. this drop down menu is very good look and easy to understand. It is created with simple code and easy way. Here we have two file one is css file name is dd.css and other one is html file name is dropdown.html

code for html file :

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="dd.css">

    </head>
    <body>
        <div id="style">
        <ul id="navigation">
            <li><a href="" class="first">HOME</a></li>
            <li><a href="">TECHNOLOGIES >></a>

                <ul>
                    <li><a href="">Java</a></li>
                    <li><a href="">HTML</a></li>
                    <li><a href="">PHP</a></li>
                    <li><a href="">C</a></li>
                    <li><a href="">Android</a></li>
                </ul></li>

                <li>
                    <a href="">LOGIN</a>
                    <ul>
                        <li><a><table>
                                    <tr><td>Email id :</td></tr>
                                    <tr><td><input type="text" name="" value="" /></td></tr>
                                    <tr><td>Password :</td></tr>
                                    <tr><td> <input type="password" name="" value="" /></td></tr>
                                    <tr><td><input type="submit" value="LOGIN" /></td></tr>
                                </table></a></li>
                    </ul>

                </li>
                <li><a href="" class="last">CONTACT</a></li>
        </ul>
        </div>
    </body>
</html>

code for css file name dd.css :

/*this below styles for main menu buttons*/
#style {
    position: relative;
    margin-top: 50px;
    margin: 0px auto;
    width: 680px;
    padding: 10px;
    }
ul#navigation{
    margin: 0px auto;
    position: relative;
    float: left;
}
ul#navigation li{
    position: relative;
    float: left;
    border-bottom: 2px solid cadetblue;
    border-top: 1px solid #c4dbe7;
    display: inline;
    font: 12px;
    margin: 0;
    padding: 0px;


}
ul#navigation li a{
    padding: 10px 25px;
    position: relative;
   text-decoration: none;
   color: turquoise;
   background-color:   steelblue;
    display: inline-block;
    border-top: 1px solid #c9c9c9;
    border-left: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;

}

/*
ul#navigation li a:hover{
    background-color: red;
    color: blue;
}*/
ul#navigation li a.first{
    border-left: 0 none;
}
ul#navigation li a.last{
    border-right: 0 none;
}
/*this is for when we put the cursor on button that color will be change*/
ul#navigation li:hover > a{
    background-color: turquoise;
    color: steelblue;
}

/* drop down box : this is for display the sub content when we put the cursor on main button*/
ul#navigation li:hover > ul{
    visibility: visible;
     opacity:1;
}

/* this below styles for sub buttons(sub menus)*/

ul#navigation ul, ul#navigation li ul {
    list-style: none;
    margin: 0;
    padding: 0;

    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
    width:180px;
}

ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
    background:steelblue;
    padding:7px 15px;
    color:turquoise;

    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
}

output :

Login form with css styles

LOGIN FORM WITH CSS STYLES :

CODE : file name is login.html

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
    <center>
        <div style="width: 400px;background-color: #c4dbe7;border:solid 3px blue;">
            <div style="background-color: blue; font:10px; font-weight: bold;color: #c4dbe7;">LOGIN </div>
            <div style="margin: 30px;">
            <form action="servlet name" method="post">
                <table>
                    <tr><td>Email id :</td>
                        <td><input type="text" name="mailid" value="" /></td></tr>
                    <tr><td>Password :</td>
                        <td><input type="password" name="psw" value="" /></td></tr>
                    <tr><td></td><td><input type="submit" value="LOGIN" /></td>
                        </tr>
                        <tr><td></td><td><a href="">Create New Account</a></td></tr>
                        <tr><td></td><td><a href="">Forgot Password</a></td></tr>
                </table>
            </form>
            </div>

        </div>
    </center>
    </body>
</html>

OUTPUT :

Thursday, 15 November 2012

Registration form using HTML with clear information

Registration form using HTML tags(<fieldset> and <legend>). This form is very clear

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        
        <fieldset>
            
    <legend>Registration form</legend>
        <form action="servlet file name"method="post">


                <fieldset>

                    <legend>Account Information</legend>
                    <table>
                        <tr>
                            <td>Email-Id :</td><td><input type="text"name="emailid"value=""/></td>
                        </tr>
                        <tr>
                            <td>Password :</td><td><input type="password"name="psw"value=""/></td>
                        </tr>
                        <tr>
                            <td>Reenter Password :</td><td><input type="password"name="repsw"value=""/></td>
                        </tr>

                    </table>
            </fieldset>
                <fieldset>
                    <legend>Profile Information</legend>
                    <table>

                        <tr>
                            <td>User Name :</td><td><input type="text"name="uname"value=""/></td>
                        </tr>
                        <tr>
                            <td>City :</td>
                            <td><select name="city">
                                    <option value="Hyderabad">Hyderabad</option>
                                    <option value="bangalore">Bangalore</option>
                                     <option value="delhi">Delhi</option>
                                      <option value="chennai">Chennai</option>
                                </select></td>
                        </tr>
                        <tr>
                            <td>Gender :</td><td><input type="radio" name="gender" value="male" />Male
                                <input type="radio" name="gender" value="female" />Female</td>
                        </tr>
                        <tr>
                            <td>Hobbies :</td><td><input type="checkbox" name="drinking" value="ON" />Drinking
                                <input type="checkbox" name="music" value="ON" />Listen Music
                                <input type="checkbox" name="games" value="ON" />Playing Games
                                <input type="checkbox" name="drawing" value="ON" />Drawing
                                <input type="checkbox" name="other" value="ON" />Other</td>
                        </tr>
                        <tr>
                            <td>Select Photo :</td><td><input type="file" name="photo" value="" /></td>
                        </tr>
                        <tr><td><input type="submit" value="Signup" /></td></tr>
                    </table>
            </fieldset>


        </form>
    </fieldset>
    </body>
</html>

OUTPUT :