0

I have this form:

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

And the CSS class Forms is:

td.Forms { 


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

The boxes start when the title finish and I want the boxes start all in the same part. I think the idea is see the titles in one colum and the boxes in other, like this http://i48.tinypic.com/2nbd2m8.png, but I have this http://i49.tinypic.com/1exb80.png

4

3 回答 3

0

我将给你答案——但首先我想解释一些语义以及如何在不使用表格的情况下正确编码表单。

自 html 出现以来，html 形式就已经存在。您会惊讶地发现，有多少 html 表单元素仅存在于帮助您正确编码语义 html 时并没有被使用。正确的语义 html 意味着：

1) 文本查看器（例如谷歌搜索引擎和盲人使用的浏览器）可以访问您的代码 2) 符合联邦法律（美国法律要求学校/政府网站可以访问） 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;
}

简单的 css（未测试）来模仿您的表格形式，并具有不使用表格、可访问和使用正确 html 的额外优势。

现在，如果用户在 in 中犯了错误，让我们说first name我们只需将类添加.error到该 div：

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

您需要<td>为输入字段添加额外的单元格 ( )，以便它们都从同一位置开始。此外，您可能需要定义一个宽度以确保在一行中的一个单元格和另一个单元格之间有足够的空间。我<td>通过添加width: 200px;到您的 td.Forms 将其定义为 all 。最后给我添加的行之间的间距：

td {
  padding: 10px 0;   
}

这为每个单元格的顶部和底部添加了 10 像素的填充。

查看此小提琴以查看实际代码。

于 2012-12-24T18:11:07.857 回答