How to make the text box side bar rounded

How to  make  the  text box side bar rounded

If you required that to make the text box side bar rounded  then you can easily  make it by using the css property.

First of all you have to make a simple text box  .

<input type="text" name="site" value="Site Name" style="font-size:24px;"/>

Now you have to make the css property for the text box to make the corner rounded

Thease are as below

.login_fields input[type=text] {width:197px; height:20px;text-shadow: 0px 0px 1px #e4e4e4; border:0px; border-radius: 4px;-moz-border-radius: 6px;-webkit-border-radius: 6px;}

By using this class  when you include the class  in your text field it show the  rounded images .

<div class="login_fields"><input type="text" name="site" value="Site Name" style="font-size:24px;"/>

</div>

 Try it

How to add the  loader  on submit button when submit:

If you want  that when you click on login button then it show the other image of other color and then

 Loader on its side

By using java script property  onclick or by css property you can easily do this. You first have to download the images and name the same name  for images  as given or  can chage accordingly .

<script>

function  visibility()

{

        if(document.images)

    {

         

       

        document.images.loading3.style.visibility = 'visible';

        document.images.loading4.style.visibility='visible';}

       

       }

     </script>

<td><input type="image" src="images/btn_login.png" name="submit"  onclick = "javascript:return validateForm();"/>

            <img src="images/btn_logingrey.png"  border="0" name = "loading1" style = "visibility:hidden;margin-left: 10px;margin-top: -5px;"/></td>

            <td><img src="images/loading3.gif"  border="0" name = "loading2" style = "visibility:hidden;"/></td>

You can also  use this property also  for this 

<input type="image" src="images/btn_go.png" name="submit"style = "visibility:visible; float: left;" onclick="this.style.visibility = 'hidden'; if(document.images){document.images.loading.style.visibility = 'visible';}"/>

<img src="images/loading4.gif" alt="" class="left_flo" name = "loading" style = "visibility:hidden; margin-left:-64px;"/>

Want to Display your Name in heart shape

If you want to display your name in heart shape  then you have to use code of java script given below and an html code

First java code  save this file by the name of heart.js

Code is :

function createHeart(sourceId, resultId) {

    objSource = window.document.getElementById(sourceId);

    objResult = window.document.getElementById(resultId);

    if(objSource.value.length == 0) {

        alert("Vikas Gautam Says Enter  Your name in the Text Box!");

        return false;

    }

    string = objSource.value;

    heart = "";

    heart = ". [red][b] \n";

    heart += "_________"               + partString(string, 8)  + "____________" + partString(string, 9)  + "\n";

    heart += "______"                  + partString(string, 14) + "_______"      + partString(string, 16) + "\n";

    heart += "____"                    + partString(string, 19) + "___"          + partString(string, 19) + "\n";

    heart += "___"                     + partString(string, 32) + "_______"      + partString(string, 4)  + "\n";

    heart += "__"                      + partString(string, 32) + "_________"    + partString(string, 4)  + "\n";

    heart += "_"                       + partString(string, 36) + "_______"      + partString(string, 4)  + "\n";

    heart += "_"                       + partString(string, 40) + "______"       + partString(string, 1)  + "\n";

    heart +=                             partString(string, 44) + "__"           + partString(string, 3)  + "\n";

    heart +=                             partString(string, 47) + "_"            + partString(string, 1)  + "\n";

    heart +=                             partString(string, 49)                                           + "\n";

    heart +=                             partString(string, 49)                                           + "\n";

    heart += "_"                       + partString(string, 47)                                           + "\n";

    heart += "__"                      + partString(string, 45)                                           + "\n";

    heart += "____"                    + partString(string, 42)                                           + "\n";

    heart += "______"                  + partString(string, 37)                                           + "\n";

    heart += "_________"               + partString(string, 31)                                           + "\n";

    heart += "____________"            + partString(string, 25)                                           + "\n";

    heart += "______________"          + partString(string, 20)                                           + "\n";

    heart += "_________________"       + partString(string, 13)                                           + "\n";

    heart += "___________________"     + partString(string, 9)                                            + "\n";

    heart += "_____________________"   + partString(string, 6)                                            + "\n";

    heart += "______________________"  + partString(string, 4)                                            + "\n";

    heart += "_______________________" + partString(string, 2)                                            + "\n";

    heart += "create by hack2007.50webs.com";

    objResult.value = heart;

}

function partString(string, num) {

    if(string.length >= num)

        return string.substring(0, num);

    repeat = Math.ceil(num / string.length);

    newString = "";

    for(i = 0; i < repeat; i++)

        newString += string;

    return newString.substring(0, num);

}

After saving this file you need to create  an html file  by which you able to chage your name in heart shape

Name this file as you want   and past this code to this file and save it

<html>

<table align=”center” bgcolor=”green”>

 <tr>

                    <td width="100%" height="74" align="left" valign="top">

      <p style="margin-top: 0; margin-bottom: 0; line-height:150%">

      <font face="Georgia" style="font-size: 11pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      Vikas Gautam  Says Enter   your name </font></p>

      <p style="margin-top: 0; margin-bottom: 0; line-height:150%">

      <font face="Georgia" style="font-size: 11pt">&nbsp;&nbsp;

      <input id="text" name="text" size="20">

                      <input class="button" accesskey="g" onclick="return createHeart('text', 'result');" value=" Heart" type="button"> </font></p>

      <p style="margin-top: 0; margin-bottom: 0; line-height:150%">

      <font face="Georgia" style="font-size: 11pt">

                      <br>

                      <textarea id="result" rows="17" cols="57" onclick="this.focus(); this.select();" readonly="readonly"></textarea>

                                                              <script src="heart.js"></script></font></p>

                    </td>

                  </tr>

                </table>

                </html>

Now you run the html file in html browser  and enter  your name in the text box and click on the  create  heart  button.