HTMLフォームのフィールド名と入力フィールドが互いに正しく整列していません

Question

ユーザーが入力するフィールドを含むフォームを作成しようとしています。フィールドの名前とその入力フィールドが完全に一致していないため、入力ボックスの対象となるフィールドが混乱するため、フォームの記入が難しくなります。私はテーブルにフォーム要素を配置しようとしましたが、行全体がフィールド名と入力ボックスを完全に含んでいるのでUIが壊れてしまい、見苦しいように見えます。それと一緒にスクリーンショットを添付します。

<form action="http://203.115.101.30/kpmProcess/index.php/support/form_NewDeviceAddition" method="post" accept-charset="utf-8"> 
    <form data-toggle="validator" method="post" name="myformlisting" id="myformlisting" class="form form-horizontal" > 
     <table width="100%"> 
      <tr> 

       <div class="form-group"> 
        <td colspan="2"> 
       <label class="col-sm-3 control-label" for="form-control-2" >Dispatch Date:*</label> 
        </td> 
        <td colspan="2"> 
       <div class="col-sm-9"> 
        <input type="text" class="form-control" name="date" id="datepicker1" value="" required /> 
       </div> 
        </td> 
       </div> 
     </tr> 
     </table> 
       <div class="form-group"> 
       <label class="col-sm-3 control-label" for="form-control-3">Customer Name:*</label> 
       <div class="col-sm-9"> 
        <input type="text" class="form-control" name="customer_name" id="customer_name_id" required > 
       </div> 
       </div> 
       <div class="form-group"> 
       <label class="col-sm-3 control-label" for="form-control-4">Truck No:*</label> 
       <div class="col-sm-9"> 
        <input type="text" class="form-control" name="truck_no" id="truck_no_id" required > 
       </div> 
       </div> 

最後に閉じられたフィールドとフォームタグがあります。

Answer 1

フレックスボックスをラッパーとして使用すると、それらを完全に整列させることができます。

input { 
 
    padding: .5em; 
 
} 
 

 
.container { 
 
    width: 50%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    margin-bottom: .5em; 
 
} 
 

 
.container:nth-child(1) label { 
 
align-self: flex-end; /* vertical align bottom */ 
 
background: lightblue; 
 
} 
 

 
.container:nth-child(2) label { 
 
align-self: center; /* vertical align center */ 
 
background: pink; 
 
} 
 

 
.container:nth-child(3) label { 
 
align-self: flex-start; /* vertical align top */ 
 
background: lightgreen; 
 
}

<div class="container"> 
 
    <label for="name">Customer name</label> 
 
    <input name="name" type="text"> 
 
</div> 
 
<div class="container"> 
 
    <label for="zip">ZIP code</label> 
 
    <input name="zip" type="text"> 
 
</div> 
 
<div class="container"> 
 
    <label for="place">Place</label> 
 
    <input name="place" type="text"> 
 
</div>

Answer 2

多分margin-topとmargin-bottomは、フォームを読みやすくする必要があります。