1

私は自分のウェブページのために素敵なフォームをデザインしたいと思っています。それは私がこのようなものに似ていたいです。ここに画像の説明を入力してください

基本的に、入力フィールドと入力フィールドを説明するテキストには、事前定義された幅が必要です。フォームにテーブルレイアウトを使用していません。代わりに、アプローチにラベルを使用しています。

何が起こるかはこのようなものです

ここに画像の説明を入力してください

テキストフィールドのサイズは、これまでと同じように設定できます。テキストやラベルの幅の設定方法がわかりません。htmlは次のようになります。

<form class="myform" method="POST" action="./php/prescribe.php">
        <label for="fname">First Name :</label>
        <input type="password" name="fname" size="35"><br>

        <label for="fname">Give your email address :</label>
        <input type="password" name="lname" size="35"><br>

        <label for="fname">First Name :</label>
        <input type="password" name="fname" size="35"><br>

        <label for="fname">First Name :</label>
        <input type="password" name="fname" size="35"><br>
</form>
4

2 に答える 2

2

CSS を使用します。また、各行のラッパーを使用する必要があります。これは簡単で汚い例です。

CSS:

.form-row{}
.form-row-alt {} /* add alternating color here */
.form-row label, .form-row-alt label { display: inline-block; width: 150px; }

HTML:

<div class="form-row">
    <label>First Name:</label>
    <input type="text" name="username" />
</div>
于 2012-12-26T14:21:10.517 に答える
1

ラベルをフロートさせることができます：

.myform label {
  float: left;
  clear: both;
  width: 12em; /* or whatever */
}

古いIEバージョンは時々愚かなことをするので、フロートは少しイライラすることがあります。

display: inline-blockまたは、私が好むを使用することもできます：

.myform label {
  display: inline-block;
  width: 12em; /* or whatever */
}

それでは、入力の間に要素を追加する必要がありますが<br>、これは不快だと考える人もいます。

もう1つの方法は<dl>、全体にブロックを使用することですが、基本的な問題は実際には変わりません。

于 2012-12-26T14:18:44.387 に答える