Question

我已经开始设计一个表单了，我已经用明显的方式（对我而言）这样做了，但这看起来确实是错误的。我不认为我应该使用表格，而是使用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>

有人能建议更好的方法或做上述事情吗？具体来说，我希望它看起来不错，例如“选择”框的排列与上面描述框的结尾。

我尝试过使用DIV，但我无法弄清楚如何将一行上的文本框与前一行的文本框对齐。

Answer 1

最好使用textarea标签进行描述，因为输入标签不适合长文本而且看起来不太好。

Answer 2

你可能会开始使用div和css，因为这样你就可以更好地控制你的元素了。试试这段代码。

<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>

Answer 3

放手一搏

    <form action="test.php">

    <div style="margin-bottom:5px;">
        <div style="float:right;">
            Design type
            <select id="prjdesigntype">
                <option value="0" selected="selected">
                    - Select one option
                </option>
            </select>
        </div>
        <div>
            Name
            <input type="text" id="prjname" size="30"/>
        </div>
    </div>

    <div>
        Description <input type="text" size="60" id="prjdesc" />
    </div>

</form>

一旦你了解它，div和CSS比表格容易得多：）

此外，这可能更多地属于http://ux.stackexchange.com，但它可能更好地将所有表单元素放在一列而不是两列中，因此您可能希望这样做。

对齐HTML表单字段 - 转换为CSS

3 个答案: