HTML form within an image_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-31 18:51 出处：网络

How can i put and an html form (text box and buttons) within an imag开发者_Python百科e (jpg). Please provide the css, html code.

相关专题：css

How can i put and an html form (text box and buttons) within an imag开发者_Python百科e (jpg). Please provide the css, html code.

Note: Image should be in the background and should be in full dimensions.

You can also use this trick:

<form style="position: relative;">
    <img src="mypicture.jpg" border="0" />
    <div style="position: absolute; left: 0px; top: 0px;"> 
       Input here... <input type="text" /><br />
       Input here... <input type="text" /><br />
       Input here... <input type="text" /><br />
       Input here... <input type="text" /><br />
       Input here... <input type="text" /><br />
       <button type="submit">Send</button>
    </div>
</div>

Live test case is available here: http://jsfiddle.net/9UcZg/

Edit: in order to have the form contents centered, either hard code the width like this:

<div style="position: absolute; left: 0px; top: 0px; text-align: center; width: 450px;">

(updated test case: http://jsfiddle.net/9UcZg/2/)

Or use JavaScript to calculate the width "on the fly":

window.onload = function WindowLoad() {
    var oImage = document.getElementById("MyFormBackground");
    var oDiv = document.getElementById("MyFormContents");
    var totalWidth = oImage.offsetWidth;
    var contentsWidth = oDiv.offsetWidth;
    oDiv.style.left = parseInt((totalWidth - contentsWidth) / 2) + "px";
}

For this to work you'll have to alter the HTML a bit, adding id to the image and the container div, here is the updated test case: http://jsfiddle.net/9UcZg/3/

what do you mean with 'within an image'? do you want to use the image as form-background? then something like this:

<html>
<head>
<style>
.formWithBackground {
background-image:url("url to image");
background-repeate:no-repeat;
background-position:...
}
</style>
...
<body>...
<form class="formWithBackground">
<input type="text".../><button>send</button>
</form>
....

should help regards gerhard

Put the code in a div, and give the div a background image.

<style type="text/css">
#picture {
    background-image:url(myimage.jpg)
}
</style>

<div id="picture">

<form>
<input type="text">
<input type="submit">
</form>

</div>

The obvious answer is to have the jpeg image as the background of the element that contains the form fields.

CSS:

.myformbox {
  background-image:url(myimage.jpg);
  height:100px;  /*or whatever the height of the image is*/
  width:100px;   /*ditto*/
}

HTML:

<div class='myformbox'>
  <form ....>
    ....input fields here....
  </form>
</div>

...or something like that.

I note your edit which says "image should be in full dimensions". That is still ambiguous language: do you mean "the box needs to be the full size of the image", or "the image needs to scale to the size of the box"?

For the first of those, see above, where I've added height and width parameters to the CSS.

For the second one however, you have a problem, which is that background image scaling isn't currently supported by CSS (yet!). Solutions to this are a bit more complex, but if this is the question you're asking, here is a page that might help.