10

画面全体に複数のフィールドが並んでいる複雑なフォームを配置するにはどうすればよいですか？

4

11 に答える 11

4

なぜ人々はテーブルを避けることにひどく曲がっているのですか？

テーブルは非推奨ではなく、論理的にテーブルに属するコンテンツを表示するときに使用する必要があります。

テーブルが直感的に理解できるようにフォームが論理的にグループ化されている場合は、テーブルを使用してください。

「この結果を達成するための最もクリーンで、最も単純で、最も保守しやすい方法は何ですか」と常に考えてください。

可変数の列を持つ流動的なフォームが必要な場合は、これを無視してください。

于 2009-04-21T14:14:05.943 に答える
3

定義リストを使用して、もう少しセマンティックな方法を好みます。

<dl class="form">
    <dt><label for="input1">One:</label></dt>
    <dd><input type="text" name="input1" id="input1"></dd>
    <dt><label for="input2">Two:</label></dt>
    <dd><input type="text" name="input2" id="input2"></dd>
</dl>

次に、CSS：

dl.form {
    width:100%;
    float:left;
    clear:both;
}
dl.form dt {
    width:50%;
    float:left;
    clear:left;
    text-align:right;
}
dl.form dd {
    width:50%;
    float:left;
    clear:right;
    text-align:left;
}

これにより、ページの中央にフォームが作成され、左側の列にラベルが表示され、右側に入力が表示されます。

于 2009-11-20T02:54:25.007 に答える
2

これを行うには多くの異なる方法があります。それはすべて好みの問題です。私が通常行うことは、すべての行を含むラッパーdivと、ラベル、入力、およびバリデーターを含む行ごとのdivブロックです。line-height CSSプロパティを使用して、垂直方向の配置に役立てることができます。例：

<div class="formWrapper">
<form>
   <div class="formItem">
      <label for="firstName">First Name:</label>
      <input name="firstName" id="firstName" class="required" type="text" />
      <span class="validator" style="display: none;">*</>
   </div>
   ... <!-- Rinse repeat -->
</form>
</div>

<style type="text/css">
   .formWrapper { width: 400px }
   .formWrapper .formItem { line-height: 35px; height: 35px; }
   .formWrapper label { width: 50px; }
   .formWrapper input { width: 100px; border: 1px solid #000; }
   .formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>

お役に立てば幸いです。

于 2009-04-21T14:17:10.663 に答える
1

これは、CSSを使用して「display」プロパティを「inline」に設定することで実行されます（フォーム要素はデフォルトでブロックレベルの要素であるため）。

于 2009-04-21T14:06:39.800 に答える
1

CSSフレームワークの青写真をお勧めします。デモページをざっと見てください。

于 2009-04-21T14:17:05.390 に答える
1

「テーブルなしのレイアウト」で検索してください。多くのサイトでは、CSS による書式設定について説明しています。ここに簡単な紹介があります: http://www.htmlgoodies.com/beyond/css/article.php/3642151

于 2009-04-21T14:09:48.637 に答える
1

KyleFarris のペースに合わせますが、Ben S にテーブルについて言及する勇気があることについて投票する必要がありました。このページとインターネット上のさまざまな CSS ソリューションを見て、ばかばかしいほど単純な問題を解決してください。CSS はいずれ優れたソリューションになるかもしれませんが、当分の間、table タグが提供する単純な行と列のグリッドを複製することは非常に複雑です。私は、フォームのようなものに対するテーブルに対するこの偏見で、無益な時間を数え切れないほど過ごしてきました。なぜ私たちは自分自身にこれをするのですか？

于 2012-01-20T13:14:53.347 に答える
1

これは、非常に複雑なフォームを設計する必要があるときに通常使用するものです。

HTML:

<fieldset>
    <legend>Consent group</legend>
    <form>
        <fieldset class="nolegend">
            <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p>
            <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p>
            <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p>
     </fieldset>
        <fieldset class="nolegend">
            <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</fieldset>

CSS:

body, input, textarea, select {
    font: 1em Arial, Helvetica, sans-serif;
}
input, textarea, select { font-size: .8em }
fieldset,
fieldset legend {
    background-color: #EEE;
}
fieldset {
    border: none;
    margin: 0;
    padding: 0 0 .5em .01em;
    top: 1.25em;
    position: relative;
    margin-bottom: 2em;
}
fieldset fieldset {
    margin: 0 0 1em 0;
}
fieldset legend {
    padding: .25em .5em 0 .5em;
    border-bottom: none;
    font-weight: bold;
    margin-top: -1.25em;
    position: relative;
    *left: -.5em;
    color: #666;
}fieldset form,
fieldset .fieldset {
    margin: 0;
    padding: 1em .5em 0 .5em;
    overflow: hidden;
}
fieldset.nolegend {
    position: static;
    margin-bottom: 1em;
    background-color: transparent;
    padding: 0;
    overflow: hidden;
}
fieldset.nolegend p,
fieldset.nolegend div {
    float: left;
    margin: 0 1em 0 0;
}
fieldset.nolegend p:last-child,
fieldset.nolegend div:last-child {
    margin-right: 0;
}
fieldset.nolegend label>span {
    display: block;
}
fieldset.nolegend label span {
    _display: block;
}

Safari のハックで CSS の数行を省略しました。このコードのライブ バージョンを確認できます。

于 2009-04-21T18:32:32.687 に答える
0

デフォルトでは、入力フィールドはインラインです。したがって、
正しく並べたい場合は、別のオプションなしで簡単に並べることができます。次のとおりです。

<div id="col1" style="float: left;>
    <input type="text" name="field1" />
    <br />
    <input type="text" name="field3" />
</div>

<div id="col2" style="float: left;>
    <input type="text" name="field2" />
    <br />
    <input type="text" name="field4" />
</div>
于 2009-04-21T14:15:12.947 に答える
0

私は fieldsetを使用してすべての要素をグループ化し、フォーム フィールドごとにpを使用することを好みます。

<html>
<head>
<style type="text/css">
    fieldset {
        width: 500px;
        background-color: lightblue;
    }

    fieldset legend {
        font-weight: bold;
    }

    fieldset p {
        clear:both;
        padding: 5px;
    }

    fieldset label {
        text-align: left;
        width: 100px;
        float: left;
        font-weight: bold;
    }

    fieldset .Validator {
        color: red !important;
        font-weight: bold;
    } 

</style>
<head>
<body>
    <form>
        <fieldset>
            <legend>Data</legend>
            <p>
                <label for="firstName">First Name:</label>
                <input name="firstName" id="firstName" class="required" type="text" />
                <span class="Validator" style="display: none;">*</span>
            </p>
            <p>
                <label for="lastName">Last Name:</label>
                <input name="lastName" id="lastName" class="required" type="text" />
                <span class="Validator">*</span>
            </p>
        </fieldset>
    </form>
</body>
</html>
于 2015-04-15T19:39:06.790 に答える