画像の中にフォームを埋め込みたい

質問

http://pds.exblog.jp/pds/1/200611/03/49/f0065749_041888.jpg

この画像の白く切り抜かれた部分にフォームを埋め込んで
数値を入力する感じにしたいのですが、どうすればいいでしょうか。
タグとか参考サイトを教えていただけると助かります。

少し検索を掛けてみましたがわかりませんでした。

よろしくお願いします。

回答No.1

steel_gray · ベストアンサー

スタイルシートで制御します。
（フォームの背景に画像を置き、各部品の位置を指示する）

スタイルシートとhtmlの例

<style type="text/css">
#form1{
position:relative;/*フォーム内の部品をabsoluteで配置するため*/
background-image:url(画像のurl);/*配置*/
width:●●px;/*フォーム（背景画像）の幅*/
height:●●px;/*フォーム（背景画像）の高さ*/
}
#point {/* input id="point" の スタイル*/
position:absolute;/*配置方法（絶対位置）*/
top:●●px;left:●●px;/*フォームの上左端からの配置位置*/
width:●●px;/*入力フィールドの幅*/
height:●●px;/*入力フィールドの高さ*/
font-size:●●px;/*入力フィールドの文字サイズ*/
}
</style>

<form ～ id="form1">
<input type="text" name="～" id="point">
～
～
</form>

お礼

例まで書いていただいて助かります。
とてもよくわかりました。ありがとうございました！