如何将html组件放在由<div>元素</div>创建的顶部边框上

Question

我想在我的表单周围创建边框，并且还想在我的表单周围创建的顶部边框线上放置一些HTML组件。检查我创建的样本表单和顶部边框线上重叠的单选按钮。 能否指导我如何实现类似的输出。

--- O home O office ---------------------------------
|的 _ __ _ __ _ __ _ __ _ __ _ |
|地址：| | |
| | | |
| | | |
| |的 _ __ _ __ _ __ _ __ _ ___ < EM> | |
|的 的 __ _ __ _ __ _ __ _ 的__ _ _ |
|电话号码：| _ __ _ __ _ __ _ __ _ ____ | |
| |
| -------------------------------------------- -------------

Answer 1

您可以使用<fieldset>和<legend>

<form>
  <fieldset>
    <legend><input type="radio" name="location"> home  <input type="radio" name="location"> office</legend>
    form elements
 </fieldset>
<form>

DEMO

Answer 2

   <form>
     <fieldset>
      <legend><input type=radio> home  <input type=radio> office</legend>

    Address: <input type="text"><br>

    Phone No: <input type="tel" ><br>

     </fieldset>
    </form>

Answer 3

在html中使用Fieldset和legend标签