CODEWITHSUNDEEP
htmlcssinput
user14657023
user14657023

Reputation:

Input Labels Fixed Width

I would like the labels for the inputs to be the same width allowing the inputs and labels to be like a table.

Kind of like two columns: 1 for the labels and 1 for the inputs

Code So Far:

th, td, table{border: 2px solid black;
border-collapse: collapse;
}

th, td{width: 100px}

table{width: 100%;
text-align: center;}

body{font-family: "Bradley's Hand", cursive;}

.label{display: inline-block;
width: 100px}

input{width: 200px;}
<body>
<h1>Add Transactions</h1>

<fieldset>
<legend>Use This Form To Add Transactions</legend>

<form action="add.php" method="post">
<label class="label" for="date">Transaction Date: </label>

<input type="date" name="date" required>
<br>
<br>
<label class="label" for="amount">Transaction Amount: </label>
<input type="number" name="amount" required>
<br>
<br>
<label class="label" for="merchant">Merchant: </label>
<select name="merchant" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label class="label" for="om">Other Merchant: </label>
<input type="text" name="om">
<br><br>
<label for="type" class="label">Transaction Type: </label>
<select name="type" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label for="ot" class="label">Other Transaction Type: </label>
<input type="text" name="ot">
<br><br>
<label for="source" class="label">Source: </label>
<select name="source" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label for="os" class="label">Other Source: </label>
<input type="text" name="os">
<br>
<br>
<input type="reset">
<input type="submit" value="Save Transaction">
</form>
</fieldset>
</body>
</htm>

Thanks!

P.S. I can give more details if I am not clear enough!

P.P.S. What I mean by

like a table

is like the structure. Not like an actual table with <table>

Upvotes: 1

Views: 1236

Answers (1)

tacoshy
tacoshy

Reputation: 13001

Easiest way to solve it: CSS-Grid. Will allow for full responsiveness and create a table like layout. to leave the buttons at the bottom as they where, I wrapped them inside an extra div.

body {
  font-family: "Bradley's Hand", cursive;
}

form {
  display: grid;
  grid-template-columns: min-content auto;
  grid-row-gap: 2em;
  white-space: nowrap;
}

.last-row {
  grid-column: span 2;
}

.last-row input {
  width: 200px;
}
<body>
  <h1>Add Transactions</h1>
  <fieldset>
    <legend>Use This Form To Add Transactions</legend>

    <form action="add.php" method="post">
      <label class="label" for="date">
        Transaction Date:
      </label>
      <input type="date" name="date" required>

      <label class="label" for="amount">
        Transaction Amount:
      </label>
      <input type="number" name="amount" required>

      <label class="label" for="merchant">
        Merchant:
      </label>
      <select name="merchant" required>
        <option value="" disable selected>
          Select One
        </option>
        <option value="other">
          Other
        </option>
      </select>
      
      <label class="label" for="om">
        Other Merchant:
      </label>
      <input type="text" name="om">

      <label for="type" class="label">
        Transaction Type:
      </label>
      <select name="type" required>
        <option value="" disable selected>
          Select One
        </option>
        <option value="other">
          Other
        </option>
      </select>

      <label for="ot" class="label">
        Other Transaction Type:
      </label>
      <input type="text" name="ot">

      <label for="source" class="label">Source: </label>
      <select name="source" required>
        <option value="" disable selected>
          Select One
        </option>
        <option value="other">
          Other
        </option>
      </select>

      <label for="os" class="label">Other Source: </label>
      <input type="text" name="os">
      <div class="last-row">
        <input type="reset">
        <input type="submit" value="Save Transaction">
      </div>
    </form>
  </fieldset>
</body>
</htm>

Upvotes: 3

Related Questions