1

私はフォームのデザインを始めましたが、(私には) 当然の方法でそれを実行しましたが、これは実際には間違った方法のように思えます。テーブルではなく、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 を使用してみましたが、ある行のテキスト ボックスを前の行のテキスト ボックスに揃える方法がわかりません。

4

3 に答える 3

1

inputタグは長いテキストには適していないため、見栄えがよくないため、説明にはtextareaタグを使用することをお勧めします。

于 2012-12-13T15:37:56.827 に答える
0

おそらく、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>
于 2012-12-13T14:14:13.733 に答える
-1

これを試してみてください

    <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に属している可能性がありますが、すべてのフォーム要素を 2 列よりも 1 列にまとめた方が使いやすさが向上する傾向があるため、そのようにすることをお勧めします。

于 2012-12-13T14:02:49.367 に答える