How do I align form inputs nicely on top of a picture?

Question

I have a main div. Inside the div, I have an image. I want to place a text field and a button at a specific position on top of the image. Both of them should be transparent so that the users feels that they are writing on top of the image.

My question is how is this best solvable? Is it to make a div that contains those two and place the div in correct position using CSS? Or is there some kind of javascript I could use?

Also, when I hover over the button, I want it to replace the image with a new image.

I made a Fiddle on how it looks like. Here is the code from that fiddle.

HTML:

<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
 <div id="apDiv2">
  <form id="form1" name="form1" method="post" action="">
    <label for="textfield"></label>
    <input name="textfield" type="text" class="formcodeaktiv" id="textfield" style="width: 153px; color: black; background-color: transparent;" />
    <input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
  </form>
 </div>
</div>

CSS:

#apDiv1 {
    position:absolute;
    left:79px;
    top:22px;
    width:354px;
    height:655px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:147px;
    top:472px;
    width:216px;
    height:26px;
    z-index:2;
}
.aktiverabut {
    color: #FFF;
    background: transparent;

    position: absolute;
    left: 165px;
}
.formcodeaktiv {
    left: 5px;
    position: absolute;
}

Answer 1

This is my solution, but please, read @Chandranshu advices:

HTML

<form>
    <div class="iphone">
        <div>
            <input type="text"/>
            <button></button>
        </div>
    </div>
</form>

CSS

html {
    font-family: Arial, Helvetica, sans-serif;
}

div.iphone {
    position: relative;
    width: 317px;
    height: 595px;
    background: transparent url(http://s24.postimg.org/4vpzx68yt/test1.png) no-repeat 0 0;
}

div.iphone div {
    position: absolute;
    bottom: 122px;
    left: 71px;
}

div.iphone div > * {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    appearance: none;
    border-radius: 10px;
    outline: 0;
}

div.iphone input {
    line-height: 10px;
    width: 148px;
    height: 10px;
    padding: 5px;
    background: #fff;
}

div.iphone button {
    margin-left: 5px;
    width: 50px;
    height: 20px;
    cursor: pointer;
}

http://jsfiddle.net/coma/jXCS3/

I've just updated my jsfiddle to show you the benefits of using position relative on the container and absolute on its children (try resizing the textarea):

http://jsfiddle.net/coma/jXCS3/4/

Answer 2

I have updated your jsfiddle to 'almost' solve your problem. Here is the updated code:

HTML:

<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
 <div id="apDiv2">
  <form id="form1" name="form1" method="post" action="">
    <label for="textfield"></label>
    <input name="textfield" type="text" class="formcodeaktiv" id="textfield" placeholder="Skriv in aktiveringskoden"/>
    <input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
  </form>
 </div>
</div>

CSS:

#apDiv1 {
    position:absolute;
    left:79px;
    top:22px;
    width:354px;
    height:655px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    top:451px;
    width:216px;
    height:26px;
    z-index:2;
}
.aktiverabut {
    color: #FFF;
    background: transparent;
    border: 0;
    outline: none;
    position: absolute;
    left: 233px;
}
.formcodeaktiv, .formcodeaktiv:focus, .formcodeaktiv:active {
    left: 72px;
    position: absolute;
    padding-left: 5px;
    border: 0;
    outline: none;
    width: 153px;
    color: black;
    background-color: transparent;
}

Significant changes:

1. Your absolute positions were not right. Just correcting the positions positioned the inputs on top of the image.
2. Then you need to add border: 0 and outline: none to get rid of their borders.
3. Make sure that you also include the :focus and :active pseudoclasses because otherwise the borders will show up when the user starts typing.
4. Move the styles from your HTML to the CSS file. It's annoying to have inline styles.
5. Add a placeholder attribute to the text field. That way when the user starts typing, the placeholder text will disappear. If you keep the text in the image, user typed text will appear on top of the grey hint text.

Since you've also asked about the best way to solve this, let me answer that as well. If you can edit the image, just white out the area where the text field and the button are supposed to be and then use a pure CSS solution to render the them as you want. You can get the rounded corners using border-radius and use an image sprite for different states of the button.