图像中的HTML表单 [英] HTML form within an image

问题描述

如何在图片（jpg）中放置HTML表单（文本框和按钮）。请提供css，html代码。

How can i put and an html form (text box and buttons) within an image (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>

现在提供测试用例： http://jsfiddle.net/9UcZg/

编辑：为了使表单内容居中，代码宽度如下：

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;">

（更新的测试用例： http://jsfiddle.net/9UcZg/2/ ）

或使用JavaScript计算宽度fly：

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";
}

为了工作，你必须改变HTML， id 到图像和容器div，这里是更新的测试用例： http://jsfiddle.net/9UcZg/3/

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/

这篇关于图像中的HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！