Question

I’ve started to design a form, and I’ve done it the obvious way (to me) but this really seems like the wrong way. I don’t think I should be using tables, but rather CSS:

<form action="test.php">
    <table>
        <tr>
            <td>Name</td><td><input type="text" id="prjname" size="30"/></td>
            <td align="right">Design type</td><td align="right"><select id="prjdesigntype">
                <option value="0" selected="selected">- Select one -</option>
                </select></td>
        </tr>
        <tr>
            <td>Description</td><td colspan="3"><input type="text" size="80" id="prjdesc" /></td>
        </tr>
    </table>
</form>

Can anyone suggest a better way or doing the above? Specifically, I want it to look nice, for example the lining up of the “select” box with the end of the description box like above.

I’ve tried using DIVs, but I can’t figure out how to align text boxes on one line with a text box on a previous line.

Answer 1

Probably you would do well to start using divs and css, because then you will have more control over your elements. Try this code.

<div style="width: 500px; height: auto; margin: auto;">
<form>
<input type="text" name="prjname" id="prjname" size="30" placeholder="Enter your name .." style="float:left; clear:none; padding-left: 15px;"/>
<select id="prjdesigntype"style="float: right; clear:none;" >
    <option value="0" selected="selected">- Select one -</option>
</select>
<input type="text" size="80" id="prjdesc" placeholder="Enter the description .." style="float:left; clear:both; width: 500px; padding-left: 15px;"/>

</form>
</div>