0

私はこのフォームを持っています:

<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>


    <tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr>

    <tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
    <tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €&lt;br/><br/></td></tr>

    <tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
        <option>Select Number of Classes</option>
        <?php
        echo'<option value="1">One</option>';
        echo'<option value="2">Two</option>';
        echo'<option value="3">Three</option>';

        ?>
    </select><br/><br/></td></tr>


    <tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
    <tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
    <tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>

    <tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
    </table><br />
    <input type="submit" name="enviar" value="Insertar"/>
    </form>

CSS クラス Forms は次のとおりです。

td.Forms { 


    text-align: left;
    text-indent: 10px;
    font-family: Century Gothic;
    font-weight: normal;
    font-size: 15px; 
    white-space: nowrap;
}

タイトルが終了するとボックスが開始され、ボックスがすべて同じ部分で開始されるようにします。このhttp://i48.tinypic.com/2nbd2m8.pngのように、1 つの列にタイトルを表示し、別の列にボックスを表示するという考えだと思いますが、私はこれを持っていますhttp://i49.tinypic.com/1exb80.png

4

3 に答える 3

0

<td>すべての入力フィールドが同じ位置から始まるように、入力フィールドにセル ( ) を追加する必要があります。さらに、幅を定義して、行の 1 つのセルと別のセルの間に十分なスペースを確保することができます。td.Forms<td>に追加して、すべての に定義しました。width: 200px;最後に、追加した行間に間隔を空けるために:

td {
  padding: 10px 0;   
}

これにより、すべてのセルの上下に 10px のパディングが追加されます。

このフィドルをチェックして、コードの動作を確認してください。

于 2012-12-24T18:11:07.857 に答える
0

以下は、正しい html マークアップです (これにテーブル レイアウトを使用すると仮定します)。ここにデモがあります。

<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>


    <tr>
        <td class=Forms>ICAO:</td>
        <td><input type="text" value="" name="ICAO" /></td>
    </tr>

    <tr>
        <td class=Forms>Name:</td>
        <td><input type="text" value="Airbus A320" name="nombre" /></td>
    </tr>
    <tr>
        <td class=Forms>Price:</td>
        <td><input maxlength="9" value="1000000" type="text" name="precio" /> €&lt;/td>
    </tr>

    <tr>
        <td class=Forms>Number Classes:</td>
        <td>
            <select name="numberclasses" id="numberclasses" onchange="callAjax()">
            <option>Select Number of Classes</option>
            <?php
            echo'<option value="1">One</option>';
            echo'<option value="2">Two</option>';
            echo'<option value="3">Three</option>';
            ?>
            </select>
        </td>
    </tr>
    <tr>
        <td class=Forms>First Class:</td>
        <td><input disabled="disabled" type="text" name="classes1" /></td>
    </tr>
    <tr>
        <td class=Forms>Bussines Class:</td>
        <td><input disabled="disabled" type="text" name="classes2" /></td>
    </tr>
    <tr>
        <td class=Forms>Economy Class:</td>
        <td><input disabled="disabled" type="text" name="classses" /></td>
    </tr>
    <tr>
        <td class=Forms>Capacidad:</td>
        <td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td>
    </tr>
    </table>
    <input type="submit" name="enviar" value="Insertar"/>
</form>
于 2012-12-24T18:51:47.533 に答える
0

私はあなたに答えを与えるつもりですが、最初にいくつかのセマンティクスと、テーブルを使用せずにフォームを適切にコーディングする方法について説明したいと思います。

HTML フォームは、HTML の誕生以来存在しています。セマンティック html を適切にコーディングするのに役立つだけの html フォーム要素がどれだけ多く使われているかに驚かれることでしょう。適切なセマンティック html とは、次のことを意味します。

1) 視覚障害者が使用する Google 検索エンジンやブラウザーなどのテキスト ビューアーがコードにアクセスできる 2) 連邦法を満たしている (米国の法律では、学校/政府の Web サイトにアクセスできることが義務付けられています) 3) バックエンドのコーディングが容易になります ( php) 長い目で見れば。

必要最小限のフォームには、次のものが含まれている必要があります。

<form>
 <fieldset>
   <div>
     <label for="first-name">First Name</label>
     <input type="textbox" name="first_name" id="first-name" value="" />
   </div>
   <div>
     <label for="gender_selection">Gender</label>
     <select name="gender" id="gender_selection">
       <option value="male">Male</option>
       <option value="female">Female</option>
     </select>
   </div>
 </fieldset>
</form>
  • fieldsetタグごとにタグが必要formです。
  • labelタグは、フォーム要素が表すものを定義するために使用されます。これは、各フォーム要素が何を表しているかをテキストビューアに伝えるものです! 確かになくても構いませんが、なぜこのタグがまさにその目的のために作成されたのか.
  • div タグを使用すると、必要なエラー/修正を簡単にスタイルできます。

CSS

form div {
  overflow: hidden;
}
form div label {
  float: left;
  width: 120px;
  padding: 0 20px 0 0;
}
form div input, form div select {
  float: left;
  width: 220px;
}

テーブルを使用せず、アクセス可能で、適切な html を使用するという利点を追加して、表形式のフォームを模倣する単純な css (テストされていません)。

ユーザーが in でエラーを起こした場合、単にその divfirst nameにクラスを追加するとします。.error

   <div class="error">
     <label for="first-name">First Name</label>
     <input type="textbox" name="first_name" id="first-name" value="" />
   </div>

CSS:

div.error label {
  color: red;
}
div.error input {
  border: red;
  color: red;
}

質問への回答:

HTML フォームの「ラベル」要素の幅が固定されていません。<td>余分な列を追加するか、上記で提供したコードを使用して、固定幅を追加します。

この記事が今後の参考になれば幸いです。

于 2012-12-28T12:33:37.330 に答える