如何将表单放置在带页眉的图像上

Question

我有这个联系人表格，我想弄清楚的是如何将它放在灰色字段和蓝色标题中，使其保持在上面，如所附图片所示。

请参阅我正在努力实现的目标的图片或以下链接-https://motopara.com/imagetest.html

如有任何帮助，我们将不胜感激。

非常感谢你的帮助。

<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 col-md-offset-3" id="form_container">
<!-- <h2 style="color: darkred">Contact Us</h2> -->
<!-- <p> Please send your message below. We will get back to you at the earliest! </p> -->
<form role="form" method="post" id="reused_form">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"></label>
<input type="text" class="form-control" id="oi_name" name="oi_name" placeholder="Your name" required >
</div>
<div class="col-sm-6 form-group">
<label for="email"></label>
<input type="email" class="form-control" id="oi_email" name="oi_email" placeholder="Your email" required >
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="Frame">Choose frame:</label>
<select class="form-control" id="oi_frame" name="oi_frame">
<option>Rebel 2 RS</option>
<option>Alpha PPG</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="engine">Choose engine:</label>
<select class="form-control" id="oi_engine" name="oi_engine">
<option>Vittorazi Atom 80</option>
<option>Vittorazi Moster 185+ Pull Start</option>
<option>Vittorazi Moster 185+ Dual Start Start</option>
<option>Vittorazi Factory R</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="Frame">Choose harness:</label>
<select class="form-control" id="oi_harness" name="oi_harness">
<option>Dudek Powerseat S/M</option>
<option>Dudek Powerseat L/XL</option>
<option>Apco Split Leg S/M</option>
<option>Apco Split Leg L/XL</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="Engine">Choose propeller:</label>
<select class="form-control" id="oi_propeller" name="oi_propeller">
<option>Helix 125cm</option>
<option>Helix 130cm</option>
<option>E-Prop 125cm</option>
<option>E-Prop 130cm</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="Frame">Choose throttle:</label>
<select class="form-control" id="oi_throttle" name="oi_throttle">
<option>Vittorazi Throttle L</option>
<option>Vittorazi Throttle R</option>
<option>Polini Pull Start Throttle</option>
<option>Polini Dual Start Throttle</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="Frame">Choose accessories:<br>(Add in comments if you may need more than  1 accessory)</label>
<select class="form-control" id="oi_accessories" name="oi_accessories">
<option>Swing Arms Sleeves</option>
<option>Offset Blocks</option>
<option>Parts Bag</option>
<option>Offset Blocks</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"></label>
<textarea class="form-control" type="textarea" id="oi_message" name="oi_message" maxlength="3000" rows="4" placeholder="Add additional comments here"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" class="btn btn-danger btn-lg btn-block" >Send Inquiry&rarr;</button>
</div>
</div>
</form>
<div id="success_message" style="width:100%; height:100%; display:none;" > <h2 style="color:red;">Your inquiry have been received. We will get back to you shortly.</h2> </div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div></div>

Answer 1

使用它来完成任务-

<form>
<fieldset>
<legend style="margin: auto;">
<img src="https://source.unsplash.com/100x100/?nature" alt="">
</legend>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed, saepe. Doloremque ab minima repellat minus. Deserunt, minus veniam veritatis quisquam molestiae exercitationem in officiis a, id quo earum at aspernatur voluptas neque error consequuntur eos quas, distinctio sequi! Eius, animi incidunt vel similique magnam laboriosam ad quisquam ipsum quam repellat at dolorum suscipit aliquid earum ab molestias sed laudantium fugit. Nobis odio, voluptatum repellendus vitae itaque maxime maiores fugiat animi tenetur laborum iusto autem ratione rerum quo corrupti, similique exercitationem natus, unde beatae laboriosam. Soluta amet atque totam aliquam nam quae, veritatis, vitae et voluptatum fuga facilis ea distinctio recusandae.</p>
</fieldset>
</form>

CCD_ 1&legend是未知的html标签，它解决了一个很大的问题，因为开发者不使用它们