Is there a way to ensure that the labels for the inputs are all the same width, creating a more cohesive table-like layout?
Imagine it as two columns: one for the labels and one for the inputs.
Here is the code I have 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>Thank you for any help!
P.S. I can provide more clarification if needed!
P.P.S. And when I say
like a table
I'm referring to the layout structure, not necessarily using an actual <table> element.