Creating input text with background image in HTML

[Measurer]

Hi everyone ,
I am a new HTML programmer with just one month of experience in html programming recently i started to create a form and controls like textbox submit buttons and checkboxes. While i was browsing through over the internet i noticed a search textbox with an image , isearched for that in my books an all other stuffs from which i am learning the html. can anyone tell me how can i insert an image in a text box using HTML

[Modifier]

if you want to create an input box with an image which we want to use as background you just have to put the following code in the head part of your HTML program

<style type='text/css'>

.inputbox1 {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #444444;
background:url('images/img1.gif') no-repeat right top;
}

.inputbox2 {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #444444;
background:url('images/img2.gif') no-repeat right top;
}

.inputbox3 {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #444444;
background:url('images/img3.gif') no-repeat right center;
padding-right:20px;
}

.inputbox4 {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #444444;
background:url('images/img1.gif') no-repeat left center;
padding-left:20px;
}

</style>

After that you just have to input the following codes into the body of your html program

<form id="loginForm" name="Form1" method="post">
<input class="inputbox1" type="text" size="15" name="uname" />
<input class="inputbox2" type="password" size="15" value="" name="pwd" />
<input class="inputbox3" type="text" size="15" value="" name="src" />
<input class="inputbox4" type="text" size="15" value="" name="star" />
</form>

[opaper]

you can create an input box with an image First, Download the image into your system after that you can simply create it by adding a background image to the the input tag and a left padding so that the text doesn't overlap the background image.

This is a small segment of the CSS:

.searchBox1{
background-image:url('images/image_you_wantto_add.gif');
background-repeat:no-repeat;
padding-left:30px;

[Zecho]

Try to apply a simple logic, to do it Just use background-image for the "form" attribute and after that add padding=12, text-align:center Else just put the form inside a DIV tag with the background-image. I use this all the time, it looks great with the perfect image. You will have to use Background image on the corresponding textfield on which you want to add the image. Its as simple as that.

[Measurer]

Firstly above all i would like to thanks all of you for giving me all your valuable replies since because of these replies i had learned a lot . I got the logic of inserting an image in an input text. Although i could not understand what Zecho wanted to tell but the above solutions worked for me . anyway guys thanks again for helping me in this matter.