What's the best way to format this simple HTML form using CSS?
- by GregH
I have have a simple HTML form with say four input widgets (see below)...two lines with two widgets on each line. However, when this renders it is pretty ugly. I want the whole form to be indented from the edge of the left page say 40px and I want the left edge of the widgets to line up with each other and the right edge of the labels to line up. I also want to be able to specify a minimum distance between the right edge of the first widget and the label of the widget next to it. How would I do this using CSS? Basically so it looks something like:
Name: _____________ Common Names: _____________
Version: ____________ Status: ____________
See current un-formatted HTML below:
<form name="detailData">
<div id="dataEntryForm">
<label>
Name: <input type="text" class="input_text" name="ddName"/> Common Names: <input type="text" class="input_text" name="ddCommonNames"><P>
Version: <input type="text" class="input_text" name="ddVer"/> Status: <select name="ddStatus"><option value="A" selected="selected">Active</option><option value="P">Planned</option><option value="D">Deprecated</option>
</label>
</div>
</form>
