i have been trying to use css to create a form in the form of table but when i used display : table--CodePudding

i have been trying to use css to create a form in the form of table but when i used display : table-row it is getting aligned to right , i need to align the form to left i tried float : left also but is is not working

#theForm {
  color: white;
  display: table;
  padding: 15px;
  background-color: #2c8f77;
  border: solid 2px black;
  float: left;
}

.row {
  display: table-row;
}

.row > label {
  display: table-cell;
  padding: 2px;
  text-align: right;
}

.row > input {
  display: table-cell;
  padding: 2px;
}

<form id="theForm" action="" method="">
  <h2>Click the form below and click order to order</h2>
  <p>
    <div class="row">
      <label for="name">Name:</label>
      <input type="text" name="name" /><br /><br />
    </div>
    <div class="row">
      <label for="Address">Address:</label>
      <input type="text" name="Address" /><br /><br />
    </div>
    <div class="row">
      <label for="Address">phone:</label>
      <input type="tel" name="phone" /><br /><br />
    </div>
    <div class="row">
      <label for="Address">email:</label>
      <input type="email" name="email" /><br /><br />
    </div>
  </p>
</form>

CodePudding user response：

Try this. Here is more on how to use flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#theForm {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 15px;
    background-color: #2c8f77;
    border: solid 2px black;
    float: left;
}

CodePudding user response：

You need to put text-align: right; in .row and add float: left; to the label:

#theForm {
  color: white;
  display: table;
  padding: 15px;
  background-color: #2c8f77;
  border: solid 2px black;
  float: left;
}

.row {
  display: table-row;
  text-align: right;
}

.row > label {
  display: table-cell;
  padding: 2px;
  float: left;
}

.row > input {
  display: table-cell;
  padding: 2px;
}

<form id="theForm" action="" method="">
  <h2>Click the form below and click order to order</h2>
  <p>
    <div class="row">
      <label for="name">Name:</label>
      <input type="text" name="name" /><br /><br />
    </div>
    <div class="row">
      <label for="Address">Address:</label>
      <input type="text" name="Address" /><br /><br />
    </div>
    <div class="row">
      <label for="Address">phone:</label>
      <input type="tel" name="phone" /><br /><br />
    </div>
    <div class="row">
      <label for="Address">email:</label>
      <input type="email" name="email" /><br /><br />
    </div>
  </p>
</form>

CodePudding user response：

I prefer to place a wrapper of the divs instead to use the form tag. Then place the inputs into the labels. Make labels table-rows.

#theForm {
  color: white;
  padding: 15px;
  background-color: #2c8f77;
  border: solid 2px black;
  float: left;
}
.wrapper {
  display: table;
}
.row {
  display: table-row;
}

.row > label {
  display: table-cell;
  padding: 5px 2px;
  text-align: right;
}

.row > label > span {
    display: inline-block;
    width: 50px;    
}
.row > input {
  padding: 2px;
}

<form id="theForm" action="" method="">
  <h2>Click the form below and click order to order</h2>

  <div class="wrapper">
    <div class="row">
      <label for="name">
        <span>Name:</span>
        <input type="text" name="name" />
      </label>
    </div>
    
    <div class="row">
      <label for="Address">
        <span>Address:</span>
        <input type="text" name="Address" />
       </label>
    </div>
    <div class="row">
      <label for="Address">
        <span>phone:</span>
        <input type="tel" name="phone" />
      </label>
    </div>
    
    <div class="row">
      <label for="Address">
        <span>email:</span>
        <input type="email" name="email" />
      </label>
    </div>
  </div>

</form>