如何创建和排列我的html表单？

Question

我想在html中创建一个表单，像这样的图像。但我不能像这张照片那样安排它。

​

到目前为止，这是我的代码。

 <form>
 <div>
 <br></br>
 <p><font size="2">Prepared and Submitted by: _________________           Reviewed & Validated by: __________________  Noted: ___________________  
</p>
<p> &nbsp;&nbsp;&nbsp;&nbsp;SCHOOL HEAD &nbsp;&nbsp;&nbsp;&nbsp; DIVISION    REPRESENTATIVE  SCHOOLS DIVISION SUPERINTENDENT </pr>
</font>

<p><strong><font size="3">Guidelines:</strong> </font> </pr>

 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="1">1. After receiving and validating the Report for Promotion submitted by the class adviser, the School Head shall compute the grade level total and school total.</font></pr>
 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="1">2. This report together with the copy of Report for Promotion submitted by the class adviser shall be forwarded to the Division Office by the end of the school year.</font>  </pr>
 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="1">3. The Report on Promotion per grade level is reflected in the End of School Year Report of GESP/GSSP.</font></pr>
 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="1">4. Protocols of validation & submission is under the discretion of the Schools Division Superintendent.</font></pr>

</div>
</form>

我是html的新手。请帮帮我。

Answer 1

作为html的新用户，您应该了解一下css属性。

它将帮助您定位元素。

例如，使用边距和填充属性：

http://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides

还可以尝试使用div锚点拆分视图。您可以将这4个点放在一个div中，并使用css属性将div放在右侧。

Answer 2

如果你愿意，你可以使用Bootstrap。你可以在这里获得它: getbootstrap.com

然后，下面的代码就可以工作了：

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="col-md-4">
<div class="control-group">
  <label class="control-label" for="textinput">Prepared and Submitted by:</label>
  <div class="controls">
    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">
    <p class="help-block">SCHOOL HEAD</p>
  </div>
</div>
</div>

<!-- Text input-->
<div class="col-md-4">
<div class="control-group">
  <label class="control-label" for="textinput">Reviewed &amp; Validated by:</label>
  <div class="controls">
    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">
    <p class="help-block">DIVISION    REPRESENTATIVE</p>
  </div>
</div>
</div>

<!-- Text input-->
<div class="col-md-4">
<div class="control-group">
  <label class="control-label" for="textinput">Noted: </label>
  <div class="controls">
    <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge">
    </div>
  </div>
</div>
<div class="col-md-12">
<div class="control-group">
  <label class="control-label" for="textinput">Guidelines: </label>
  <ol class="list-unstyled"> 
       <li>After receiving and validating the Report for Promotion submitted by the class adviser, the School Head shall compute the grade level total and school total.</li>
       <li>This report together with the copy of Report for Promotion submitted by the class adviser shall be forwarded to the Division Office by the end of the school year.</li>
       <li>The Report on Promotion per grade level is reflected in the End of School Year Report of GESP/GSSP.</li>
       <li>Protocols of validation & submission is under the discretion of the Schools Division Superintendent.</li>
  </ol>
</div>
</div>
</fieldset>
</form>