Editing a text area and button

I've an image I made in photoshop which i want to use for my site.

I've attached it.

This is for people to upload things to my site.

I need to get that image into a working text are and submit button.

I've tried to use classes with CSS and html but it's not coming out. right.

here is the html and CSS i'm using


<div id="button">
<form id="form1" class="form" name="form1" method="post" action="">
<label for="submit"></label>
<input type="text" name="submit" id="submit" />
<input name="button2" type="submit" class="buttonStyle" id="button2" />
</form></div>


#button{
background-image:url(upload_bar_bg.png);
background-repeat:no-repeat;
width:650px;
height:65px;
}

.buttonStyle {
border: none;
background-image:url(submit_button.png);
background-repeat:no-repeat;}

.form{
height:65px;}

I'm not getting the height in the text area and the button is completely cut off.

Any suggestions ?

To use an image as a button try this:
<input type="image" src="submit_button.png" alt="Submit" />
Use the green as back-ground for the div the input tag and button is in.

Great thank you.

Now i have to figure out how to re-size the text area and center is :)

Have a another little problem.

Here is the test uploaded
http://www.fragofthemonth.com/test/

As you can see the text area and submit button don't align, I wanted them to look like the image attached in the 1st post. The only reason the textarea is there is because of the image. If removed it hugs the top. I've tried a few different CSS things but nothing is working for me.

Any suggestions ?

Here is the HTML and CSS i'm using at the min.


<div id="button">
<form id="form1" name="form1" method="post" action="">
<label for="submit"></label>
<input name="submit" type="text" class="form" id="submit" value="Paste YouTube.com URL in here" />
<input type="image" src="submit_button2.png" alt="submit" align="bottom" />
</form></div>

CSS

#button{
background-image:url(upload_bar_bg.png);
background-repeat:no-repeat;
width:650px;
height:65px;
text-align:center;
}

.form{
height:30px;
width:350px;
text-shadow:#333;
padding-left:5px;}

Play with this:

<div id="button">
<form id="form1" name="form1" method="post" action="">
<div style="float:left;padding-top:20px;padding-left:5px;"><input name="submit" type="text" class="form" id="submit" value="Paste YouTube.com URL in here"></div>
<div style="padding-top: 4px;"><input type="image" src="sunbm.png" alt="submit" style="text-align: left;"></div>
</form>
</div>
and use the #button {
width: 550px;
} to bring them together